1.官方文档
2.NG-ZORRO
3.环境搭建：安装好node.js和npm，并安装好angular/cli

npm install -g @angular/cli 

一、搭建项目框架

1.创建项目

ng new project-name —routing //创建项目
ng g m pages/path-name —routing//创建带路由的组件
ng g c pages/layout/path-name //创建模块

2.目录结构和文件结构
（1）目录结构

（2）创建文件模块参考

• app/layout：布局模块
• app/service: 服务模块
• app/model: 数据模块
• app/component: 组件模块
• app/route:路由模块

ng g c pages/component//创建模块
ng g m pages/module-name//创建组件
ng g m pages/module-name --routing //创建带路由的组件

（3）模块.module.ts

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModuel({//装饰器
    declarations: [AppComponent],   // 用到的组件，指令，管道
    providers: [],      // 依赖注入服务 
    imports: [],        // 导入需要的模块
    exports: [AppRoutingModule],        // 导出的模块，跨模块交流
    entryComponents: [] // 需提前编译好的模块
    bootstrap: []       // 设置根组件,应用的主视图
})

export class AppModule { }//导出模块供其它页面引入。

(4)组件.component.ts

/*这里是从Angular核心模块里面引入了component装饰器*/
import {Component} from '@angular/core';

/*用装饰器定义了一个组件以及组件的元数据  所有的组件都必须使用这个装饰器来注解*/
@Component({
  /*组件元数据  Angular会通过这里面的属性来渲染组件并执行逻辑
  * selector就是css选择器，表示这个组件可以通过app-root来调用，index.html中有个<app-root>Loading...</app-root>标签，这个标签用来展示该组件的内容
  *templateUrl  组件的模板，定义了组件的布局和内容
  *styleUrls   该模板引用那个css样式
  * */
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
/*AppComponent本来就是一个普通的typescript类，但是上面的组件元数据装饰器告诉Angular，AppComponent是一个组件，需要把一些元数据附加到这个类上，Angular就会把AppComponent当组件来处理*/
export class AppComponent {
  /*这个类实际上就是该组件的控制器，我们的业务逻辑就是在这个类中编写*/
}

3.路由配置

//app-routing.module.ts配置路由
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
//引入组件
import { HomeMenuLayoutComponent } from './pages/layout/home-menu-layout/home-menu-layout.component';
//配置路由
const routes: Routes = [
  {
    path:'',
    component:HomeMenuLayoutComponent,
    children:[{
      path:'home',
      loadChildren:'./pages/home-menu/home-menu.module#HomeMenuModule'
    }]
  }
];

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

4.安装ng-zorro并导入组件

//安装ng-zorro
npm install ng-zorro-antd --save

//app.module.ts

//NgZorroAntd配置
import { NgZorroAntdModule , NZ_I18N, zh_CN} from 'ng-zorro-antd';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
/** 配置 angular i18n **/
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NgZorroAntdModule,
    HttpClientModule,
    BrowserAnimationsModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5.通过“复制生成代码指令”导入ng-zorro的布局模块，并实现页面加载

ng g ng-zorro-antd:layout-top-side-2 <name>

//routerLink 跳转页面指定页面
<a [routerLink]="'/home/user'">
    <span>用户管理</span>
</a>
//路由模块替换
<router-outlet></router-outlet>

6.同理，创建子模块，配置路由并实现部分代码

ng g m pages/home-menu/user-layout //创建module

配置路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserLayoutComponent } from './user-layout/user-layout.component';
const routes: Routes = [{
    path:'user',
    component:UserLayoutComponent
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeMenuRoutingModule { }

页面布局实现

<!-- user-layout.html -->
<nz-table #editRowTable nzBordered>
    <thead>
        <tr>
            <th>昵称</th>
            <th>电话</th>
            <th>…</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>1369234xxxx</td>
            <td>…</td>
        </tr>
    </tbody>
</nz-table>

7.运行

ng serve

8.运行效果

效果展示

从0开始搭建项目认识angular的结构，把体验新事物当做一种生活娱乐