Đặ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.
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
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.
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)
Copying built files to ASP.NET MVC root published folder. In cshtml file, we just load them as follow:
Would you like to work with the coolest IT guys in Vietnam? Apply to one of the following jobs:
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 moreWant 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 moreJob 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 moreWe 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.
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 more1 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