Matter Center Web Site ReArchitecture Documentation
The Matter Center web site redesigned to enable branding, simplify customization, support configuration, improve testability and loosely coupled with web services, SharePoint. The clear separation between UI and services will give greater flexibility for branding and UI customization.
Authentication
The web site will use azure AD authentication and passes bearer token to Web Api. The Web Api will access SharePoint. This will eliminate web site direct dependency on SharePoint context. The web site can be accessed from office apps or directly from browser without any dependency on SharePoint context.
Please refer consuming out web api from a single page app to understand complete authentication between SPA, Web API and SharePoint.
MVC Pattern
The MVC pattern framework AngularJS 1.5.8 is used for client side UI. This helps to Separate Views(HTML,CSS) and data model using controllers, resources and services. Anyone can do their own branding, Customize UI by modifying HTML, CSS.
Single Page Application and Routing
The design have capability to support single page application. The Single Page Application (SPA) provides more fluent user experience similar to desktop application. Angular UI-Router framework will be used to achieve client-side Single Page Application routing.
Unit Test Automation
The clear separation of html/css with JavaScript using MVC pattern improves testability. All client side JavaScript code present in controller, resources and services are automated using Jasmine framework. The unit test automation helps to maintain code quality.
Please refer Unit Testing and Jasmin for additional details to understand UI unit test framework.
Views
The hierarchical views are created. The main view contain common html elements and placeholder to load within the main view based on routing.
For example, the main view for create matter will have place holder to load create, assign and notify sub views.
The view for showing matter and document will be common. This view will bind to respective controller based on routing.
Directives
Directives will be created for header, footer, create matter views navigation.
Services
Document and Matter Search Service will be created. This service can be used to find matters or documents based on search criteria. The service connects to WebAPI to get search results.
The authentication service will be created to add authorization token, attach CSRF and additional user data as needed.
Telemetry service will be created to capture usage and errors. By default, the telemetry will be captured using Application insights(AI).
Please refer Set up Application Insights for ASP.net to learn more about AI.
Controllers
The home controller will bind to home view. The navigation, document, matter controllers will contain implementation to get/post data as needed by navigation, find document, find matter sub views.
Resources
We use angular resource service to connect to WebAPI or any external dependent services. The authentication service will be used to attach custom headers and then call made to external API’s using $resource service.
CSS
The css extension language SASS will be used to write css and compile. This helps to easily maintain CSS and customize as needed.
ASP.Net 5
The web application upgraded to ASP.NET 5. This simplifies testing and speed development. You can make changes in source files and refresh browser will take latest changes. you need not to compile and run for every modification.
Please refer Using Angular for Using Angular for Single Page Applications (SPAS) to learn more about ASP.NET 5 support for AngularJS SPAs