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
- The basic building block of Angular applications is
NgModule
that it provides a context for compilation of components.- 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.
- An Angular application has at least one startup
根模块(root module)
. The root module is usually namedAppModule
and located in a file called app.module.ts. There will be many特性模块(feature module)
- NgModule is a class defined by @NgModule () decorator.
- NgModules are used to configure the injector and the compiler, and help you organize those related things together.
@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 thisbootstrap
property.
@NgModule
The 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), byexports
attribute part of the disclosure, the use of external components to them.NgModule
You 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
ImportedCommonModule
, 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.ngIf
ngFor
BrowserModule
CommonModule
BrowserModule
AppModule
BrowserModule
BrowserModule
CommonModule