一、基础配置

1.脚手架 cli

$ npm install -g @angular/cli

$ ng new PROJECT-NAME

2.添加UI框架 ng add ng-zorro-ant

3.开发指令 ng generate，建议安装vscode插件

4.打包 Package.json

angular.json

Env

二：开发配置

1.模块(module)，路由(router)，组件(components)，UI组件库(nz)的关系

2.路由(module) hash模式app-routing.module.ts

 @NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: true })],
    exports: [RouterModule]
    })

懒加载使用方式

{ path: '', loadChildren: () => import('./layout/layout.module').then(m => m.LayoutModule) },

路由守卫

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree,Router } from '@angular/router';
import { Observable } from 'rxjs';
import { UserService } from '../pages/user/user.service';

@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private userService: UserService,private router:Router) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
if (this.userService.userInfo && this.userService.userInfo.access_token) {
return true;
} else {
return this.router.parseUrl('/login')
}
}
}

在layout中加入校验

import { AuthGuard } from '../auth/auth.guard';//路由导航守卫
const routes: Routes = [
{
path: '', component: LayoutComponent,canActivate: [AuthGuard], children: [
{ path: 'dashboard', component:DashboardComponent,data: {breadcrumb: '首页'}},
{
path: 'product', loadChildren: () => import('../pages/product/product.module').then(m => m.ProductModule),
data: { breadcrumb: '商品' }
},
{
path: 'order', loadChildren: () => import('../pages/order/order.module').then(m => m.OrderModule),
data: { breadcrumb: '订单' }
}
]
}
];

3.Service

在app/base.service.ts中封装一层http，添加公共header头和接口错误处理 (tips:post请求的then回调会默认执行callback,需在业务中判断resp返回值if(resp){//do something})暂不清楚原因

4.公共组件

app/lib/下存放公共组件，在app/common-module中申报(declarations)并导出(exports)

5.公共filter(pipe管道)

App/common-pipe下存放自定义公共管道，使用时在模块(module)中引用

Angular初体验

一、基础配置

二：开发配置