在开发原型前，我们先在课程列表中，增加一个添加按钮。 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; }); ``` 不难看出，我们需要获取教师列表这个信息。依据这个需求，我们定制开发规范。