angular基本知识学习笔记 - NgModule的基本概念

简介: angular基本知识学习笔记 - NgModule的基本概念

Angular NgModules differ from and complement JavaScript (ES2015) modules. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units.


Angular NgModules是对JavaScript ES2015 Module概念的补充。NgModules为一系列components定义了一个编译上下文, 这一系列components可能用于实现一个应用领域,一个工作流,或者一系列功能的集合。


Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.


每个Angular应用都包含一个root module,按照惯例命名为AppModule,提供了BootStrap机制,用于启动Application. 一个Angular应用可以包含很多functional modules.


Like JavaScript modules, NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules. For example, to use the router service in your app, you import the Router NgModule.


和JavaScript module一样,NgModule也能导入其他NgModule从而获得新的功能.


Component

Every Angular application has at least one component, the root component that connects a component hierarchy with the page document object model (DOM). Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment.


每个Angular应用至少包含一个Component,即Root Component. 每个Component定义了一个class,包含应用数据和逻辑,同时关联到一个HTML模板,定义了显示用的视图(view).


The @Component() decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata.


使用@Component()装饰器标识一个class,后面跟的就是一个Component, 提供模板和其他Component相关的元数据。看个例子:

image.png

Decorators是JavaScript function,可以修改JavaScript classes, 为classes增添更多的元数据,告诉框架这些class如何处理。


Decorators are functions that modify JavaScript classes. Angular defines a number of decorators that attach specific kinds of metadata to classes, so that the system knows what those classes mean and how they should work.



相关文章
|
5月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
8月前
|
存储 缓存 JavaScript
Angular Universal 学习笔记
Angular Universal 学习笔记
74 0
|
8月前
|
前端开发 JavaScript API
Angular Change Detection 的学习笔记
Angular Change Detection 的学习笔记
40 0
|
存储 缓存 JavaScript
Angular Universal 学习笔记
Angular Universal 学习笔记
119 0
Angular Universal 学习笔记
|
JavaScript
Angular Form (响应式Form) 学习笔记
Angular Form (响应式Form) 学习笔记
156 0
Angular Form (响应式Form) 学习笔记
|
JSON API 数据格式
Angular CLI builder 学习笔记
Angular CLI builder 学习笔记
104 0
Angular CLI builder 学习笔记
|
JavaScript 测试技术 API
Angular library 学习笔记
Angular library 学习笔记
177 0
Angular library 学习笔记
|
设计模式 JavaScript 前端开发
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
295 0
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
|
JavaScript 开发者
Angular 依赖注入学习笔记之工厂函数的用法
Angular 依赖注入学习笔记之工厂函数的用法
Angular 依赖注入学习笔记之工厂函数的用法