MediaFramework uses Angular Framework as core front-end framework for all main functionality areas (non public, non-indexable areas) including Control Panel, My Account, Advance Search Tools, Setup Application etc.
Implementing Angular as core front-end framework while using server side scripting just as api add lots of benefits including
- Adding any type of level of complex features easily that in some cases impossible to add via server side scripting.
- Decrease writing code upto 80%
- Increase performance and speed upto 10 to 40 times faster than traditional server side scripting.
- Make functionality portable (if you make plan to shift from one server side framework to another, all you need to convert backend api)
- Make development faster several times.
- Make front-end applications easily convertible to mobile apps by sharing the same backend apis with less effort.
- Way much stable and bug free application development compared to server side features.
- And more
Besides benefits, there are some disadvantages by adding Angular or other front-end frameworks within your application.
- Make it a bit complicated if you have no experience in working front-end frameworks.
- Due to less direct support, you always need to work in angular apps as a separate project, including writing code, building code and publishing code back to the core application to get effected changes back within the application.
Beside disadvantages that mostly affect your development in the start, once you start feeling comfortable then it will make your life way much easier while adding features in your application.
Angular Application Structure
In current version 1.1.0, MediaFramework uses a single angular application that covers 4 core areas.
- Admin (Complete Control Panel)
- Account (Complete My Account)
- Search (Advance Search Tool)
- Setup (Complete Application Setup Tool)
Angular Application Input Parameters
In current version 1.1.0, Angular Application in MediaFramework requires some input parameters that need to be passed from outside of application (e.g from MediaFramework inner pages or html page where angular app is hosted.
Main input parameters includes
- URL: API Url that will be used within an angular application to communicate with backend server side scripting via api. It needs to be passed from hosted application matched with proper api root unless you want to run angular application as standalone application.
- Ang_UID: User ID (Authenticated User) to tell the application to authorize and load his, her data or act it as a logged in user.
- Ang_Culture: e.g en-US (globalization culture) keep it for future use or you can extend existing functionality according to your need.
- AppType: e.g “account”, “admin”, “setup”, “search”. This tells angular application to load specific inner application functionality or modules designed for specific areas e.g passing “admin” will load complete Admin Control Panel while skipping other areas.
- setupType: It’s needed if AppType is set as “setup” mode. This tells in which process to initialize setup as setup tool divided into two pages. (0: database setup, 1: website user, data & configuration setup
- ImageDirectory: It points to image directory from where to load static images
- AppTitle: It setup application title
- SearchParams: It setup search parameters including search query that will be used by Search Tool to filter results.
Customizing Angular App Features
MediaFramework uses the latest Angular CLI as core platform for writing, building, compiling and publishing Angular Application. Source Angular app is located under the “Angular” directory outside the core MediaFramework project within the bundle.
You can open Source Angular Application in any separate IDE that supports front-end application development easier. (Recommended to use Visual Studio Code)
Once open the project for first time, run the command
That will install angular application all dependencies. Once completed just run
“ng serve --open”
To compile and open the application.
Note: If you are running an application directly via “ng serve” command, you need to take care of these steps first.
- Open readme.txt file and follow the instructions to make sure all css, js file properly setup in “angular.json” as in case of publishing you need to remove some css or js files as these files already part of core MediaFramework application.
- Open index.html file and make sure you adjust all input parameters (as mentioned above) to make sure to load area or settings you want to target e.g admin or search tool etc
- Make sure the URL parameter in index.html file represents proper api URL (local or remote) and it should run properly before running angular application otherwise you will see blank screen or screen screen notifying backend api not working.
- In case you are working in Admin or My Account sections you need to pass proper User ID via “Ang_Uid” parameter in index.html page otherwise authentication failure may arise.
Publishing Angular Application
After making changes and making sure everything works fine by testing your application functionality as a stand-alone application via “ng server” command.
Now need to apply changes within MediaFramework.
In MediaFramework ver 1.1.0, (ASP.NET Core Version), Angular application published files hosted under /wwwroot/app/angular directory (set via angular.json file).
- Before starting publishing make sure you remove /wwwroot/app/angular directory as in some cases if application files in use this will create publishing failure.
- Now open readme.txt file located on the root of Angular Application get some instructions while publishing angular application.
- Remove mentioned (readme.txt) css and js files from angular.json file as these are already part of the main application and may create problems due to duplication.
- Once everything is ok, just run the command “ng build --base-href=/ --deploy-url /app/angular/ --prod --output-hashing none” , this will build and publish applications under /wwwroot/app/ directory.
- After completing just run your main MediaFramework application, clear cache and check your updated features. No need to change anything under the backend application as everything is pre-configure.