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）目录结构
| 文件目录 | 说明 |
|---|---|
| e2e | end to end 端到端测试 |
| node_module | 安装的第三方模块 |
| src | 项目文件 |
| src/app | 存放组件 |
| src/assets | 存放静态资源 |
| src/environments | 存放环境的配置 |
| src/index.html | 加载的主页面 |
| main.js | 程序的启动入口 |
| src/polyfills.ts | 填充库，帮助实现标准化 |
| src/style.css | 全局样式配置文件 |
| src/tests | 单元测试启动入口 |
| karma.conf.js | karma单元测试配置文件 |
| package.json | npm配置文件 |
| tsconfig.app.json | Typescript编译器配置文件 |
| tsconfig.json | Typescript编译器配置文件 |
| tsconfig.spec.json | Typescript编译器配置文件 |
| tslint.json | 保持代码风格统一 |
（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中有个Loading... 标签，这个标签用来展示该组件的内容
*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
//routerLink 跳转页面指定页面
用户管理
//路由模块替换
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 { }
页面布局实现
昵称
电话
…
张三
1369234xxxx
…
7.运行
ng serve
8.运行效果
效果展示
从0开始搭建项目认识angular的结构，把体验新事物当做一种生活娱乐