每周总结 2月22日

ngRoute与ui.router

由于放假之前看得视频教程，这次回来有点记不清楚了，就又重新跟着做了一下，结果发现了一个以前没注意到的问题。

遇到的问题：

这个main页面本来应该有一个table的，但是无论我怎么改，都是什么都没有，下面控制台也不报错，也不知道该怎么找。

解决

后来问了组长，组长说是我V层的ng-view应该改成ui-view

这是因为我在配置路由的文件app.js中改用了ui.router，而ng-view适用的是ngRoute,所以不显示了。

'use strict';

/**
 * @ngdoc overview
 * @name webappApp
 * @description
 * # webappApp
 *
 * Main module of the application.
 */
angular
  .module('webappApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.router'
  ])
  .config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
    // main页面的路由
    .state({
      name:'main',
      url:'/main',
      controller:'MainCtrl',
      templateUrl:'views/main.html'
    })
    // main/add页面
    .state({
      name:'mainAdd',
      url:'/main/add',
      templateUrl:'views/main/add.html'
    })
    // about页面
    .state({
      name:'about',
      url:'/about',
      controller:'AboutCtrl',
      templateUrl:'views/about.html'
    });
    // 如果没有，则跳转到/main
     $urlRouterProvider.otherwise('/main');
  });

延伸

之后组长又给我讲了一下ui.router和ngRoute的区别，说是ui.router可以嵌套，而另一个不行。
当时听完了比较迷糊，ng开头的我知道是angular，但是不明白ui开头的是从哪来的，然后就查了差。

实验

之后，又做了一个实验测试一下这两个用嵌套有什么区别。
首先是ngRoute
在main里面再嵌套一个，然后网页就卡死了。

<table class="table">
  <tr>
    <th>序号</th>
    <th>用户名</th>
    <th>姓名</th>
    <th>邮箱</th>
    <th>性别</th>
  </tr>
  <tr ng-repeat="value in lists">
    <td>{{value.id}}</td>
    <td>{{value.username}}</td>
    <td>{{value.name}}</td>
    <td>{{value.email}}</td>
    <td>{{value.sex}}</td>
  </tr>
</table>
<div ng-view></div>

然后是ui.router

就没出现卡死的情况。

总结

ui.router比ngRoute的功能要强大。
看教学视频和文档不一样的地方就在于不能分心，有时候喝一杯水的时间就会漏掉很多东西，然后在报错的时候再回去找就很浪费时间。
教学视频也有好的地方，整个流程会比较清晰。