• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Advertise / Sponsor

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Tutorials
    • Angular
      • Angular 5
      • Angular 6
    • ASP.NET Core
    • Azure
    • React
    • Vue
  • Books
  • Courses
  • Cloud Hosting
  • Interview Questions
You are here: Home / Angular / What is module in Angular 5

What is module in Angular 5

May 23, 2018 by mebakar1005 Leave a Comment

In this tutorial, we will take a look at Module in Angular 5. Basically, a module is a container of different parts of an Angular application. Where you can group all the components, pipes, directives, and services that are related to the application.

Previous tutorials of Angular 5 Series

  • How to install Angular 5 Application.
  • What are components in Angular 5 application?

Module in Angular 5

Let’s see how a module works in Angular 5 Application.

When you create a new project using Angular CLI command, the one file is created by default with the name of Angular CLI.

Let’s understand the app.module.ts file code.

Go to folder structure => src folder => app folder => then open the “app.module.ts” file.

Line # 2: First-of-all, we need to import NgModule from @angular/core as you see in the above code.

Line # 6 to 15: this is the definition of NgModule. Or we can say it’s a structure of NgModule that starts with @NgModule. And this NgModule contains four parts.

  • Declaration part:

Whenever you create a new component in your application, then it will be imported first in this file above and then the reference will be included in this declaration part. As you see above code, now it has only one component reference like “AppComponent” which is by default component when you create a project using Angular CLI. If you will create a new component like “home”, then first it will be imported above and then the reference will be included in declaration part as you see in below code line # 5 and line # 10. So, it is an array of components.

  • Imports Part:
See also  How to Create an Angular 7 and Asp Net Core app using Visual Studio 2017

Whenever you need a module in your application like forms module, Browser Module, Animation Module and etc, then first of all you need to import that module and then reference of that module here in this “imports” part. So, this is the array of modules. As you see in the below code line # 4, 5 and Line # 17,18.  

  • Providers Part:

Whenever you create a service in your application, then you will add the reference of that service here in this “providers” part.

  • Bootstrap part:

This is the part where we will define the root component of our module to starting the execution.

What are Components in Angular 5
Data Binding in Angular 5

Related

Filed Under: Angular, Angular 5 Tagged With: ANGULAR, ANGULAR 5, ANGULAR 5 TUTORIAL, ANGULAR TUTORIAL, Module in Angular 5, MODULES IN ANGULAR

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Buy me a coffeeBuy me a coffee

Jobs

Dotnet Jobs

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

Recent Posts

  • 4 Explicaciones por qué Ella le dio El hombro frío
  • Overland Park: más grande suburbio de Kansas City es en realidad un romántico Destino lleno de Exterior Actividades, Comida excelentes y Cultura
  • Lasting Online Dating Sites: Techniques For Survival
  • Plank Portal Computer software
  • How to get the Best Info Room Services
  • Very best Antiviruses Designed for PC Game enthusiasts
Copyright © 2022