Use of Angular--Module

Angular is a 构建client application using html and typescript  平台与框架.
It implements core functions and optional functions as a set of TypeScript libraries, and you can import them into your application.

1. Module

  1. The basic building block of Angular applications is NgModulethat it provides a context for compilation of components.
  2. Angular applications are defined by a set of NgModules. NgModule can associate its components with a set of related code (such as services) to form a functional unit.
  3. An Angular application has at least one startup 根模块(root module). The root module is usually named AppModuleand located in a file called app.module.ts. There will be many特性模块(feature module)
  1. NgModule is a class defined by @NgModule () decorator.
  2. NgModules are used to configure the injector and the compiler, and help you organize those related things together.
  3. @NgModule()The decorator is a function, the parameter is a metadata object, and the attributes of the metadata object are used to describe the module. The most important attributes are as follows:
  • declarations(Declarable object table) ——The components , instructions and pipes belonging to this NgModule .
  • exports(Export table) -the subset of declarations used in component templates for other modules .
  • imports(Import table)-other modules, the components declared in this NgModule need to use their export classes.
  • providers —— The creator of those services that this module contributes to the global service. These services can be used by any part of this application. (You can also specify a service provider at the component level, which is usually the preferred method.)
  • bootstrap —— The main view of the application, called the root component . It is the host of all other views in the application. Only root module should only set this bootstrapproperty.
  1. @NgModuleThe parameter of is a metadata object that describes how to compile the template of the component and how to create an injector at runtime. It will be marked own components of the module, and an instruction pipeline (Declarations), by exportsattribute part of the disclosure, the use of external components to them. NgModuleYou can also add some service providers to the application's dependency injector (provider).

2. Common modules NgModules

 
Module Import it from Why you use it
BrowserModule @angular/platform-browser When you want to run the app in the browser
CommonModule @angular/common When you want to use NgIf and NgFor
FormsModule @angular/forms When building template-driven forms
ReactiveFormsModule @angular/forms When building responsive forms
RouterModule @angular/router When you want to use the routing function and you want to use RouterLink, forRoot () and .forChild ()
HttpClientModule @angular/common/http When talking to the server

BrowserModule Imported CommonModule, it has contributed many common instructions, such as and . Further, re-derived , so that all of its instructions in any introduced can be used in the module. For applications running in the browser, it must be in the root module import , because it provides some of the necessary service up and running when the browser application. S provider is for the entire application, so it can only be used in the root module, not the feature module. Only feature modules of common commands, they do not need to reinstall all of the whole application level services. ngIfngForBrowserModuleCommonModuleBrowserModule
AppModuleBrowserModuleBrowserModuleCommonModule

 

Guess you like

Origin www.cnblogs.com/le220/p/12720607.html