后臺的數據準備好后，現在可以進行后臺開發了。 參考地址： [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