찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Angular10 모듈과 관련된 개념을 이해하고 빠르게 시작해보세요!

Angular10 모듈과 관련된 개념을 이해하고 빠르게 시작해보세요!

青灯夜游
青灯夜游앞으로
2021-08-02 18:59:251752검색

이 글에서는 angular10의 모듈에 대해 소개하겠습니다. 모듈 구성, ​​ngModule 속성, 일반적으로 사용되는 모듈, angualr 모듈과 js 모듈의 차이점, 모듈의 지연 로딩에 대해 살펴보겠습니다. 함께.

Angular10 모듈과 관련된 개념을 이해하고 빠르게 시작해보세요!

모듈 개요

NgModule 모듈은 Angular의 기본 빌딩 블록이 NgModule이기 때문에 Angular에서 중요한 포인트입니다. NgModule은 관련 코드(구성 요소, 지침, 서비스)를 일부 기능 세트로 수집하여 기능 단위를 형성합니다. 모듈은 구성 요소, 지침 및 서비스에 대한 컴파일 컨텍스트를 제공한다고 말할 수 있습니다. [관련 튜토리얼 권장 사항: "angular tutorial"]

Angular CL 명령을 사용하여 새 프로젝트를 생성하면 루트 모듈에 AppModule이라는 루트 모듈이 생성됩니다. 루트 모듈 애플리케이션을 시작할 수 있습니다. Angular 애플리케이션은 모듈식입니다. 개발 중에 기능, 기능 및 특성에 따라 크고 작은 다양한 모듈을 구축하여 애플리케이션을 구축할 수 있습니다.

모듈 구성(기본, 마스터리)

angular 모듈은 @ngModule() 데코레이터가 있는 클래스이며, 데코레이터 @ngModule은 메타데이터 개체를 허용합니다. 이 개체의 속성은 모듈을 설명하는 데 사용됩니다.

  • 선언: 구성 요소, 지시문, 파이프라인 선언
  • imports: 종속성 소개
  • exports: 모듈 내보내기
  • providers: 서비스 등록
  • bootstrap: 호스트 구성 요소 지정 
import { BrowserModule } from '@angular/platform-browser';
//从主模块中引入NgModule(模块装饰器或模块注解)
import { NgModule } from '@angular/core';
//引入组件，因为模块为组件提供编译的上下文环境
import { AppComponent } from './app.component';
// 引入路由模块
import { AppRoutingModule } from './app-routing.module';

//装饰器以json的形式声明元数据
@NgModule({
   //组合模块的组件和管道
  declarations: [ AppComponent ],
  //模块依赖项
  imports: [ BrowserModule,AppRoutingModule ],
  //子模块可以输入导出的模块
  imports: [],
  //模块提供的服务
  providers: [],
  //指定宿主组件，只在根模块中出现
  bootstrap: [AppComponent]
})
export class AppModule { }

ngModule 속성 설명(이해)

@NgModule() 데코레이터 클래스를 클릭하면 다음과 같은 속성과 해당 속성에 대한 공식적인 설명이 있음을 확인할 수 있습니다. 

export declare interface NgModule {
    providers?: Provider[];// 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）
    declarations?: Array<Type<any> | any[]>;// 那些属于本 NgModule 的组件、指令、管道
    imports?: Array<Type<any> | ModuleWithProviders<{}> | any[]>;// 那些导出了本模块中的组件模板所需的类的其它模块
    exports?: Array<Type<any> | any[]>;//那些能在其它模块的组件模板中使用的可声明对象的子集
    entryComponents?: Array<Type<any> | any[]>;
    bootstrap?: Array<Type<any> | any[]>;
    schemas?: Array<SchemaMetadata | any[]>;
}

속성에 대한 자세한 설명

providers: 이 모듈의 구성 요소에 삽입된 모든 서비스를 미리 정의하십시오. 그렇지 않으면 이 모듈에서 해당 서비스를 사용할 때 오류 메시지가 발생합니다.

declaration: 선언은 영어로 선언을 의미합니다. 여기에서 일부 모듈에서 사용할 일부 구성 요소, 지침, 파이프 등을 선언합니다.

