一、今天完成的事：

1.查看angular基础知识；

2.理解angular中ngRoute的用法；

二、明天的计划：

1.继续任务6，用ngRoute实现页面跳转功能；

三、遇到的问题：

1.对angular理解较慢，需要多查看教程；

四、收获：

1、angular中ngRoute的用法；

作用：在不跳转页面的情况下，通过点击按钮实现不同页面的加载；

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：

http://runoob.com/#/firsthttp://runoob.com/#/secondhttp://runoob.com/#/third

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

引用步骤：

• 1、载入了实现路由的 js 文件：angular-route.js。

• 2、包含了 ngRoute 模块作为主应用模块的依赖模块。

  angular.module('routingDemoApp',['ngRoute'])

• 3、使用 ngView 指令。

  <div ng-view></div>

  该 div 内的 HTML 内容会根据路由的变化而变化。

• 4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

  module.config(['$routeProvider', function($routeProvider){
      $routeProvider        .when('/',{template:'这是首页页面'})
          .when('/computers',{template:'这是电脑分类页面'})
          .when('/printers',{template:'这是打印机页面'})
          .otherwise({redirectTo:'/'});}]);

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:

• 第一个参数是 URL 或者 URL 正则规则。
• 第二个参数是路由配置对象。

插入不同内容的方法：

• ‍‍template:‍‍

  如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：

  .when('/computers',{template:'这是电脑分类页面'})

• templateUrl:

  如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

  $routeProvider.when('/computers', {
      templateUrl: 'views/computers.html',});

  ‍‍以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。‍‍‍‍‍‍