Angular application module architecture: multiple layouts and integration with Asp.Net MVC using CLI

Posted by RITVN on November 21, 2017

Overview

Đặng Trường Chính (DTC), team leader of Rangers team, recently wrote a good summary about how to structure an Angular application with multiple layouts and integrate it with Asp.Net MVC using CLI. We are happy to share it here.

Angular application composes HTML templates with Angularized markup, writes component classes to manage those templates, adds application logic in services, and finally boxes components and services into modules.

After launching the app by bootstrapping the root module, Angular takes over to present your application content in a browser and responds to user interactions according to the instructions you’ve provided.

Module architecture

According to Angular’s documentation, every Angular app has at least one NgModule class, the root module, conventionally named AppModule. While the root module may be the only module in a small application, most apps have many more feature modules, each a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.

An NgModule, whether a root or feature, is a class with an @NgModule decorator.

The application establishes the following module architecture based on guidelines in the documentation for NgModule. and and supports multiple layouts AngularArchitecture.png

Compilation - Using Angular CLI

According to Angular’s AOT compiler documentation, an Angular application consists largely of components and their HTML templates. Before the browser can render the application, the components and templates must be converted to executable JavaScript by an Angular compiler (Ahead-of-Time (AOT), which compiles your app at build time)

You can refer to Why compile with AOT for more information about it.

Integrate app built files and ASP.NET MVC

When you run the ng build --prod command, it will create bundle files (inline, polyfills, scripts, styles, vendor, main) and feature module bundle files (lazy loading)

FeatureModuleBundles.png

Copying built files to ASP.NET MVC root published folder. In cshtml file, we just load them as follow:

BundleFilesInCshtml.png

We are hiring

Would you like to work with the coolest IT guys in Vietnam? Apply to one of the following jobs:

C# / .Net Developer
Senior / Specialist
1000 – 3000 USD

Job requires a high level of technical skills and experience within Microsoft technologies and offers high salary, exciting projects, and constant challenges in terms of technology and design.

Tell me more
Xamarin Developer
Experienced
800 – 1500 USD

Want to have fun developing innovative Xamarin products? We are developing a number of exciting games and social applications of our own as well as supporting third party clients.

Tell me more
Technical Writer
Advanced English
2000 – 4000 USD

Job requires both good English as well as the ability to understand complex technical subjects and systems. You will mainly be writing SEO articles and guidelines for our many products.

Tell me more
Front-End Developers
Experienced
1000 – 2500 USD

We are looking to fill Developer positions with a new team that uses JavaScript, TypeScript, HTML5, AngularJS.
Knowing Ionic framework or NodeJs is a plus, but is not mandatory.

Tell me more
.NET/WPF Developers
Advanced English
1000 – 3000 USD

2 Senior Developer positions in an Offshore Development Center team. You will work directly with a Danish Project Manager at our Vietnam office. The initial project is for a multinational French company.

Tell me more
Ruby/Cucumber QA/Test engineering
Advanced English
1000 – 2000 USD

1 Senior QA/Test Engineer in an Offshore Development Center team. You will work directly with a Danish Project Manager at our Vietnam office. The initial project is for a multinational French company.

Tell me more