# 用Jersey構建RESTful服務9--Jersey+SQLServer+Hibernate4.3+Spring3.2+AngularJS ## 一、總體說明 本例運行演示了用 Jersey 構建 RESTful 服務中，如何集成 angular,用MVC分層的方式訪問 RESTful 服務。 ## 二、環境 1. 上上文的項目 [Demo7]((https://github.com/waylau/RestDemo/tree/master/jersey-demo7-sqlserver-hibernate-spring3)) 2. angular 庫 ,本例為1.2.3 版本 3. 樣式 bootstrap-3.1.1.min.js ## 三、配置 1. 完成項目結構  創建相應的目錄結構 angularjs 、bootstrap 的js,css文件放別放入相應的目錄， 在js目錄下再創建 `app.js` 、`controller.js` 在partials目錄下再創建 `create.html`、 `list.html` 、 `detail.html` 完整目錄結構如下  2. 在`list.html`填入如下內容,主要是顯示用戶列表`ng-repeat`為 angularjs 迭代器 作用是數據綁定: ``` <div class="pull-right"> <a href="#/create" class="btn btn-default" title="Create"><span class="glyphicon glyphicon-plus"></span></a> </div> <div class="page-header"> <h3>Users</h3> </div> <hr /> <li ng-repeat="user in users | filter:query | orderBy:orderProp" > <div class="pull-right"> <a href="#/users/" class="btn btn-xs btn-default" title="edit"> <span class="glyphicon glyphicon-pencil"></span></a> </div> <h4>userId: </h4> <p>userName:<a href="#/users/"></a> Age:</p> <hr /> </li> <hr /> ``` 3. 修改`create.html`用來添加用戶信息，`ng-model`是模型 ``` <div class="page-header"> <h3>Create</h3> </div> <form role="form" name="userForm"> <div class="row">&nbsp;</div> <div class="row" ng-class="{'has-error': userForm.userId.$invalid}"> <div class="col-md-1"> <i ng-show="userForm.url.$error.required" class="glyphicon glyphicon-pencil"></i> <label for="urlInput">userId</label> </div> <div class="col-md-4"> <input type="test" class="form-control" id="urlInput" name="userId" ng-model="user.userId" required> </div> </div> <div class="row">&nbsp;</div> <div class="row" ng-class="{'has-error': userForm.userName.$invalid}"> <div class="col-md-1"> <i ng-show="userForm.userName.$error.required" class="glyphicon glyphicon-pencil"></i> <label for="nameInput">userName</label> </div> <div class="col-md-4"> <input type="text" class="form-control error" id="nameInput" name="userName" ng-model="user.userName" required> </div> </div> <div class="row">&nbsp;</div> <div class="row" ng-class="{'has-error': userForm.url.$invalid}"> <div class="col-md-1"> <i ng-show="userForm.url.$error.required" class="glyphicon glyphicon-pencil"></i> <label for="urlInput">age</label> </div> <div class="col-md-4"> <input type="text" class="form-control" id="urlInput" name="age" ng-model="user.age" required> </div> </div> <div class="row" ng-hide="showConfirm"> <div class="col-md-5"> <a href="#users" class="btn">Cancel</a> <button ng-click="add()" ng-disabled="isClean() || userForm.$invalid" class="btn btn-primary">Save</button> </div> </div> ``` 4. 修改`detail.html`用來顯示用戶信息并提供修改、刪除等功能 ``` <form role="form" name="userForm"> <div class="row">&nbsp;</div> <div class="row" ng-class="{'has-error': userForm.userId.$invalid}"> <div class="col-md-1"> <i ng-show="userForm.url.$error.required" class="glyphicon glyphicon-pencil"></i> <label for="urlInput">userId</label> </div> <div class="col-md-4"> <input type="test" class="form-control" id="urlInput" name="userId" ng-model="user.userId" required> </div> </div> <div class="row">&nbsp;</div> <div class="row" ng-class="{'has-error': userForm.userName.$invalid}"> <div class="col-md-1"> <i ng-show="userForm.userName.$error.required" class="glyphicon glyphicon-pencil"></i> <label for="nameInput">userName</label> </div> <div class="col-md-4"> <input type="text" class="form-control error" id="nameInput" name="userName" ng-model="user.userName" fend-focus="focusUserNameeInput" required> </div> </div> <div class="row">&nbsp;</div> <div class="row" ng-class="{'has-error': userForm.url.$invalid}"> <div class="col-md-1"> <i ng-show="userForm.url.$error.required" class="glyphicon glyphicon-pencil"></i> <label for="urlInput">age</label> </div> <div class="col-md-4"> <input type="text" class="form-control" id="urlInput" name="age" ng-model="user.age" required> </div> </div> <div class="row" ng-hide="showConfirm">&nbsp;</div> <div class="row" ng-hide="showConfirm"> <div class="col-md-5"> <a href="#users" class="btn">Cancel</a> <button ng-click="save()" ng-disabled="isClean() || userForm.$invalid" class="btn btn-primary">Save</button> <button ng-click="remove()" ng-show="user.userId" class="btn btn-danger">Delete</button> </div> </div> </form> ``` 5. 修改`index.html`作為主頁面,嵌入其他子頁面，`ng-app`聲明這個是模塊，`ng-controller`說明他的控制器叫`ListCtrl`,`ng-view`用來存放子視圖（頁面）。 ``` <!doctype html> <html ng-app="appMain" ng-controller="ListCtrl"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> </head> <body > <!-- navbar --> <div class="container ng-view"></div> <!-- footer --> <div id="footer" class="hidden-xs"> <div class="container"> <p class="text-muted"> Project Example - by <a href="http://www.waylau.com" target="_blank">www.waylau.com</a> | <a href="https://github.com/waylau" target="_blank">GitHub Project</a> </p> </div> </div> <script src="js/bootstrap-3.1.1.min.js"></script> <script src="js/angular-1.2.3.js"></script> <script src="js/angular-resource-1.2.3.js"></script> <script src="js/angular-route-1.2.3.js"></script> <script src="js/angular-cookies-1.2.3.js"></script> <script src="js/app.js"></script> <script src="js/controller.js"></script> </body> </html> ``` 6. 修改`app.js` ，聲明模塊`appMain`,提供路由功能，說明了調轉到哪個頁面，用哪個控制器 ``` angular.module('appMain', ['ngRoute']).config(['$routeProvider', function ($routeProvider) { $routeProvider. when('/users', {templateUrl: 'partials/list.html', controller: ListCtrl}). when('/users/:userId', {templateUrl: 'partials/detail.html', controller: DetailCtrl}). when('/create', { templateUrl: 'partials/create.html', controller: CreateController }). otherwise({redirectTo: '/users'}); }]); ``` 7. 修改`controller.js`，控制器。主要是對業務邏輯的操作，常見的CURD功能，http訪問RESTful接口，并且返回數據 ``` var url = 'http://localhost:8089/RestDemo/rest'; function ListCtrl($scope, $http) { $http.get( url + '/users' ).success(function(data) { $scope.users = data; }); $scope.orderProp = 'age'; } function DetailCtrl($scope, $routeParams, $http) { $http.get( url + '/users/'+$routeParams.userId).success(function(data) { $scope.user = data; }); $scope.save = function() { $http.put( url + '/users', $scope.user). success(function(data, status, headers, config){ $location.path('/'); }).error(function(data, status, headers, config){ alert("error"+status); }) ; }; $scope.remove = function(){ $http({ method:'DELETE', url: url + '/users/'+ $scope.user.userId , }) .success(function(data, status, headers, config){ $location.path('/'); }).error(function(data, status, headers, config){ alert("error"+status); }) ; }; } function CreateController($scope, $http) { $scope.add = function() { $http.post( url + '/users', $scope.user). success(function(data, status, headers, config){ $location.path('/'); }).error(function(data, status, headers, config){ alert("error"+status); }) ; }; } ``` ## 四、運行 1. 先運行項目 2. 可以進行CURD操作   _PS_:本案例力求簡單把 angularjs 訪問 RESTful 服務展示出來，在Chrome,firefox,IE上做過測試。 **本章源碼**：[jersey-demo9-sqlserver-hibernate-spring3-angularjs](jersey-demo9-sqlserver-hibernate-spring3-angularjs)