您好,欢迎访问一九零五行业门户网

浅析Angular中什么是ngModule

什么是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的详细内容。
其它类似信息

推荐信息