Angular基础入门---ng-Route

发表于   |   分类于 ，   |     |   阅读次数

为了实现SPA开发，路由是不可避免的一个话题，Angular有一套官方提供的ng-Route，但是并不是很好用。

ng-Route通过hash值和history两种方式实现路由工程。

  1. 服务$routeProvider定义了一个路由表
  2. 服务$routeParams保存了地址栏中的参数
  3. 服务$route完成路由匹配
  4. 服务$location ，同window.location.

主要事件：

$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

1
2
3
4
5
6
module.exports = {
  render: function(str){
    var body = document.querySelector('body');
    body.innerHTML = str + body.innerHTML;
  }
}

使用

demo14.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
var demoTpl = require('../tpls/demo14.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);
//1.在模块中注入ngRoute
var myApp = angular.module('myApp', ['ngRoute']);
//2.定义$routeProvider
//$routeProvider对象有两个主要方法when()和oherwise()来定义路由
//还有一个常用属性caseInsensitiveMatch
myApp.config(['$routeProvider', function($routeProvider) {
  // 是否区分大小写
  $routeProvider.caseInsensitiveMatch = true;
  //when(path,route)
  //参数route对象的属性
  //    controller：当前模板上的controller
  //    controllerAs: controller的别名
  //    template: 当前路由的模板
  //    templateUrl: 当前路由的模板路径
  //    resolve: 指定当前controller依赖的模板
  //    redirectTo: 重定向
  $routeProvider
    .when('/home', {
      templateUrl: '/src/scripts/tpls/route/home.html',
      controller: 'homeController'
    })
    .when('/course', {
      templateUrl: '/src/scripts/tpls/route/courses.html',
      controller: 'courseController',
      controllerAs: 'courseCtrl'
    })
    .when('/employee', {
      templateUrl: '/src/scripts/tpls/route/employees.html',
      controller: 'employeeController',
      resolve: {
        employeelist: function($http, $q) {
          return $http.get('/mock/employee.json').then(function(res){
            return res.data.data;
          });
        }
      }
    })
    .when('/employee/:abc', {
      templateUrl: '/src/scripts/tpls/route/employeedetail.html',
      controller: 'employeeDetailController'
    })
    .when('/employeeSearch/:keywords', {
      templateUrl: '/src/scripts/tpls/route/employeeSearch.html',
      controller: 'employeeSearchController'
    })
    .otherwise({
      redirectTo: '/home'
    })
}]);
myApp.controller('homeController', ['$scope', '$rootScope', function($scope, $rootScope){
  $scope.message = 'home page';
  // $rootScope.$on('$routeChangeStart', function(event, next, cur){
  //   if (confirm('你真的要跳转到' + next.$$route.originalPath)) {
  //     ;
  //   } else {
  //     event.preventDefault();
  //   }
  // });
  //
  // $rootScope.$on('$routeChangeSuccess', function(event, next, cur){
  //   console.log(cur.$$route.originalPath);
  // });
  //
  // $rootScope.$on('$routeChangeError', function(event, next, cur){
  //   console.log(cur.$$route.originalPath);
  // });
}]);
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', '$route', '$rootScope', '$location', 'employeelist', function($scope, $http, $route, $rootScope, $location, employeelist){
  var vm  = $scope;
  vm.keywords = "";
  vm.search = function() {
    if (vm.keywords) {
      $location.url('/employeeSearch/' + vm.keywords);
    }
  };
  vm.reload = function() {
    $route.reload();
  };
  // $http({
  //   url: '/mock/employee.json'
  // })
  // .then(function(res){
  //   vm.employees = res.data.data;
  // }, function(){
  //   ;
  // })
  vm.employees = employeelist;
}]);
myApp.controller('employeeDetailController', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http){
  $http({
    url: '/mock/employeedetail.json',
    params: {
      id: $routeParams.abc
    },
    method: 'get'
  })
  .then(function(res){
    $scope.employee = res.data.data[0];
  })
}]);
myApp.controller('employeeSearchController', ['$scope', '$routeParams', function($scope, $routeParams){
  $scope.keywords = $routeParams.keywords;
}]);

demo14.string

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table border="1">
  <tr>
    <td colspan="2">header</td>
  </tr>
  <tr>
    <td class="leftMenu">
      <a href="#/home">home</a>
      <a href="#/course">course</a>
      <a href="#/employee">employee</a>
    </td>
    <td class="mainContent">
      <ng-view></ng-view>
    </td>
  </tr>
  <tr>
    <td colspan="2" class="footer">footer</td>
  </tr>
</table>

courser.html

1
2
3
4
5
<h1>Courses</h1>
<h3>{{color}}</h3>
<div ng-repeat="course in courseCtrl.courses">
	{{course}}
</div>

employeedetail.html

1
2
3
4
5
<h1>employee Detail</h1>
<div>
	{{employee.firstName}} {{employee.gender}}
</div>

employees.html

1
2
3
4
5
6
7
8
9
10
11
12
<h1>employees</h1>
搜索：<input ng-model="keywords" />
<button ng-click="search()">搜索</button>
<div ng-repeat="employee in employees">
	<a href="#/employee/{{employee.id}}">{{employee.firstName}}</a> {{employee.gender}}
</div>
<br />
<div><button ng-click="reload()">重新加载</button></div>

employeeSearch.html

1
2
3
4
5
<h1>employee Search</h1>
<div>
	{{keywords}}
</div>

home.html

1
2
3
4
5
<h1>Home</h1>
<h3>{{color}}</h3>
<div>
{{message}}
</div>

测试功能而已，你非要赏点我就没办法了...