其实模板中的例子中，我们就已经定义了名为"tempController"的控制器了。接下来，我们再详细介绍下AngularJs中的控制器。其实AngularJs中控制器的作用与Asp.net MVC中控制器的作用是一样的，都是模型和视图之间的桥梁。而AngularJs的模型对象就是$scope。所以AngularJs控制器知识$scope和视图之间的桥梁，它通过操作$scope对象来改变视图。下面代码演示了控制器的使用：
<!DOCTYPE html> <html ng-app="mainApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AngularJS 控制器演示</title> <script src="https://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"> </script> <script> (function() { // 创建模块 var mainApp = angular.module("mainApp", []); mainApp.controller("cntoController", ["$scope", function ($scope) { var defaultValue = "Learninghard 前端系列"; $scope.val = defaultValue; $scope.click = function () { $scope.val = defaultValue; }; }]); })() </script> </head> <body> <h2>AngularJS 控制器演示</h2> <div ng-controller="cntoController"> <div><textarea ng-model="val"></textarea></div> <div>{{val}}</div> <div><button ng-click="click()">重置</button></div> </div> </body> </html>
3.4 路由
之所以说AngularJs框架=MVC+MVVM，是因为AngularJs除了支持双向绑定外（即MVVM特点），还支持路由。在之前介绍的KnockoutJs实现的SPA中，其中路由借用了Asp.net MVC中路由机制。有了AngularJs之后，我们Web前端页面完全可以不用Asp.net MVC来做了，完全可以使用AngularJs框架来做。
单页Web应用由于没有后端URL资源定位的支持，需要自己实现URL资源定位。AngularJs使用浏览器URL"#"后的字符串来定位资源。路由机制并非在AngularJS核心文件内，你需要另外加入angular-route.min.js脚本。并且创建mainApp模块的时候需要添加对ngRoute的依赖。
下面让我们具体看看路由的例子来感受下AngularJs中路由的使用。具体的示例代码如下：
主页面 AngularJsRouteDemo.html
<!DOCTYPE html> <html ng-app="mainApp" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AngularJs路由演示</title> <script src="https://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script> <script src="https://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script> <script> (function() { // 设置当前模块依赖，“ngRoute”，用.NET的解就是给这个类库添加“ngRoute”引用 var mainApp = angular.module("mainApp", ['ngRoute']); mainApp.config(['$routeProvider', function($routeProvider) { // 路由配置 var route = $routeProvider; // 指定URL为“/” 控制器：“listController”，模板：“route-list.html” route.when('/list', { controller: 'listController', templateUrl: 'route-list.html' }); // 注意“/view/:id” 中的 “：id” 用于捕获参数ID route.when('/view/:id', { controller: 'viewController', templateUrl: 'route-view.html' }); // 跳转 route.when("https://www.jb51.net/", { redirectTo: '/list' }); route.otherwise({ redirectTo: '/list' }); }]); //创建一个提供数据的服务器 mainApp.factory("service", function() { var list = [ { id: 1, title: "博客园", url: "http://www.cnblogs.com" }, { id: 2, title: "知乎", url: "http://www.zhihu.com" }, { id: 3, title: "codeproject", url: "http://www.codeproject.com/" }, { id: 4, title: "stackoverflow", url: "http://www.stackoverflow.com/" } ]; return function(id) { //假如ID为无效值返回所有 if (!id) return list; var t = 0; //匹配返回的项目 angular.forEach(list, function(v, i) { if (v.id == id) t = i; }); return list[t]; } }); // 创建控制器 listController,注入提供数据服务 mainApp.controller("listController", ["$scope", "service", function($scope, service) { //获取所有数据 $scope.list = service(); }]); // 创建查看控制器 viewController, 注意应为需要获取URL ID参数 我们多设置了一个 依赖注入参数 “$routeParams” 通过它获取传入的 ID参数 mainApp.controller("viewController", ["$scope", "service", '$routeParams', function($scope, service, $routeParams) { $scope.model = service($routeParams.id || 0) || {}; }]); })() </script> </head> <body> <div><a href="#/list">列表</a></div> <br /> <div ng-view> </div> </body> </html>
列表页面 route-list.html
<ul ng-repeat="item in list"> <li><a href="#view/{{item.id}}">{{item.title}}</a></li> </ul>
详细页面 route-view.html