Angular 10 Modules
Let's now learn abour Angular 10 modules by example.
Angular projects adhere to a modular and component-based architecture.
According to Wikipedia:
Modular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality.
How to Create Angular Modules
Angular makes it easy to create modules by providing *[NgModules**](https://angular.io/guide/ngmodules):*
A NgModule is a TypeScript class decorated with the @NgModule decorator which takes a few metadata that does the following:
- Declares which components, directives, and pipes belong to the module.
- Makes some of those components, directives, and pipes public so that other module's component templates can use them.
- Imports other modules with the components, directives, and pipes that components in the current module need.
- Provides services that the other application components can use.
Please note that Angular modules are not JavaScript modules.
Every Angular app has at least one module, conventionally called the root module. This is the module that gets bootstrapped for running the application.
Angular 10 Modules by Example
Head over to your Angular 10 project in the Stackblitz IDE. Open the src/app/app.module.ts
file, you should see the following code:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
At the top, we have some import statements. NgModule
belongs to the @angular/core
package.
After the imports, we configure the module by decorating the AppModule
class with @
[NgModule](https://angular.io/api/core/NgModule)
and stating what components and directives belong to it (In the declarations
array) as well as which other modules it uses (In the imports
array). For more information on the structure of an @
[NgModule](https://angular.io/api/core/NgModule)
, you can read Bootstrapping from the official Angular guide.
Conclusion
There is more that you should know about modules but let's leave that to after you build your first app.
Most Popular Posts
Anguar 12 New Features 10+ Best Anguar 9/10 Templates for Developers 3+ Ways to Add Bootstrap 4 to Angular 10/9 With Example & Tutorial Angular 11 CRUD REST API Angular 11 Tutorial with HttpClient Routing and Navigation with Angular 11 Router Full Vue 3 Tutorial by Example CSS Centering CSS Grid Layout Tutorial Adding Comments to JSON How to Delete Local/Remote Git Branches Webpack Tutorial for Angular Developers GraphQL Tutorial for Angular Developers Git and GitHub for Angular Developers Bootstrap 5 with Sass and Gulp 4 Tutorial by ExampleAngular Newsletter
Get our Angular book for free!