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操作，辅助路由，路由复用等
网友评论