imports: 일부 모듈을 가져옵니다. 예를 들어 모든 지침을 하나의 모듈로 결합한 경우 일부 지침을 사용할 때 전체 지침 모듈을 가져오도록 선택할 수 있습니다. npm install을 통해 설치된 일부 모듈을 사용하기 전에 가져올 수도 있습니다.

exports: 이 모듈을 참조하는 모듈이 이 모듈의 구성 요소 또는 명령 파이프라인을 사용할 수 있도록 구성 요소 또는 명령 파이프라인 등을 내보냅니다.

exporyComponents: 진입 구성요소는 각도의 진입 구성요소를 나타냅니다. 부팅 가능한 구성요소는 진입 구성요소이며 Angular는 부팅 프로세스 중에 이를 DOM에 로드합니다. 다른 항목 구성 요소는 다른 경우에 동적으로 로드됩니다. 문자 그대로의 의미입니다. 예를 들어 컴포넌트를 팝업하려면 이 컴포넌트를 DOM에 동적으로 로드해야 합니다. 이때 컴포넌트 xxxComponent를 작성해야 합니다.

bootstrap: 이 모듈이 시작될 때 시작되어야 하는 구성 요소입니다. 위 코드에서 AppModule이 루트 모듈의 시작 구성 요소임을 알 수 있습니다.

schemas: Angular 구성요소나 지시어에 속하지 않는 요소나 속성은 여기에서 선언해야 합니다.

자주 사용하는 모듈(기본, 마스터리)

formsmodule@angular/forms를 사용하려는 경우 템플릿 구동 양식 (ngmodel을 포함 함)을 구축하려는 경우 리액티브 폼을 구축하고 싶을 때라우팅 기능을 사용하려면 RouterLink, .forRoot() 및 .forChild() 서버와 통신하고 싶을 때
NgModule Import Use
BrowserModule @angular/platform-browser 앱을 실행하고 싶을 때 Browser
commonmodule@angular/common ngif 및 ngfor
ReactiveFormsModule @angular/forms
RouterModule @angular/router
HttpClientModule @angular/common/http

如何创建一个模块（基础，掌握）（未完待续）

ng generate module <module-name> //创建一个模块

ng g m <module-name> // 缩写

ng g m order // 创建订单模块

ng g m order --routing // 创建带路由订单模块

angualr模块和js模块有什么区别？（了解）

js模块（ES6 中的模块）

模块功能主要由两个命令构成：export和import，export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能

一般来说，一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取，如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量

// profile.js
export var firstName = &#39;Michael&#39;;
export var lastName = &#39;Jackson&#39;;
export var year = 1958;

// 优先考虑下面写法
var firstName = &#39;Michael&#39;;
var lastName = &#39;Jackson&#39;;
var year = 1958;

export {firstName，lastName, year}

export 命令除了可以导出变量，还可以导出函数和类（class）

function a () {...}
function b () {...}

export {
    a,
    b as b_ // 通过as关键字重命名对外接口
}

使用export命令定义了模块的对外接口后，其他js文件就可以通过import命令来加载这个模块了。

// main.js
import {firstName, lastName, year} from &#39;./profile.js&#39;;

function setName(element) {
  element.textContent = firstName + &#39; &#39; + lastName;
}

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同

我们也可以对加载的模块进行重命名

import { lastName as surname } from &#39;./profile.js&#39;;

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面

// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

// 使用
import * as circle from &#39;./circle&#39;;

