Blog Home  Home Feed your aggregator (RSS 2.0)  
Mayur's Blog - Angular2 set up for mulit-page site in Asp.Net MVC Core
 
# Sunday, September 18, 2016

We have seen many web applications with multiple pages. In fact, before the advent of the SPA, muti-page applications were only existed. In reality, there are many muti-page applications in development in today's date as well. Especially, when the application is huge and when it servers many different domains and purposes, the designer could decide in favor of doing muti-page application instead of SPA. When a web application is huge, it is also likely that each page within this multi-page application serves a purpose of SPA. This kind of set up gives the best of both the worlds. By doing multi-page application we do not allow a particular page to grow a lot. That improves maintainability. Additionally, if different pages serves totally different business purposes, then it is a good idea to keep them separate to maintain "separation of concern".

Implementing client side development with Angular2 for any muti-page application requires a little different set up. You may not be able to strictly follow the samples available on Angular2 site. Many of those samples are designed for the SPA.

I came across a situation where I needed to implement Angular2 with muti-page web application. I followed the approach as outlined here. I thought to share the same idea here. I hope that this may be helpful to someone else in need of doing the same thing.

Additionally, you may have an older application that is also a multipage application. Here you may be looking forward to implement the client side development using Angular2. In this case you don't have a choice unless you may want to re-write an application to be an SPA. Re-writing is not always possible. So in this case as well the following discussion might be useful.

Here I explain how to set up Angular2 and how to configure SystemJS to use Angular2 for a multi-page client side web application development. I am using Asp.NET MVC Core as my server side development platform. However, we are discussing here about client side development and this discussion is valid for any server side platform/technology.

1) Create app-components folder under wwwroot

2) Add required components for your application here. For example, if there is a page to manage employees, then you may create employee-edit component here

3) You may create another folder within app-components called common-services

4) You may want to add database services here. For example, you may add employee service to retrieve and update employees

5) You may create another folder within common-service named domains

6) You may use this folder to create interfaces used across your Angular2 project. For example, you may use IEmployee so that data retrieved from employee service can be passed across components by casting JSON to IEmployee. The same way data collected from UI using components can be passed to employee service via IEmployee to make any update in the database

Above image 1: Folder structure

Above image 2: How to refer required services, components and domains within a component

Above image 3: Setting up a service

7) In addition to this you may also see common-components in the screen capture created to show folder structure. This folder actually holds components common to other components. For example, there is component to show error messages. This component is being shared across other components. Such type of common components created for re-usability can be stored here.

Above image 4: Common components

8) There is also another folder called common. It holds common objects but not necessarily domains. For example, Enum.

The logic behind this kind of folder structure is to follow the dependency order. For example, components depend on services, services depend on domains etc. By following this folder structure it is easy to refer the items using import statement. Please refer image 1 to see how consistent it becomes to refer a dependency by following this structure.

9) The next important aspect is to set up bootstrappers and module. As our application is muti-page application we need to set up boot-strapper and module for each page. For example, my application has employee management page. I will set up boot-strapper and module as shown below. You may create modules and page-bootstrappers folder under wwwroot

Above image 5: Module and Boot-strapper

Above image 6: How to refer various dependencies in a module

Above image 7: How to refer module in a boot-strapper

10) Now it is time to set up SystemJS configuration as shown below

(function (global) {
    var packages = {
        'rxjs': {
            defaultExtension: 'js'
        },

        'page-bootstrappers/employee': {
            defaultExtension: 'js',
            main: 'employee-management.js'            
        },
        'page-bootstrappers/admin': {
            defaultExtension: 'js',
            main: 'admin-employee-management.js'
        }
    };

    System.defaultJSExtensions = true;

    System.config({
        baseURL: location.protocol + '//' + location.host,
        paths: {
            'npm:':'node_modules/'
        },
        map: {
            //angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            
            //other libraries
            'rxjs': 'npm:rxjs',

            //my application
            '../app-components/': 'app-components/'
        },
        packages: packages        
    });

})(this);

 

11) Please note:

As this is a multi page, SystemJS must be configured to use baseURL as shown above. Our folder structure for Angular2 always assumes a request from the root to load any component.

12) The following shows the employee management cshtml in VIEWS folder

Above image 8: Employee management folder which users Angular2

The following shows how we set up Employee management page to use Angular2

@{
    ViewBag.Title = "Employee Management";
    Layout = "~/Views/Shared/_LayoutBootstrap.cshtml";
}

<script src="/js/shim.min.js"></script>
<script src="/js/zone.js"></script>
<script src="/js/Reflect.js"></script>
<script src="/js/system.src.js"></script>
<script src="/systemjs.config.js"></script>
<script src="/js/ej.angular2.min.js"></script>
<script>
    System.import('page-bootstrappers/employee').then(function () { }, console.error.bind(console));
</script>
<section>
    <employee-profile>
        <span class="fa fa-spinner fa-pulse fa-3x"></span>&nbsp;&nbsp;&nbsp; Please wait... loading web components and data
    </employee-profile>
</section>

Please note required java script libraries. "js/ej.angular2.min.js" is a third party component library offered by Syncfusion. You may not need it or you may replace it with whatever third party components you are using.

I have created this article based on Angular2 - version 2.0.0. At the time of writing this article, this was the latest version. In the future, this set up may change as per changes applied to Angurlar2 framework.

I hope that this may be useful. If you have any other suggestion to improve it, then please let me know.

Thank you and happy coding!

Sunday, September 18, 2016 7:12:51 PM UTC  #       | 
Copyright © 2020 Mayur Bharodia. All rights reserved.
DasBlog 'Portal' theme by Johnny Hughes.
Pick a theme: