简易了解一下angular里的ngModule

lxf2023-03-12 09:01:02

什么叫ngModule?本文给大家带来简易了解一下angular词法,介绍一下Angular里的ngModule,希望能帮助到大家!

简易了解一下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来提供内联模版了(templateUrltemplate选择项二选一,必录配备)。

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其他类似文章!