和我們在javaee中的順序完全一致，我們在此的順序仍然是配置路由，建立C層，建立V層。 # 手動創建 ## 配置路由 app/scripts/app.js 我們先刪除冗余的about路由，并保存首頁與默認路由.同時增加teacher路由。 ``` ... // 路由配置 .config(function($routeProvider) { $routeProvider // action = /, 控制器 = MainCtrl, 控制器別名 = main, V層模板 = views/main.html .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl', controllerAs: 'main' }) .when('/teacher/', { templateUrl: 'views/teacher/index.html', controller: 'TeacherIndexCtrl', controllerAs: 'teacherIndex' }) // 默認路由：如果以上條件都不符合，則跳轉至'/'路由 .otherwise({ redirectTo: '/' }); }); ``` ## 建立C層 app/scripts/controllers/teacher/index.js ``` 'use strict'; /** * 教師管理，列表 */ angular.module('webAppApp') .controller('TeacherIndexCtrl', function () { console.log('success'); }); ``` ## 引用C層JS文件 建立完C層，如果想使其生效，還需要在index.html過行引用。當然了，由于about這個控制器，我們已經不需要了，所以此時還需要把引入about控制器的JS代碼刪除掉. app/index.html ``` <!-- build:js({.tmp,app}) scripts/scripts.js --> <script src="scripts/app.js"></script> <script src="scripts/controllers/main.js"></script> <script src="scripts/controllers/teacher/index.js"></script> <!-- endbuild --> ``` ## 建立V層 app/views/teacher/index.html ``` <table class="table"> <tr> <th>序號</th> <th>姓名</th> <th>用戶名</th> <th>性別</th> <th>郵箱</th> </tr> <tr> <td>1</td> <td>張三</td> <td>zhangsan</td> <td>男</td> <td>zhangsan@yunzhiclub.com</td> </tr> <tr> <td>2</td> <td>李四</td> <td>lisi</td> <td>女</td> <td>lisi@yunzhiclub.com</td> </tr> </table> ``` ## 修改首頁菜單 app/index.html ``` <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#!/">夢云智</a> </div> <div class="collapse navbar-collapse" id="js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#!/a">首頁</a></li> <li><a ng-href="#!/teacher/">教師管理</a></li> </ul> </div> </div> ``` ## 測試 [http://localhost:9000/#!/teacher/](http://localhost:9000/#!/teacher/)  # 自動創建 我們大概每新建一個C層，都需要經歷以上的幾步，那么grunt是不是可以為我們自動處理的。很遺憾，grunt也想這樣做，但卻被yoman捷足先登了。 我們來看看使用yoman是如何完成上述工作的。我們先恢復以上幾個文件。 然后我們打開shell（以后我們說到shell時，對window平臺而言，均指gitshell），并進入WebApp文件夾。然后輸入： `$ yo angular:route teacher/index --uri=teacher/` > 此時，我們盡量不要關閉正在運行grunt serve的shell, 而是重新打開一個新shell. 回車確認后，讓我們看看發生了什么: 1. 自動在app/scripts/app.js中添加了路由. 2. 自動創建了app/scripts/controllers/teacher/index.js，并寫好了示例代碼。 3. 自動創建了app/views/teacher/index.html，并寫好了示例代碼。 4. 自動修改了app/index.html，并為我們添加了引用的代碼 我們現在需要做的，僅僅是修改app/views/teacher/index.html，然后加入我們想要的示例代碼就OK了。 最后，我們去修改app/index.html關于導航部分的代碼。 再點擊導航中的教師管理，我們同樣得到了相同的結果。但效率卻得到了大幅提升。 > 官網：[https://github.com/yeoman/generator-angular#route](https://github.com/yeoman/generator-angular#route)