Ausführliche Erläuterung der Stammvorlagen und Attributvorlagen in Angular-js-Tutorial-php.cn

Ausführliche Erläuterung der Stammvorlagen und Attributvorlagen in Angular

青灯夜游

Freigeben： 2021-06-04 11:28:07

nach vorne

2009 Leute haben es durchsucht

本篇文章给大家介绍一下Angular10中的根模板和特性模板。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

Ausführliche Erläuterung der Stammvorlagen und Attributvorlagen in Angular

前提是安装了 Angular 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 &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;

import { ArticleRoutingModule } from &#39;./article-routing.module&#39;;
import { ArticleListComponent } from &#39;./article-list/article-list.component&#39;;
import { ArticleCreateComponent } from &#39;./article-create/article-create.component&#39;;


@NgModule({
  declarations: [ArticleListComponent, ArticleCreateComponent],
  imports: [
    CommonModule,
    ArticleRoutingModule
  ]
})
export class ArticleModule { }

Nach dem Login kopieren

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

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

import { NgModule } from &#39;@angular/core&#39;
import { Routes, RouterModule } from &#39;@angular/router&#39;

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

Nach dem Login kopieren

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

import { HttpClientModule } from &#39;@angular/common/http&#39;;
import { NgModule } from &#39;@angular/core&#39;;
import { FormsModule } from &#39;@angular/forms&#39;;
import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { AppRoutingModule } from &#39;./app-routing.module&#39;

import { AppComponent } from &#39;./app.component&#39;;
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Nach dem Login kopieren

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

import { NgModule } from &#39;@angular/core&#39;
import { Routes, RouterModule } from &#39;@angular/router&#39;
import { LoginComponent } from &#39;./login/login.component&#39;
const routes: Routes = [
    { path: &#39;login&#39;, component: LoginComponent },
    {
        path: &#39;article&#39;,
        loadChildren: () => import(&#39;./article/article.module&#39;).then((m) => m.ArticleModule)
    }
]

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

Nach dem Login kopieren

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

article/list
或者article/create

更多编程相关知识，请访问：编程教学！！

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Stammvorlagen und Attributvorlagen in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Ausführliche Erläuterung der Stammvorlagen und Attributvorlagen in Angular

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

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