Angular基础入门---ui-Router

Angular有一套官方提供的ng-Route，但是并不是很好用,于是有人开发了一套ui-Router。

1. 服务$stateProvider定义了一个路由表
2. 服务$stateParams保存了地址栏中的参数
3. 服务$state完成路由匹配。$state主要的属性和方法：
   ——–current:保存了当前state中的配置项
   ——–params
   ——–get(name,context)
   ——–go(to,params,options)
   ——–reload()

主要事件：

$routeChangeStart
$routeChangeSuccess
$routeChangeError

说明

1. Angular基础入门系列文章一共6篇，主要是为了github上“course-angular”仓库的一个说明性的小文章。
2. 随着Vue、React的逐渐流行开来，Angular也发布了第二版，Angular1.x版使用开始减少，但是有时可能会遇到一些Angular1.x的一些问题，另外前端技术发展太快，技术一段时间不使用，就可能遗忘，这个小系列文章和github上的course-angular也是为了日后回头看看Angular相关基础之用。

Angular基础入门

1. Angular基础入门–数据绑定和指令
2. Angular基础入门—过滤器
3. Angular基础入门—作用域和通信
4. Angular基础入门—ng-Route
5. Angular基础入门—ui-Router
6. Angular基础入门—自定义指令（组件）

以下每个实例的公共的util工具类
common.util.js

module.exports = {
  render: function(str){
    var body = document.querySelector('body');
    body.innerHTML = str + body.innerHTML;
  }
}

使用

demo14.js

var demoTpl = require('../tpls/demo17.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);

//1.在模块中注入依赖
var myApp = angular.module('myApp', ['ui.router']);

//2.配置默认跳转路径
myApp.config(function($urlRouterProvider){
  $urlRouterProvider.otherwise('/home');
});

//3.配置路径大小写敏感
myApp.config(function($urlMatcherFactoryProvider){
  $urlMatcherFactoryProvider.caseInsensitive(false);
});

//4.定义路由表
// $stateProvider.state第二个参数配置项
//  url
//  controller
//  controllerAs
//  template
//  templateUrl
//  data    可以通过$state传递给其他路由，也是一个object，这对指令系统通信很有帮助
myApp.config(['$stateProvider', function($stateProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: '/src/scripts/tpls/ui-router/home.html',
      controller: 'homeController',
      controllerAs: 'homeCtrl',
      data: {
        customData: 'home自定义数据'
      }
    })
    .state('course', {
      url: '/course',
      templateUrl: '/src/scripts/tpls/ui-router/courses.html',
      controller: 'courseController',
      controllerAs: 'courseCtrl',
      data: {
        customData: 'course自定义数据'
      }
    })

    .state('employeeParent', {
      url: '/employee',
      templateUrl: '/src/scripts/tpls/ui-router/employeeParent.html',
      controller: 'employeeParentController'
    })
    .state('employeeParent.employee', {
      url: '/',
      templateUrl: '/src/scripts/tpls/ui-router/employees.html',
      controller: 'employeeController',
      controllerAs: 'employeeCtrl',
      resolve: {
        employeelist: function($http) {
          return $http.get('/mock/employee.json').then(function(res){
            return res.data.data;
          });
        }
      }
    })
    .state('employeeParent.employeeDetail', {
      url: '/:id',
      templateUrl: '/src/scripts/tpls/ui-router/employeedetail.html',
      controller: 'employeeDetailController'
    })

    .state('employeeSearch', {
      url: '/employeeSearch/:keywords',
      templateUrl: '/src/scripts/tpls/ui-router/employeeSearch.html',
      controller: 'employeeSearchController'
    })
}]);

myApp.controller('homeController', ['$scope', '$rootScope', '$state', function($scope, $rootScope, $state){
  $scope.message = 'home page';
  $scope.customData2 = $state.get('course').data.customData;
  $scope.customData1 = $state.current.data.customData;
}]);

myApp.controller('courseController', ['$scope', '$rootScope', function($scope, $rootScope){
  var vm  = this;
  vm.courses = ['html5', 'java', 'android', 'iOS'];
  $rootScope.color = 'red';
}]);

myApp.controller('employeeController', ['$scope', '$http', '$state', '$rootScope', 'employeelist', function($scope, $http, $state, $rootScope, employeelist){
  var vm  = this;

  vm.keywords = "";
  vm.search = function() {
    if (vm.keywords) {
      console.log($state);
      $state.go('employeeSearch', {
        keywords: vm.keywords
      })
      // $location.url('/employeeSearch/' + vm.keywords);
    }
  };

  vm.reload = function() {
    $state.reload();
  };

  vm.employees = employeelist;
}]);

myApp.controller('employeeDetailController', ['$scope', '$stateParams', '$http', function($scope, $stateParams, $http){
  $http({
    url: '/mock/employeedetail.json',
    params: {
      id: $stateParams.id
    },
    method: 'get'
  })
  .then(function(res){
    $scope.employee = res.data.data[0];
  })
}]);

myApp.controller('employeeSearchController', ['$scope', '$stateParams', function($scope, $stateParams){
  $scope.keywords = $stateParams.keywords;
}]);

myApp.controller('employeeParentController', function($scope){
  ;
});

demo14.string

<table border="1">
  <tr>
    <td colspan="2">header</td>
  </tr>
  <tr>
    <td class="leftMenu">
      <a ui-sref="home">home</a>
      <a ui-sref="course">course</a>
      <a ui-sref="employeeParent.employee">employee</a>
    </td>
    <td class="mainContent">
      <ui-view></ui-view>
    </td>
  </tr>
  <tr>
    <td colspan="2" class="footer">footer</td>
  </tr>
</table>