Angular의 루트 템플릿 및 속성 템플릿에 대한 자세한 설명-JS 튜토리얼-php.cn

이 글에서는Angular10의 루트 템플릿과 기능 템플릿을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular의 루트 템플릿 및 속성 템플릿에 대한 자세한 설명

다음 파일 생성의 대부분은cliAngular cli，以下的大部分文件创建都是依赖于cli提供的指令

`Angular`中的特性模板和根模板(`AppModule`)

区别在于特性模板可以把应用划分，个人理解类似于组件化

1、特性模板创建的指令ng g module article，这里使用的是ng g module article --routing，可以生成一个article-routing.module.ts路由文件。【相关教程推荐：《angular教程》】

2、此时CLI会在app文件夹下再创建一个文件夹article，article文件夹下包含两个文件article.module.ts和article-routing.module.ts

3、使用ng g component生成两个组件，指定模板为article，指定的模板会自动导入到article.modules.ts中，并且注册到declarations数组，注意：不要删除declarations中注册的组件，不然会导致组件中部分指定无法使用

ng g component 说明
ng g component article/article-list -m=article，在article文件夹下生成article-list文件夹组件
ng g component article/article-create -m=article，在article文件夹下生成article-create文件夹组件

4、article.module.ts在 CLI 生成的特性模块中，在文件顶部有两个 JavaScript 的导入语句：第一个导入了NgModule，它像根模块中一样让你能使用@NgModule装饰器；第二个导入了CommonModule，它提供了很多像ngIf和ngFor这样的常用指令。特性模块导入CommonModule，而不是BrowserModule，后者只应该在根模块中导入一次。CommonModule只包含常用指令的信息，比如ngIf和ngFor，它们在大多数模板中都要用到，而BrowserModule为浏览器所做的应用配置只会使用一次。

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ArticleRoutingModule } from './article-routing.module'; import { ArticleListComponent } from './article-list/article-list.component'; import { ArticleCreateComponent } from './article-create/article-create.component'; @NgModule({ declarations: [ArticleListComponent, ArticleCreateComponent], imports: [ CommonModule, ArticleRoutingModule ] }) export class ArticleModule { }

로그인 후 복사

5、article-routing.module.ts，路由地址嵌套配置，这里的地址设置是因为在app-routing.module根路由模块中已经设置了当前模块的路由前缀为article，因此下面的路由都只用直接设置即可，访问时带上根路由设置的路由前缀。

例如，根路由设置的是article，这里设置的是list，访问地址需要使用article/list

import { NgModule } from '@angular/core' import { Routes, RouterModule } from '@angular/router' import { ArticleListComponent } from './article-list/article-list.component' import { ArticleCreateComponent } from './article-create/article-create.component' const routes: Routes = [ { path: '', children: [ { path: '', pathMatch:'full', redirectTo: '/article/list' }, { path: 'list', component: ArticleListComponent }, { path: 'create', component: ArticleCreateComponent } ] } ] @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class ArticleRoutingModule {}

로그인 후 복사

6、根模块app.mudles.ts，导入app-routing.module文件，可以配置全局的路由

import { HttpClientModule } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module' import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpClientModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

로그인 후 복사

7、根模块的路由app-routing.module.tsloadChildren是使用了惰性加载特性模块默认情况下，NgModule都是急性加载的，也就是说它会在应用加载时尽快加载，所有模块都是如此，无论是否立即要用。对于带有很多路由的大型应用，考虑使用惰性加载 —— 一种按需加载NgModule的模式。惰性加载可以减小初始包的尺寸，从而减少加载时间。

import { NgModule } from '@angular/core' import { Routes, RouterModule } from '@angular/router' import { LoginComponent } from './login/login.component' const routes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'article', loadChildren: () => import('./article/article.module').then((m) => m.ArticleModule) } ] @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {}

로그인 후 복사

8、最后如果想要访问article下面的list和create路由在浏览器输入地址article/list

article/list
或者article/create에서 제공하는 지침에 따라 달라집니다. blockquote >

Angular

AppModule

1 및 기능 템플릿 생성ng g 모듈 문서와 유사한 지침을 이해합니다. 여기서는ng g 모듈 문서 --routing을 사용합니다.article-routing.module.ts라우팅 파일을 생성할 수 있습니다. [관련 튜토리얼 추천: "angular tutorial"]

2. 이때 CLI는 app아래에 또 다른 article폴더를 생성합니다. 폴더 코드>, article폴더에는 article.module.ts및 article-routing.module.ts라는 두 개의 파일이 포함되어 있습니다. code>ng g 구성 요소는 두 개의 구성 요소를 생성합니다. 지정된 템플릿은 article.modules.ts로 자동으로 가져오고 등록됩니다. 참고: 선언에 등록된 구성요소를 삭제하지 마세요. 그렇지 않으면 구성요소의 일부 사양을 사용할 수 없게 됩니다