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

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

모듈 개요

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 중국어 웹사이트의 기타 관련 기사를 참조하세요! 본 웹사이트의 성명 본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요. 핫 AI 도구 Undresser.AI Undress 사실적인 누드 사진을 만들기 위한 AI 기반 앱 AI Clothes Remover 사진에서 옷을 제거하는 온라인 AI 도구입니다. Undress AI Tool 무료로 이미지를 벗다 Clothoff.io AI 옷 제거제 AI Hentai Generator AI Hentai를 무료로 생성하십시오. 더보기 인기 기사 R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈) 3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌 R.E.P.O. 최고의 그래픽 설정 3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌 어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션 2 몇 주 전 By DDD R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법 3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌 WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법 3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌 더보기 뜨거운 도구 메모장++7.3.1 사용하기 쉬운 무료 코드 편집기 SublimeText3 중국어 버전 중국어 버전, 사용하기 매우 쉽습니다. 스튜디오 13.0.1 보내기 강력한 PHP 통합 개발 환경 드림위버 CS6 시각적 웹 개발 도구 SublimeText3 Mac 버전 신 수준의 코드 편집 소프트웨어(SublimeText3) 더보기 뜨거운 주제 Gmail 이메일의 로그인 입구는 어디에 있나요? 7461 15 Cakephp 튜토리얼 1376 52 Steam의 계정 이름 형식은 무엇입니까? 77 11 Win11 활성화 키 영구 44 19 NYT 연결 힌트와 답변 17 17 더보기 Related knowledge WLAN 확장 모듈이 중지되었습니다. [수정] Feb 19, 2024 pm 02:18 PM Windows 컴퓨터의 WLAN 확장 모듈에 문제가 있는 경우 인터넷 연결이 끊어질 수 있습니다. 이러한 상황은 종종 좌절감을 주지만 다행히도 이 문서에서는 이 문제를 해결하고 무선 연결이 다시 제대로 작동하도록 하는 데 도움이 될 수 있는 몇 가지 간단한 제안 사항을 제공합니다. WLAN 확장성 모듈 복구가 중지되었습니다. Windows 컴퓨터에서 WLAN 확장성 모듈의 작동이 중지된 경우 다음 제안에 따라 문제를 해결하십시오. 네트워크 및 인터넷 문제 해결사를 실행하여 무선 네트워크 연결을 비활성화했다가 다시 활성화하십시오. WLAN 자동 구성 서비스 다시 시작 전원 옵션 수정 수정 고급 전원 설정 네트워크 어댑터 드라이버 재설치 일부 네트워크 명령 실행 이제 자세히 살펴보겠습니다. WLAN 확장성 모듈을 시작할 수 없습니다. Feb 19, 2024 pm 05:09 PM 이 문서에서는 무선 LAN 확장 모듈을 시작할 수 없음을 나타내는 이벤트 ID10000을 해결하는 방법을 자세히 설명합니다. 이 오류는 Windows 11/10 PC의 이벤트 로그에 나타날 수 있습니다. WLAN 확장성 모듈은 IHV(독립 하드웨어 공급업체) 및 ISV(독립 소프트웨어 공급업체)가 사용자에게 맞춤형 무선 네트워크 기능을 제공할 수 있도록 하는 Windows의 구성 요소입니다. Windows 기본 기능을 추가하여 기본 Windows 네트워크 구성 요소의 기능을 확장합니다. WLAN 확장성 모듈은 운영 체제가 네트워크 구성 요소를 로드할 때 초기화의 일부로 시작됩니다. 무선 LAN 확장 모듈에 문제가 발생하여 시작할 수 없는 경우 이벤트 뷰어 로그에 오류 메시지가 표시될 수 있습니다. Ubuntu 24.04에 Angular를 설치하는 방법 Mar 23, 2024 pm 12:20 PM Angular.js는 동적 애플리케이션을 만들기 위해 자유롭게 액세스할 수 있는 JavaScript 플랫폼입니다. HTML 구문을 템플릿 언어로 확장하여 애플리케이션의 다양한 측면을 빠르고 명확하게 표현할 수 있습니다. Angular.js는 코드를 작성, 업데이트 및 테스트하는 데 도움이 되는 다양한 도구를 제공합니다. 또한 라우팅 및 양식 관리와 같은 많은 기능을 제공합니다. 이 가이드에서는 Ubuntu24에 Angular를 설치하는 방법에 대해 설명합니다. 먼저 Node.js를 설치해야 합니다. Node.js는 서버 측에서 JavaScript 코드를 실행할 수 있게 해주는 ChromeV8 엔진 기반의 JavaScript 실행 환경입니다. Ub에 있으려면 각도에서 monaco-editor를 사용하는 방법에 대한 간략한 분석 Oct 17, 2022 pm 08:04 PM 각도에서 모나코 편집기를 사용하는 방법은 무엇입니까? 다음 글은 최근 비즈니스에서 사용되는 Monaco-Editor의 활용 사례를 기록한 글입니다. Angular의 서버 측 렌더링(SSR)을 탐색하는 기사 Dec 27, 2022 pm 07:24 PM 앵귤러 유니버셜(Angular Universal)을 아시나요? 웹사이트가 더 나은 SEO 지원을 제공하는 데 도움이 될 수 있습니다! Python에서 일반적으로 사용되는 표준 라이브러리 및 타사 라이브러리 2-sys 모듈 Apr 10, 2023 pm 02:56 PM 1. sys 모듈 소개 앞서 소개한 os 모듈은 주로 운영 체제용이지만, 이 글의 sys 모듈은 주로 Python 인터프리터용입니다. sys 모듈은 Python과 함께 제공되는 모듈입니다. Python 인터프리터와 상호 작용하기 위한 인터페이스입니다. sys 모듈은 Python 런타임 환경의 다양한 부분을 처리하기 위한 많은 함수와 변수를 제공합니다. 2. sys 모듈에서 일반적으로 사용되는 메서드 dir() 메서드를 통해 sys 모듈에 어떤 메서드가 포함되어 있는지 확인할 수 있습니다. import sys print(dir(sys))1.sys.argv-get 명령줄 매개변수 sys. argv는 프로그램 외부에서 명령을 구현하는 데 사용됩니다. 프로그램에 매개변수가 전달되고 명령줄 매개변수 열을 얻을 수 있습니다. 프론트엔드 개발에 PHP와 Angular를 사용하는 방법 May 11, 2023 pm 04:04 PM 인터넷의 급속한 발전과 함께 프론트엔드 개발 기술도 지속적으로 개선되고 반복되고 있습니다. PHP와 Angular는 프런트엔드 개발에 널리 사용되는 두 가지 기술입니다. PHP는 양식 처리, 동적 페이지 생성, 액세스 권한 관리와 같은 작업을 처리할 수 있는 서버측 스크립팅 언어입니다. Angular는 단일 페이지 애플리케이션을 개발하고 구성 요소화된 웹 애플리케이션을 구축하는 데 사용할 수 있는 JavaScript 프레임워크입니다. 이 기사에서는 프론트엔드 개발에 PHP와 Angular를 사용하는 방법과 이들을 결합하는 방법을 소개합니다. Angular 구성 요소 및 해당 표시 속성: 비블록 기본값 이해 Mar 15, 2024 pm 04:51 PM Angular 프레임워크의 구성 요소에 대한 기본 표시 동작은 블록 수준 요소에 대한 것이 아닙니다. 이 디자인 선택은 구성 요소 스타일의 캡슐화를 촉진하고 개발자가 각 구성 요소가 표시되는 방법을 의식적으로 정의하도록 장려합니다. CSS 속성 표시를 명시적으로 설정하면 Angular 구성 요소의 표시를 완전히 제어하여 원하는 레이아웃과 응답성을 얻을 수 있습니다. See all articles 공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！ 회사 소개 부인 성명 Sitemap © php.cn All rights reserved