angular10完全解读,angular10 新功能
本文告诉你angular10中的模块，介绍模块组成、ngModule属性、常用模块、angualr模块和js模块的区别、模块的惰性加载。让我们一起来看看它们。
模块概述
NgModule模块是Angular的一个重要点，因为Angular的基本积木就是NgModule。NgModule会将相关代码(组件、指令、服务)收集到一些功能集中，形成功能单元。可以说，该模块为组件、指令和服务提供了编译后的上下文。【相关教程推荐：《angular教程》】
当使用Angular CL命令创建一个新项目时，会为我们生成一个名为AppModule的根模块。根模块有一个根组件AppComponent，应用程序可以通过引导这个根模块来启动。角度应用是模块化的。在开发中，我们会根据其功能和特点构建大大小小的各种模块，从而将其构建成一个应用程序，任何模块都可以包含任意数量的其他组件。
模块构成（基础，掌握）
angular module是一个带有@ngModule () decorator的类，它接受元数据对象。此对象的属性用于描述模块。
声明：声明组件、指令、管道导入：引入依赖项导出：导出模块提供者：服务注册引导：从 @ angular/platform-browser 指定主机组件导入{ browser module }；
//从主模块导入NgModule(模块装饰器或模块注释)
从“@angular/core”导入{ ng module }；
//引入组件，因为模块为组件提供了编译后的上下文。
从“”导入{ AppComponent }。/app . component ；
//介绍路由模块
从“”导入{ AppRoutingModule }。/app-routing . module ；
//Decorator将元数据声明为json
@NgModule({
//组装模块的组件和管道
声明：[ AppComponent ]，
//模块依赖关系
导入：[浏览器模块，批准模块]，
//子模块可以输入导出的模块。
进口：[]，
//模块提供的服务
提供商：[]，
//指定宿主组件，它只出现在根模块中
引导：[AppComponent]
})
类appmodule {}:
ngModule 属性解释(理解)
。输入@NgModule () decorator的类。我们可以看到它有以下属性以及官方对其属性的解释。
导出声明接口NgModule {
提供商？提供程序[]；//此模块贡献给全局服务的那些服务的创建者。这个应用程序的任何部分都可以使用这些服务。(您还可以在组件级别指定服务提供者，这通常是首选方式。)
申报？ArrayTypeany any[]；//属于这个NgModule的那些组件、指令和管道
进口？ArrayTypeany ModuleWithProviders { } any[]；//导出该模块中组件模板所需的类的其他模块。
出口？ArrayTypeany any[]；//可以在其他模块的组件模板中使用的可声明对象的子集
入口组件？ArrayTypeany any[]；
自举？ArrayTypeany any[]；
图式？arrayschemayetadata any[]；
}
属性的详细解释
providers:提前在这里定义注入到本模块组件中的所有服务，否则在本模块中使用该服务时会有错误提示。
declaration:声明是指英文的声明。在这里，声明一些组件、指令、管道等。在某些模块中使用。
imports:导入一些模块。比如我把所有的指令做成一个模块。当我使用其中一些时，我可以选择导入整个指令模块。您还可以导入通过npm install安装的一些模块，并在使用它们之前导入它们。
exports:导出组件或指令管道等。以便引用此模块的模块可以使用此模块的组件或指令管道等。
exporyComponents: EntryComponent表示角度的入口组件。可引导组件是一个门户组件，Angular会在引导过程中将它加载到DOM中。其他入口组件在其他时间动态加载。字面意思，但是什么时候可以用？例如，如果我想弹出一个组件，那么这个组件将被动态加载到DOM中。这个时候我需要写这个组件xxxComponent。
bootstrap:该模块启动时应该启动的组件。上面的代码显示AppModule是作为根模块的启动组件。
schemas:不属于Angular的组件或指令的元素或属性需要在此声明。
常用模块（基础，掌握）
NgModule导入使用Browser module @ Angular/Platform-Browser当您要在浏览器中运行应用程序时，CommonModule@angular/common当您要使用NgIf和NgFor时，FormsModule@angular/Forms当您要构建模板驱动的表单(它包含ng模型)时，ReactiveFormModule @ Angular/Forms当您要构建响应式表单时，RouterModule@angular/router需要使用路由功能，您需要使用RouterLink。http client Module @ angular/common/http当你想和服务器通话时
如何创建一个模块（基础，掌握）（未完待续）
ng生成模块模块名//创建一个模块
通用模块名称//缩写
通用订单//创建订单模块
通用订单流程//创建一个订单模块，流程为
angualr模块和js模块有什么区别？（了解）
js模块（ES6 中的模块）
该模块的功能主要由两个命令组成：导出和导入。export命令用于指定模块的外部接口，import命令用于输入其他模块提供的功能。
一般来说，模块是一个独立的文件，文件内部的所有变量都无法从外部获取。如果您希望外部能够读取模块内部的变量，您必须使用export关键字来输出变量。
//profile.js
export var firstName= Michael
export var lastName= Jackson
出口var年份=1958；
//优先写下面
var firstName= Michael
var lastName= Jackson
var年份=1958年；
export {firstName，lastName，year}export命令不仅可以导出变量，还可以导出函数和类。
函数a () {.}
函数b () {.}
导出{
一，
ASB _//通过as关键字重命名外部接口
}使用export命令定义模块的外部接口后，其他js文件可以通过import命令加载模块。
//main.js
从导入{名字，姓氏，年份}。/profile . js ；
函数集名称(元素){
element . text content=first name last name；
}import命令接受一对花括号，花括号指定要从其他模块导入的变量名。花括号中的变量名必须与导入模块的外部接口名(profile.js)相同。
我们也可以重命名加载的模块。
从导入{ lastName as surname }。/profile . js ；除了指定加载输出值之外，还可以使用全局加载，即使用星号(*)指定加载所有输出值的对象。
//圈子. js
导出功能区(半径){
回归数学。PI *半径*半径；
}
导出功能周长(半径){
返回2 *数学。PI *半径；
}
//使用
从导入*作为圆。/circle ；
console . log( circle area: circle . area(4))；
console . log( circle circumference: circle . circle reference(14))这里有一点需要注意。模块作为一个整体加载的对象(上面例子中的圆)应该是静态分析的，所以不允许在运行时改变。不允许使用以下书写方法。
从导入*作为圆。/circle ；
//不允许以下两行
circle.foo= hello
circle . area=function(){ }；angualr模块
文章开头介绍了Anger模块(Anger模块概述和Anger模块组成)
NgModule 类 与 JavaScript 模块有下列关键性的不同：
NgModule只绑定到可声明的类，这些类只由Angular编译器使用。与JavaScript类不同，NgModule将其所有成员类放在一个巨型文件中，只需在其@NgModule.declarations列表中列出该模块的类即可。NgModule只能导出可声明的类。它可能是自己拥有的，也可能是从其他模块导入的。它不声明或导出任何其他类型的类。与JavaScript模块不同，NgModule可以通过在@NgModule.providers列表中添加服务提供者来扩展整个应用程序。相比之下，我们可以看到NgModule模块更加灵活，可扩展性和优势。
模块懒加载
如果我们将所有模块导入到根模块中，那么应用程序在最初加载时会非常慢。这时候我们就要考虑使用懒加载了。根据需求加载相应的模块，减少应用初始化包的大小和加载时间，提高用户体验。
惰性模块以此模块拥有路由模块为特征。因此，我们在上面创建了一个订单模块，并将路由添加到订单模块中。然后在user.module模块下创建一个user.module和一个list组件.
通用用户路由//创建用户模块
G c用户/列表-跳过-测试//在用户模块中创建一个组件列表
创建order和user两个模块，list一个组件
！-订单模块订单模块-
从“@angular/core”导入{ ng module }；
从“@angular/common”导入{ common module }；//为一些结构指令提供支持
从“”导入{ OrderRoutingModule }。/order-routing . module ；//模块有自己的路由。
从“”导入{ ListComponent }。/list/list . component ；//引入列表组件
@NgModule({
声明：[ListComponent]，
进口：[
CommonModule
OrderRoutingModule
]
})
导出类别订单模块{ }配置子路由
！- order-routing.module对应于订单模块的路由模块-
从“@angular/core”导入{ ng module }；
从“@angular/router”导入{ Routes，router module }；
从“”导入{ ListComponent }。/list/list . component ；
Const routes: Routes=[//子路由的组件配置
{
路径：“列表”，
组件：列表组件
},
];
@NgModule({
imports:[router module . for child(routes)]，
导出：[RouterModule]
})
导出类orderroutingmodule {用户模块}等等。
配置总路由（重点，掌握）
！-批准模块根路由模块-
从“@angular/core”导入{ ng module }；
从“@angular/router”导入{ Routes，router module }；
Const routes: Routes=[//根路由的配置
{
路径：“订单”，
Loadchildren:“”。/order/order . module # order module //配置订单子模块
},
{
路径：“用户”，
Loadchildren:“”。/user/user . module # user module //配置用户子模块
}
];
@NgModule({
导入：[RouterModule.forRoot(routes)]，
导出：[RouterModule]
})
我们给app.component.html添加了两个按钮。
！-下面的内容只是占位符，可以替换。-
div style=text-align:center
氘
欢迎使用{{ title }}！
/h2
/div
按钮routerlink=/user/list 用户/按钮//路由跳转
按钮路由器Link=/order/listorder/button
路由器出口/路由器出口惰性加载模块有什么好处呢？
大项目往往模块很多，而且很大。如果一个模块是1m，我们在浏览器里输入地址打开这个应用的话，瞬间加载100m是非常慢的，也不用用这100个模块。
将系统业务拆分为各个模块，划分好界限。按需加载，我点击用户加载用户模块，页面出现用户列表对用户进行操作。只有在我需要用的时候，极大的减少了页面初始加载的时间以及减少了资源的消耗。
模块共享
共享模块，顾名思义，在所有模块之间共享。首先定义这个模块的具体功能特征，比如指令、流水线、组件等。并将它们打包成模块。哪些业务模块需要使用它们的功能，可以导入到它们的模块中。
这是一个巨大的规范了系统的统一性和降低了以后的维护成本。
如果引入第三方UI，不要把UI导入共享模块再导出，这样你的共享模块会越来越大。别人UI框架设计的初衷是按需加载。你把UI组件放到共享模块里，加载那些不相关的UI组件，会浪费很多性能。
有关编程的更多信息，请访问：编程视频！以上是了解angular10模块相关概念，快速上手！更多详情请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。