在開發原型前，我們先在課程列表中，增加一個添加按鈕。 views/klass/index.html ``` <div class="row"> <div class="col-md-12 text-right"> <a class="btn btn-default" ng-href="#!/klass/add">添加</a> </div> </div> <input type="text" ng-model="name" /> ... ``` # 新建路由 ``` panjiedeMacBook-Pro:WebApp panjie$ yo angular:route klass/add invoke angular:controller:/usr/local/lib/node_modules/generator-angular/route/index.js create app/scripts/controllers/klass/add.js create test/spec/controllers/klass/add.js invoke angular:view:/usr/local/lib/node_modules/generator-angular/route/index.js create app/views/klass/add.html ``` ## V層 ``` <div class="row"> <div class="col-md-12"> <form ng-submit="submit()"> <label>名稱: <input type="text" ng-model="name"> </label> <label>輔導員: <select ng-model="teacher"> <option ng-repeat="teacher in teachers" ng-value="teacher.id">{{teacher.name}}</option> </select> <button type="submit">submit</button> </form> </div> </div> <div class="debug" ng-show="isDebug"> {{name}} <br /> {{teachers}} <br /> {{teacher}} </div> ``` ## C層 ``` 'use strict'; /** * @ngdoc function * @name webAppApp.controller:KlassAddCtrl * @description * # KlassAddCtrl * Controller of the webAppApp */ angular.module('webAppApp') .controller('KlassAddCtrl', function($scope, config) { $scope.name = ''; // 名稱 // 教師列表 $scope.teachers = [{id:1, name:'張三'}, {id:2, name:'李四'}]; // 選中的教師 $scope.teacher = $scope.teachers[0].id; $scope.isDebug = config.isDebug; var submit = function() { console.log('submit'); }; $scope.submit = submit; }); ``` 不難看出，我們需要獲取教師列表這個信息。依據這個需求，我們定制開發規范。