console.log(&#39;圆面积：&#39; + circle.area(4));
console.log(&#39;圆周长：&#39; + circle.circumference(14))

这里有一个地方需要注意，模块整体加载所在的那个对象（上例是circle），应该是可以静态分析的，所以不允许运行时改变，下面的写法都是不允许的

import * as circle from &#39;./circle&#39;;

// 下面两行都是不允许的
circle.foo = &#39;hello&#39;;
circle.area = function () {};

angualr模块

angualr模块在文章开头有作介绍（angualr模块概述和angualr模块构成）

NgModule 类 与 JavaScript 模块有下列关键性的不同：

  • NgModule 只绑定了可声明的类，这些可声明的类只是供 Angular 编译器用的。
  • NgModule 与 JavaScript 类把它所有的成员类都放在一个巨型文件中不同，只要把该模块的类列在它的 @NgModule.declarations 列表中。
  • NgModule 只能导出可声明的类。这可能是它自己拥有的也可能是从其它模块中导入的。它不会声明或导出任何其它类型的类。
  • 与 JavaScript 模块不同，NgModule 可以通过把服务提供商加到 @NgModule.providers 列表中，来用服务扩展整个应用。

相比之下我们可以看出，NgModule模块更灵活，扩展性强，更具优势。

模块懒加载

如果我们将所有的模块都导入根模块，那么应用在初始化加载的时候就会非常慢。这时候我们应该考虑使用惰性加载。根据需求加载相应都模块，减少应用初始化包的大小以及减少加载的时间，提高用户体验性。

惰性加载的模块特点是该模块拥有路由模块。因此 接着上面我们创建了一个订单模块 我们给订单模块加上路由。并再创建一个user.module以及user.module模块下的list组件。

ng g m user --routing //创建user模块
ng g c user/list --skip-tests //在user模块里面创建组件list

创建order和user两个模块，list一个组件

<!--order.module 订单模块-->
import { NgModule } from &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;; //为一些结构性指令提供支持

import { OrderRoutingModule } from &#39;./order-routing.module&#39;; //模块具有自己的路由
import { ListComponent } from &#39;./list/list.component&#39;; //引入list组件

@NgModule({
  declarations: [ListComponent],
  imports: [
    CommonModule,
    OrderRoutingModule
  ]
})
export class OrderModule { }

配置子路由

<!--order-routing.module 订单模块对应的路由模块-->
import { NgModule } from &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;
import { ListComponent } from &#39;./list/list.component&#39;;


const routes: Routes = [ //子路由的组件配置
  {
    path: &#39;list&#39;,
    component: ListComponent
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class OrderRoutingModule { }

user模块如此类推

配置总路由（重点，掌握）

<!--AppRoutingModule 根路由模块-->
import { NgModule } from &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;

const routes: Routes = [ //根路由的配置
  {
    path: &#39;orders&#39;,
    loadChildren: &#39;./order/order.module#OrderModule&#39; // 配置订单子模块
  },
  {
    path: &#39;users&#39;,
    loadChildren: &#39;./user/user.module#UserModule&#39; // 配置用户子模块
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我们给app.component.html新增两个button

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h2>
    Welcome to {{ title }}!
  </h2>
</div>


<button routerLink="/user/list">user</button> //路由跳转
<button routerLink="/order/list">order</button> 

<router-outlet></router-outlet>

惰性加载模块有什么好处呢？

在大型项目中往往有许多个模块，而且大很大。如果一个模块1m，如果我们在浏览器输入地址打开这个应用，瞬间要加载100m 是非常慢的，而且我们并非要是用到着这100个模块。

将系统业务拆分为各个模块，划分好界限。按需加载，我点击了user 就加载user 模块，页面出现user 列表，对user进行操作。当我需要使用时才加载，极大的减少了页面初始加载的时间以及减少了资源的消耗。

模块共享

共享模块顾名思义，就是共享于所有的模块中。首先得定义好这个模块的具体功能特性，比如指令、管道和组件等分别封装成一个个模块，哪些业务模块需要使用到其里面的功能便导入其模块中便可。 这极大的规范了系统的统一性和降低了以后的维护成本。

如果你引入了第三方UI，就不要把UI引入共享模块中导出，这样你的共享模块越来越庞大。别人UI框架设计的初衷就是按需加载。你把UI组件放到共享模块，加载那些无关的的UI组件，会浪费掉大量的性能。

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 Angular10 모듈과 관련된 개념을 이해하고 빠르게 시작해보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：Node.js는 정말 단일 스레드인가요? 프로세스 간 통신 방법은 무엇입니까?다음 기사：Node.js는 정말 단일 스레드인가요? 프로세스 간 통신 방법은 무엇입니까?

관련 기사

더보기