前提条件
1 已安装node
2 已安装angular脚手架:
npm install -g @angular/cli
npm install --save-dev @angular/cli@latest
注意,当npm install时,本地安装的angular/cli版本和全局安装的angular/cli版本可能不一致,此时需要卸载后重新安装相同的版本。
npm uninstall -g @angular/cli
npm install -g @angular/cli@1.6.0
开始
1 生成项目
生成项目(推荐放在非中文目录下—桌面)
ng new my_project --routing
运行项目
npm run start
2 创建文件夹和组件
创建文件夹 ng new 组件目录
创建组件 ng g component 组件名
3 创建路由规则
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{
path: 'heroes',
component: HeroListComponent,
data: { title: 'Heroes List' }
},
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
注意:Vue中,一级路由前面要加/,当时angular不能加/
4 创建服务模块
ng g service shared/Customer
5 angular语法
1 循环遍历 *ngFor=‘ ’
2 双向绑定 [(ngModel)]=’ ’
注意:我们使用ngModel,就必须在app.module.ts中,导入我们FormsModule,并且在import中引入
3 点击事件 (click)=‘事件名()’
4 单向绑定变量 [ ]=’ ’
6 导航传参
1 编程式导航
this.router.navigateByUrl('/task-manage')
this.router.navigate(["/task-info/",0])
2 声明式导航:
注意:此处path开头必须有/,否则报错
如何传递多个参数?
[routerLink]="['/code/edit', i.id]" [queryParams]="{ id : i.id, code: i.code }"
如何获取多个参数?
this.route.params.subscribe(params => {
console.log(params)
})
this.route.queryParams.subscribe(params => {
console.log(params.id,params.code)
})