Angular笔记

脚手架Angular-cli

命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ng new project-name - 创建一个新项目,置为默认设置
ng build - 构建/编译应用
ng test - 运行单元测试
ng e2e - 运行端到端(end-to-end)测试
ng serve - 启动一个小型web服务器,用于托管应用
ng deploy - 即开即用,部署到Github Pages或者Firebase
ng generate directive my-directive - 生成一个新指令
ng generate pipe my-pipe - 生成一个新管道
ng generate service my-service - 生成一个新服务
ng generate route my-route - 生成一个新路由
ng generate class my-class - 生成一个简易的模型类
ng generate component 组件名 --inline-template --inline-style
简写:ng g c 组件名 -it -is (取两个首字母) 创建组件
ng g s 服务名 创建服务
npm i --save angular2-uuid UUID包

Angular bootstrap

安装

1
npm install --save @ng-bootstrap/ng-bootstrap

导入
AppModule

1
2
3
4
5
6
7
8
9
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}

Other Module

1
2
3
4
5
6
7
8
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [OtherComponent, ...],
imports: [NgbModule, ...]
})
export class OtherModule {
}

SystemJS

1
2
3
map: {
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
}

笔记

路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { RouterModule } from '@angular/router';
imports: [
RouterModule.forRoot([
{
path: 'login',
component: LoginComponent
redirectTo:重定向
pathMatch:路径的字符匹配策略
children:子路由数组
}
])
],

内存服务器

1
npm install --save angular-in-memory-web-api