什么叫ngModule?本文给大家带来简易了解一下angular词法,介绍一下Angular里的ngModule,希望能帮助到大家!
做为Angular10实例教程,在我的观点中,angular相比VUE,它模块化设计做的更好,那样使代码结构看起来更清楚。因此这节,我们将要简单介绍下angular词法,对ngModule的认知。【有关实例教程强烈推荐:《angular教程》】
最先,什么叫angular module(ngModule)?
我的观点:本身就是被@NgModule所点缀的普通类,没什么特别的。
问题来了,哪些也是@NgModule呢?
来看一下src/app/app.module.ts里默认设置编码:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// @NgModule(数据库)
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { } // 控制模块名AppModule
@NgModule 获得一个元数据对象,他会告知 Angular 怎样编译程序和运行本运用。(数据库不仅上边这些配置项,但是我们先说这个好多个)
declarations数组
这个英语单词本身的意思是“公示、宣布”,在这儿是本模块依赖项。包含控制模块可能依靠的一些部件、命令和管路。引进标准:
- 需要使用她们,就必须要先引进。 \
- 一个部件、命令或管路很容易被一个控制模块引进(申明)
- 在declarations里的部件默认设置只有在目前模块中应用,若想要别的控制模块应用,务必exports出来
imports数组
imports数组只出现在@NgModule装饰器中,一个控制模块需要正常运转,除开自身的依赖项(declarations),还会必须别的控制模块导出来的依赖项。 但凡是angular module,都能够导进imports数组里,例如自定的控制模块(如:AppRoutingModule),第三方或是ng内置的(@angular/**)都能够
providers数组
给予一系列服务项目
bootstrap二维数组
二维数组中的每个部件,都做为部件树的根(根部件),引入在启动的过程当中,会把这其中的部件逐一分析并插入到浏览器DOM中。
可是一般来说,里边可能只有一个AppComponent。
那angular部件也是怎样呢?
首先看app部件,src/app/app.component.ts
的默认设置编码:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {// 部件名AppComponent
title = 'hero';
}
能够得知,或是正常操作:引进–>配备–>导出来
selector:
说白了,是个选择符,一个可以通过原生态JS挑中选择符罢了(必录配备)。
templateUrl:
Angular 部件模板文件的 URL。假如带来了它,就别再用 template
来提供内联模版了(templateUrl
和template
选择项二选一,必录配备)。
styleUrls:
这也不难看出,便是引进一个或多个款式途径的配备(可选择配备)
假如部件非常简单,我们还可以无须独立抽出来网页页面及款式,@Component的配置项可以直接使用内联方式:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`,
styles: [`h1 { color: red }`]
})
export class AppComponent { // 部件名AppComponent
title = 'Tour of Heroes';
myHero = 'Windstorm';
}
到这里,大家其实简单说了下默认这一App模块,对于里边的app-routing.module.ts这一文档,我们后边碰见了再讲。
angular运用总体构思是这样的的:
举例子,如果一个angular运用是一个企业,那样AppModule就是这样的企业。AppComponent就是这样的企业的一个工厂,企业可以有好多个加工厂。declearation二维数组里边元素便是构成工厂的一部分,例如生产线、人员管理系统等。imports数组就好像加工厂找来的外籍球员,专业能力比较厉害。providers数组就好像后勤人员,提供服务项目。
大量程序编写基本知识,请访问:编程学习!!
以上就是关于浅谈Angular中什么叫ngModule的具体内容,大量欢迎关注AdminJS其他类似文章!