Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Angular 8 Module

Angular 8 Module

It is a collection of services, directives, controllers, filters, and configuration information. angular.module is used to configure the $injector. The module is a container of the different parts of an application. Controllers always belong to a module. In case of developing a website, the header, footer, left, center, and the right section become part of a module.

Angular Mode

In Angular, a module is a technique to group the components, directives, pipes, and services which are related, in such a way that is combined with other modules to create an application.

Another way to understand Angular modules is classes. In class, we can define public or private methods. The general purposes are the API that other parts of our code can use to interact with it while the individual techniques are implemented details which are hidden.

In the same way, a module export or hide components, directives, pipes, and services. The exported elements are used by other modules, while that are not export in the module and cannot be accessed by other modules of our application.

Angular Module Root

Creating a Module

A module is created by using the Angular function angular.module

Creating Angular module

Use of Module

We have to use the decorator NgModule to define modules.

import {NgModule} from ‘@angular/core’;
 @NgModule({
 Import:[…],
 declarations:[…],
 bootstrap:[…]
 }]
 export class AppModule{} 

In the above example, we turned the class AppModule into an Angular module by using the NgModule decorator. The NgModule decorator needs at least three properties:

  • Imports
  • declarations
  • bootstrap

The property imports expect an array of modules. Where we define the piece of the puzzle. 

The property declaration expects an array of components, directives, and pipes that are the part of the module. 

Angular js Component

The bootstrap property is when we define the root component of the module. However, this property is also an array, 99% of the time, and we are going to explain only one element.

  • Note: There are particular circumstances where more than one component is required to bootstrap a module, but we are not covering those edge cases.

Example:

app/app.component.ts file

import { Component }from ‘@angular/core';
 @Component ({
 selector:'app-root',
 template:
 '<h1>my angular app</h1>'
 }) 

app/app.module.ts file

import { Ngmodule } from ‘@angular/core’;
 import {BrowserModule } from ‘@angular/platform-browser’;
 import {AppComponent} from ‘./app.component’;
 @NgModule({
 imports:[BrowserModule],
 declarations: [AppComponent],
 bootstrap:[AppComponent]
 })
 export class AppModule {} 

app.component.ts is a "hello world” component, nothing is interesting there. In the other hand, the structure that we've seen before for defining a module but in the case, we are defining the modules and components that we are about to using.

The first thing is that we notice our module is importing the BrowserModule like an explicit dependency. The BrowserModule is a built-in module which exports basic pipes, directives, and services. Apart from previous versions of Angular, we have to precisely import those dependencies to use directives like *ngFor or *ngIf in our templates.

The root component of our module is the AppComponent where we have to list it into the bootstrap array.  Because in the declaration property we have supposed to define all elements or pipes that make our application reactive, we have to set the AppComponent again.

Before moving on, there's a necessary clarification to make.

There are two types of modules:

  • Root modules
  • Features modules

We have one root component and many possible secondary components in any application, and only have one root module and zero or more feature modules. To understand bootstrap, we need to know the root module.

Bootstrapping an application in Angular 8

Bootstrapping refers to the starting of a self-dependent process that is supposed to process without external input. To bootstrap our module based application, we need to inform Angular, which is our root module to perform the compilation in the browser. This compilation in the browser is known as "Just in Time" (JIT) compilation process.

main.ts file

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule); 

It is possible to perform the compilation like a build step to our workflow. This method is called "Ahead of Time" (AOT) compilation and will require a slightly different bootstrap process.

NgModule metadata

NgModule is defined through a class decorated with the help of  @NgModule(). The @NgModule() decorator is a function which extracts a single metadata object, whose properties describe the module. The most important features are given below.

  • Declarations: The componentsdirectives, and pipes belong to the  NgModule.
  • Exports: The subset of declarations should be visible and usable into the component templates of other NgModules.
  • Imports: Component templates need the other modules whose exported classes are declared in the NgModule.
  • Providers: Creators of services that NgModule contributes to the global collection of services; they become accessible in all parts of the app. (we can also specify providers at the component, which is selected). 
  • Bootstrap: The main application view, also called the root component, which hosts all the app views. Only the root NgModulewill set the bootstrap property.

src /app/app.module.ts file

import { NgModule } from '@angular/core';
import { BrowserModule }from '@angular/platform-browser';
@NgModule ({
imports:[BrowserModule ],
providers:[Logger ], 
declarations:[ AppComponent ],
exports:[ AppComponent ],
 bootstrap:[ AppComponent ]
})
 export class AppModule{ }  

 App Component is included in the exports list for illustration; it is not necessary in the example. A root NgModule has no any reason to export anything from file because the other modules does'nt import the root NgModule.

NgModules and Components

NgModules provide a compilation context for its components. A root NgModule has a root component which is created during the bootstrap working, but NgModule can include only the additional components. Which load through the router or created by the template.

A component and its template simultaneously define a view. A part contains a view hierarchy, which allows us to represent the complex aimless area of the screen that can be created, modified, and destroyed as a unit. A view hierarchy can define in components which belong to different NgModules.

NgModules and Components

 When we create a component, it is connected directly with a single view, called the host view. The host view is the root of a view hierarchy, which contains embedded views, which are, in turn, the host view of other components. Those components can in the same NgModule and be imported from other NgModules. Views in the tree can nested to any depth.

  • Note: The hierarchical structure of views is a key factor in the way Angular detects and responds to change in the DOM and app data.

NgModules and JavaScript modules

The Ngmodule system is different from the JavaScript module system for managing collections of JavaScript objects. These are complementary module systems that we can use together to write our app.

In JavaScript, every file is a module and object defined in the file belong to that module. The module. The module declares some objects by marking them with the export keyword. Other JavaScript module use import statement to access public objects from other modules.

import { NgModule }     from '@angular/core';
import { AppComponent } from './app.component';
export class AppModule { } 

Difference between Module and Component

Module Component
A module is a collection of components, services, pipes, directives, and so on. A component in Angular is a building block of the application with an associated template view.
The angular apps will contain many modules, each dedicated to a single purpose. Each component can use another component, which is declared in the same module. To use components declared to other modules, they need to export from this module.
Denoted by @ngModule Denoted by @component



ADVERTISEMENT
ADVERTISEMENT