一. 路由
- 嵌入在app.module.ts
- 创建路由:
- 在src/app/app.module.ts中引入RouterModule:import { RouterModule } from '@angular/router';
- 定义和配置路由数组,我们暂时只为login来定义路由,仍然在src/app/app.module.ts中的imports中
- 使用路由:
- 把<router-outlet></router-outlet>写在src\app\app.component.html的末尾
- 注意:如果一个路径同时匹配多个路径配置的规则的话,以第一个规则为准
- 创建路由:
- 创建单独文件定义
- 创建路由:
- 新建文件“app.routes.ts”
- 组成:
- export const routes: Routes=[]; //路由数组
- export const routing = RouterModule.forRoot(routes); //定义路由
- 在app.modules.ts中的imports数组中引入routing
- 创建路由:
- 在页面上点击链接跳转到对应路由的模块
- "<a routerLink="/todo/ALL">All</a>"
- 通过路由传递参数:
- 在路由定义的时候写成
- 接受参数(编辑xxxComponent.ts)
- 在构造中注入ActivatedRoute和Router。
- 然后在ngOnInit()中添加下面的代码,一般的逻辑代码如果需要在ngOnInit()中调用。
- 在构造中注入ActivatedRoute和Router。
- 在路由定义的时候写成
- 模块懒加载:
- 创建父子路由,子路由导入父路由的module中,设置forChild(routes)
- 在xxx.module.ts中导入路由模块
- 在根路由中导入上面的模块路由,并设置loadChildren:
- 创建父子路由,子路由导入父路由的module中,设置forChild(routes)
- 路由守卫:
- 分类:
- CanActivate来处理导航到某路由的情况。
- CanActivateChild处理导航到子路由的情况。
- CanDeactivate来处理从当前路由离开的情况。
- Resolve在路由激活之前获取路由数据。
- CanLoad来处理异步导航到某特性模块的情况。
- 检查顺序:从最深的子路由下往上检查守护条件。然后按照从上到下的顺序检查CanActivate守卫。
- 步骤:
- 在路由定义中添加对应的方法(如CanActivate)
- 创建路由守卫的service,实现对应的方法(如CanActivate)
- 构造器中注入路由
- 对应方法(如CanActivate)的具体实现,返回一个boolean类型值
- 在路由定义中添加对应的方法(如CanActivate)
- 分类:
二. 建立模拟web服务(内存服务)和异步操作
- 首先我们需要安装angular-in-memory-web-api,输入npm install --save angular-in-memory-web-api"
- 创建xxx-data.ts
- 建立InMemoryTodoDbService类,实现 InMemoryDbService的内存数据库
- 然后在app.modules.ts中的imports数组中加上 InMemoryWebApiModule.forRoot(InMemoryTodoDbService),。
- 在xxxService中调用假服务
- 定义api_url:“private api_url = 'api/todos';”
- 设置请求头:“private headers = new Headers({'Content-Type': 'application/json'});”
- 在constructor中注入http:“constructor(private http: Http) { }”
- 编写链式函数
- .post(this.api_url, JSON.stringify(tod), {headers: this.headers}):
- 构造一个POST类型的HTTP请求,返回一个Observable可观察对象
- RESTful的其他分类:( 如果url是api/todos)
- 查询所有待办事项:以GET方法访问api/todos
- 查询单个待办事项:以GET方法访问api/todos/id,比如id是1,那么访问api/todos/1
- 更新某个待办事项:以PUT方法访问api/todos/id
- 删除某个待办事项:以DELETE方法访问api/todos/id
- 增加一个待办事项:以POST方法访问api/todos
- .toPromise()使返回值返回一个Promise。Promise提供异步的处理
- .then后面的=>是lambda表达式,相当于匿名函数,res是参数,后面是函数体
- .post(this.api_url, JSON.stringify(tod), {headers: this.headers}):
- 更改xxxComponent的add方法
- this.todos = [...this.todos, todo] 相当于todos.push(todo)。但是push是新建立一个数组
- 弊端:
- 无法封装子模块
三. 建立模拟web服务(json-server)
- 创建服务
- 使用npm install -g json-server安装json-server。
- 在xxx目录下建立xxx-data.json
- 实例:
- 其他同上但是更改url和链式函数
- 更改url
- 更改链式函数then中的 res.json().data替换成res.json()。
- 开启json服务:命令行输入“ json-server ./src/app/todo/todo-data.json”