和我們在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)
- README
- 第一章:準備
- 第二章:Hello World!
- 第一節:查看工程文件
- 第二節:JDK、JRE與環境變量
- 第三節:index.jsp
- 第三章:Hello Struts
- 第一節:Web.xml
- 第二節:單入口
- 第三節:Hello Struts
- 第四節:觸發C層
- 第四章:建立數據表
- 第一節:建立實體類
- 第二節:測試一
- 第三節:測試二
- 第四節:引入Hibernate
- 第五節:配置Hibernate
- 第六節:建立連接
- 第七節:實體類映射數據表
- 第八節:完善數據表
- 第五章:教師管理
- 第一節:增加數據--add
- 第二節:增加數據--save
- 1 獲取傳入數據數據
- 2 數據寫入測試
- 3 對接C層
- 第三節:數據列表
- 1 獲取數據
- 2 重構代碼
- 3 C層對接--初始化
- 4 C層添加數據
- 5 V層顯示數據
- 6 獲取數據庫中數據
- 7 顯示性別
- 8 分頁
- 9 條件查詢
- 第四節:修改數據
- 1 edit
- 2 update
- 第五節:刪除數據
- 第六節:總結
- 第六章:重構C層
- 第一節:繼承ActionSupport類
- 第二節:數據驗證
- 第七章:前臺分離(前臺)
- 第一節:環境搭建
- 第二節:運行環境
- 第三節:共享開發環境
- 第四節:生產環境
- 第八章:前臺開發(前臺)
- 第一節:本地化
- 第二節:教師列表
- 1 引入M層
- 2 模擬后臺返回數據
- 3 C與M對接
- 4 C與V對接
- 第九章:前后臺對接(前后臺)
- 第一節:后臺輸出json(后臺)
- 第二節:對接前臺(全棧)
- 第二節:對接API(前臺)
- 第二節:跨域請求(后臺)
- 第三節:重構代碼(前臺)
- 第十章:重構后臺M層
- 第一節:數據訪問DAO層
- 第二節:項目整體重構
- 第十一章:用戶登陸(前后臺)
- 第一節:制定規范
- 第二節:定制測試用例
- 第三節:后臺輸入測試代碼(后臺)
- 第四節:postman(后臺)
- 第五節:新建用戶登陸模塊(前臺)
- 第六節:代碼重構(前臺)
- 第十二章:班級管理(前后臺)
- 第一節:班級列表
- 1 原型開發
- 2 制定規范
- 3 后臺對接開發
- 4 前臺對接開發
- 第二節:Add
- 1 原型開發
- 2 制定規范
- 3 后臺對接開發
- 4 前臺對接開發
- 第三節:Save
- 1 制定規范
- 2 后臺對接開發
- 3 前臺對接開發
- 第四節:Edit
- 1 原型開發
- 2 制定規范
- 3 后臺對接開發
- 4 前臺對接開發
- 第五節:Update
- 1 制定規范
- 2 后臺對接開發
- 3 前臺對接開發
- 第六節:Delete
- 1 制定規范
- 2 后臺對接開發
- 3 前臺對接開發
- 第七節:小結
- 第十三章:班級管理(API)
- 第一節:ER圖
- 第二節:create
- 1 實體層
- 2 dao層
- 3 service(server)層
- 4 action層
- 第三節:ManyToOne
- 第四節:Read
- 1 service(server)層
- 2 action層
- 第五節:update
- 1 service(server)層
- 2 action層
- 第六節:update
- 第十四章:重構服務層