angular安装与新建工程

• 安装nodejs，最新版本即可，略过
• 安装angular，当前版本8.2.2

安装最新版本

npm i @angular/cli

安装指定版本，x.x.x版本号

npm i @angular/cli@x.x.x

• 新建angular工程

ng new ant

工程名ant，会得到一个ant文件夹
运行该命令会询问是否单独生成路由文件，以及选择css预处理格式。路由文件看个人喜好，开发中可随意更改。css预处理样式建议使用less，方便使用ant

工程目录总览

• 安装依赖
  新建工程时会自动安装好依赖，如果网络不顺畅或者不够科学，安装出错的话，
  删除工程下node_modules文件夹重新安装，可用工具有：
  cnpm ：命令cnpm install
  yarn : 命令yarn
  两者的安装使用自行百度
• 依赖包版本控制 package.json
  package.json文件写明了需要的依赖文件和版本
  使用npm命令安装依赖包时 该文件会自动更新。源码上传分享等不包含node_modules(文件多，零散，太影响速度)，执行npm install命令时，安装的依赖包即由该文件控制，正常情况下最好不要手动修改package.json和package-loc.json文件
  package.json

• angular.json文件
  静态资源路径，引用的脚本，样式等可在这里添加，常用。

  
  angualr.json

引入ant样式

• ant版本7对应angular7，8对应angular8，注意大版本与angular保持一致。7，8部分组件使用方法有改变，不兼容，请注意
• ng add ng-zorro-antd命令，安装ant样式，期间会提示选择语言、模板等，使用键盘选择即可。安装完成会覆盖主页内容，所以尽早引入
• 也可自行构建，详情参见官网
  https://ng.ant.design/docs/getting-started/zh

主页搭建，简单路由

创建新的模块

ng g c home 创建home组件
ng g m home --routing 创建home模块，独立出路由文件
执行后生成src/app/home文件夹，如下图

home模块

在app.component.html文件中放入主路由底座

<router-outlet></router-outlet>

相当于占位符，具体显示内容由主路由决定

在app-routing.module.ts文件中添加新的路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  {
    path:'',loadChildren:()=>import('./home/home.module').then(m=>m.HomeModule)
  }
];

@NgModule({
  imports: [
RouterModule.forRoot(routes) //设置为主路由
],
  exports: [RouterModule]
})
export class AppRoutingModule { }

使用loadChildren属于懒加载，需要在home-routing.module.ts文件中再具体制定路由导航到哪个组件
home-routing.module.ts文件如下：

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {HomeComponent} from './home.component';


const routes: Routes = [
  {
    path: 'index', component: HomeComponent,
  },
  {
    path: '', redirectTo: 'index'
  }
];

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

将index路由导航到homecomponent，即可显示home.component.html的内容

<p>home works!</p>

使用IDE运行，或者ng serve命令运行项目，默认端口4200。访问localhost:4200会自动跳转到index，显示如下

浏览器运行图

绑定脚本变量

在home.component.ts中创建变量name

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {

  name='angular';
  list=[1,2,3,4];

  constructor() { }

  ngOnInit() {
  }

}

在home模块中引入ant

home模块是懒加载出来的，所以需要单独引入ant，在app模块中引入的在这不起作用
home.module.ts如下

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HomeRoutingModule } from './home-routing.module';
import {HomeComponent} from './home.component';
import {NgZorroAntdModule} from 'ng-zorro-antd';


@NgModule({
  declarations: [
    HomeComponent //模块懒加载，要在这里声明组件，而不是app模块中
  ],
  imports: [
    CommonModule,
    HomeRoutingModule, //引入home的独立路由文件
    NgZorroAntdModule, //引入ant design
  ]
})
export class HomeModule { }

在html页面使用脚本变量，添加样式

修改home.component.html文件

<!--直接绑定变量-->
<p>hello {{name}} !!</p>

<!--判断-->
<p *ngIf="name=='angular'">i m angular</p>
<p *ngIf="name!='angular'">i m not angular</p>

<!--循环-->
<p *ngFor="let a of list">
  {{a}}
</p>

<!--ant的button-->
<button nz-button [nzType]="'primary'">ant design button</button>

修改home.component.less文件，设置样式

p{
  text-align: center;
  color: #007700;
}

运行效果如图

浏览器效果图

自定义ant组件样式

• 在src路径下新建theme.less文件
• 在angular.json文件中添加该文件的引用

...
 "styles": [
             ...
              "src/theme.less"  //添加样式引入
            ],
...

• 在theme.less文件中修改预制样式

// -------- 引入官方提供的 less 样式入口文件 -----------
@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";

// -------- 自定义参数覆盖 -----------
@primary-color          : #f5222d;

• 最好重新打包运行一下，效果如下，样式生效

  
  浏览器效果图

😉下次更新DOM操作，辅助路由，路由复用等