后台的数据准备好后，现在可以进行后台开发了。 参考地址： [https://github.com/yeoman/generator-angular](https://github.com/yeoman/generator-angular) 使用gitbash进入app文件夹，并按以下提示执行: > 新建路由：yo angular:route login 系统将自动创建三个文件，1个控制器，1个测试文件，1个V层文件。并为我们在index.html中，引入刚刚创建的login.js文件，同时，在app.js中，自动增加一条路由。 ``` panjiedeMacBook-Pro:app panjie$ yo angular:route login invoke angular:controller:/usr/local/lib/node_modules/generator-angular/route/index.js create app/scripts/controllers/login.js create test/spec/controllers/login.js invoke angular:view:/usr/local/lib/node_modules/generator-angular/route/index.js create app/views/login.html ``` # V层 ``` <form ng-submit="submit()"> <label>用户名：<input type="text" ng-model="username"></label> <label>密码：<input type="password" ng-model="password"></label> <button type="submit">submit</button> </form> ``` # C层 ``` 'use strict'; /** * @ngdoc function * @name webAppApp.controller:LoginCtrl * @description * # LoginCtrl * Controller of the webAppApp */ angular.module('webAppApp') .controller('LoginCtrl', function($scope) { $scope.username = ''; // 用户名 $scope.password = ''; // 密码 // 提交表单 var submit = function () { console.log($scope.username); console.log($scope.password); console.log('submit'); }; $scope.submit = submit; }); ``` # M层 我们还是按照yo angular的教程，来定制M层。 > 新建service: yo angular:service user ``` panjiedeMacBook-Pro:app panjie$ yo angular:service user create app/scripts/services/user.js create test/spec/services/user.js ``` app/scripts/services/user.js ``` 'use strict'; /** * @ngdoc service * @name webAppApp.user * @description * # user * Service in the webAppApp. */ angular.module('webAppApp') .service('user', function($http) { var login = function(username, password, callback) { var data = {}; $http({ method: 'POST', url: 'http://127.0.0.1:8080/javaee/User_login', data: { username: username, password: password }, header: { contentType: 'application/json', } }).then(function successCallback(response) { console.log(response); data = response.data; // 网络发生错误 }, function errorCallback(response) { console.log('error callback'); console.log(response); }). // 发生异常 catch(function(e) { console.log('Error: ', e); throw e; }).finally(function() { // 调用回调函数, 返回教师数组 callback(data.isPassed); }); }; return { login: login }; }); ``` # C与M对接 ``` 'use strict'; /** * @ngdoc function * @name webAppApp.controller:LoginCtrl * @description * # LoginCtrl * Controller of the webAppApp */ angular.module('webAppApp') .controller('LoginCtrl', function($scope, user, $location) { $scope.username = ''; // 用户名 $scope.password = ''; // 密码 // 提交表单 var submit = function () { user.login($scope.username, $scope.password, function(isPassed) { if (isPassed === true) { console.log('登录成功'); // 跳转至首页 $location.path('/'); } else { console.log('登录失败'); } }); }; $scope.submit = submit; }); ``` 最后，我们进行集成测试。  > git checkout -f step11.5