From b67ce6b1ab1e2c036eb68b5e14abe55cd9af5f95 Mon Sep 17 00:00:00 2001
From: michaelisvy <misvy@gopivotal,com>
Date: Sat, 27 Jun 2015 16:59:29 +0800
Subject: [PATCH] code migrated to Angular-ui-router
---
.../petclinic/web/OwnerListResource.java | 7 --
.../samples/petclinic/web/OwnerResource.java | 4 +-
src/main/webapp/index.html | 9 +-
src/main/webapp/scripts/app/app.js | 85 +++++++++++++------
.../scripts/app/fragments/bodyHeader.html | 8 +-
src/main/webapp/scripts/app/main/main.html | 2 +-
.../scripts/app/owner/OwnerController.js | 34 +++-----
.../webapp/scripts/app/owner/ownerDetail.html | 2 +-
.../webapp/scripts/app/owner/ownerForm.html | 2 +-
.../webapp/scripts/app/owner/ownerList.html | 2 +-
.../scripts/app/owner/ownerSearchForm.html | 2 +-
src/main/webapp/scripts/app/vet/vetList.html | 2 +-
12 files changed, 88 insertions(+), 71 deletions(-)
diff --git a/src/main/java/org/springframework/samples/petclinic/web/OwnerListResource.java b/src/main/java/org/springframework/samples/petclinic/web/OwnerListResource.java
index 8054fc8f..ae7782be 100644
--- a/src/main/java/org/springframework/samples/petclinic/web/OwnerListResource.java
+++ b/src/main/java/org/springframework/samples/petclinic/web/OwnerListResource.java
@@ -17,17 +17,10 @@ package org.springframework.samples.petclinic.web;
import java.util.Collection;
-import javax.validation.Valid;
-
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.samples.petclinic.model.Owner;
import org.springframework.samples.petclinic.service.ClinicService;
-import org.springframework.validation.BindingResult;
-import org.springframework.web.bind.WebDataBinder;
-import org.springframework.web.bind.annotation.InitBinder;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
diff --git a/src/main/java/org/springframework/samples/petclinic/web/OwnerResource.java b/src/main/java/org/springframework/samples/petclinic/web/OwnerResource.java
index 4fe3bb80..966a8a43 100644
--- a/src/main/java/org/springframework/samples/petclinic/web/OwnerResource.java
+++ b/src/main/java/org/springframework/samples/petclinic/web/OwnerResource.java
@@ -56,10 +56,8 @@ public class OwnerResource {
}
// TODO: should be improved so we have a single method parameter
- @RequestMapping(value = "/owner/{ownerId}", method = RequestMethod.POST)
+ @RequestMapping(value = "/owner/{ownerId}", method = RequestMethod.PUT)
public Owner updateOwner(@ModelAttribute Owner ownerModel, @RequestBody Owner ownerRequest) {
- // seems like a workaround. I haven't found a proper way to inject to have @ModelAttribute pupulate object
- // first and then have the delta come from @RequestBody
ownerModel.setFirstName(ownerRequest.getFirstName());
ownerModel.setLastName(ownerRequest.getLastName());
ownerModel.setCity(ownerRequest.getCity());
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
index fd98c965..7a0d8741 100644
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@@ -7,10 +7,9 @@
<link rel="stylesheet" href="bower_components/bootstrap/docs/assets/css/bootstrap.css" />
<link href="resources/css/petclinic.css" rel="stylesheet"/>
- <script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
- <script src="bower_components/angular-route/angular-route.js"></script>
+ <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="scripts/app/app.js"></script>
<script src="scripts/app/main/MainController.js"></script>
@@ -19,11 +18,11 @@
</head>
<body class="container">
- <div ng-include="'scripts/app/fragments/bodyHeader.html'"></div>
+ <div ui-view="header"></div>
- <div ng-view></div>
+ <div ui-view="content"></div>
- <div ng-include="'scripts/app/fragments/footer.html'"></div>
+ <div ui-view="footer"></div>
</body>
</html>
diff --git a/src/main/webapp/scripts/app/app.js b/src/main/webapp/scripts/app/app.js
index cb3c4b05..1be9626c 100644
--- a/src/main/webapp/scripts/app/app.js
+++ b/src/main/webapp/scripts/app/app.js
@@ -7,40 +7,73 @@ angular.module('services', ['ngResource']);
/* App Module */
var petClinicApp = angular.module('petClinicApp', [
- 'ngRoute', 'controllers', 'services'
+ 'ui.router', 'controllers', 'services'
]);
-petClinicApp.config(['$routeProvider',
- function($routeProvider) {
- $routeProvider.
- when('/', {
- templateUrl: 'scripts/app/main/main.html',
- controller: 'mainController'
+petClinicApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
+ $urlRouterProvider.otherwise('/');
+
+ $stateProvider
+ .state('app', {
+ url: '/',
+ controller: 'mainController',
+ views: {
+ 'header': { templateUrl: 'scripts/app/fragments/bodyHeader.html'},
+ 'content': { templateUrl: 'scripts/app/main/main.html'},
+ 'footer': { templateUrl: 'scripts/app/fragments/footer.html'}
+ }
}).
- when('/owner/search', {
- templateUrl: 'scripts/app/owner/ownerSearchForm.html',
- controller: 'ownerSearchController'
+ state('app.ownersearch', {
+ url: 'owner/search',
+ views: {
+ 'content@': {
+ templateUrl: 'scripts/app/owner/ownerSearchForm.html',
+ controller: 'ownerSearchController'
+ }
+ }
+
}).
- when('/owner/list', {
- templateUrl: 'scripts/app/owner/ownerList.html',
- controller: 'ownerListController'
- }).
- when('/owner/:id/view', {
- templateUrl: 'scripts/app/owner/ownerDetail.html',
- controller: 'ownerDetailController'
+ state('app.ownerlist', {
+ url: 'owner/list',
+ views: {
+ 'content@': {
+ templateUrl: 'scripts/app/owner/ownerList.html',
+ controller: 'ownerListController'
+ }
+ }
+
}).
- when('/owner/:id/edit', {
- templateUrl: 'scripts/app/owner/ownerForm.html',
- controller: 'ownerFormController'
+ state('app.ownerdetail', {
+ url: 'owner/:id',
+ views: {
+ 'content@': {
+ templateUrl: 'scripts/app/owner/ownerDetail.html',
+ controller: 'ownerDetailController'
+ }
+ }
+
}).
- when('/vets', {
- templateUrl: 'scripts/app/vet/vetList.html',
- controller: 'vetController'
- }).
- otherwise({
- redirectTo: '/'
+ state('app.owneredit', {
+ url: 'owner/:id/edit',
+ views: {
+ 'content@': {
+ templateUrl: 'scripts/app/owner/ownerForm.html',
+ controller: 'ownerFormController'
+ }
+ }
+
+ }).
+ state('app.vets', {
+ url: 'vets',
+ views: {
+ 'content@': {
+ templateUrl: 'scripts/app/vet/vetList.html',
+ controller: 'vetController'
+ }
+ }
+
});
}]);
diff --git a/src/main/webapp/scripts/app/fragments/bodyHeader.html b/src/main/webapp/scripts/app/fragments/bodyHeader.html
index 1cdf3a57..8bdf2397 100644
--- a/src/main/webapp/scripts/app/fragments/bodyHeader.html
+++ b/src/main/webapp/scripts/app/fragments/bodyHeader.html
@@ -3,15 +3,15 @@
<div class="navbar" style="width: 601px;">
<div class="navbar-inner">
- <ul class="nav">
+ <ul class="nav">
<li style="width: 120px;">
- <a href="#/main"><i class="icon-home"></i> Home</a>
+ <a ui-sref="app"><i class="icon-home"></i> Home</a>
</li>
<li style="width: 150px;">
- <a href="#/owner/search"><i class="icon-search"></i> Find owners</a>
+ <a ui-sref="app.ownersearch"><i class="icon-search"></i> Find owners</a>
</li>
<li style="width: 160px;">
- <a href="#/vets"><i class="icon-th-list"></i> Veterinarians</a>
+ <a ui-sref="app.vets"><i class="icon-th-list"></i> Veterinarians</a>
</li>
<li style="width: 110px;">
<a href="oups.html" title="trigger a RuntimeException to see how it is handled">
diff --git a/src/main/webapp/scripts/app/main/main.html b/src/main/webapp/scripts/app/main/main.html
index 399ce651..84cc02ea 100644
--- a/src/main/webapp/scripts/app/main/main.html
+++ b/src/main/webapp/scripts/app/main/main.html
@@ -1,3 +1,3 @@
-<div ng-controlleeer="mainControllerww">
+<div ng-controller="mainController">
<p>Welcome to Petclinic </p>
</div>
diff --git a/src/main/webapp/scripts/app/owner/OwnerController.js b/src/main/webapp/scripts/app/owner/OwnerController.js
index 021e85d6..a46a3b6d 100644
--- a/src/main/webapp/scripts/app/owner/OwnerController.js
+++ b/src/main/webapp/scripts/app/owner/OwnerController.js
@@ -3,8 +3,8 @@
/*
* Owner Search
*/
-angular.module('controllers').controller('ownerSearchController', ['$scope', '$rootScope', '$resource', '$location',
- function($scope, $rootScope, $resource, $location) {
+angular.module('controllers').controller('ownerSearchController', ['$scope', '$rootScope', '$resource', '$state',
+ function($scope, $rootScope, $resource, $state) {
$scope.submitOwnerFindForm = function() {
@@ -15,42 +15,36 @@ angular.module('controllers').controller('ownerSearchController', ['$scope', '$r
var ownerResource = $resource(destUrl);
$rootScope.owners = ownerResource.query();
- $location.path('/owner/list');
+ $state.go('app.ownerlist'); //updating URL in address bar
}}]);
/*
* Owners List
*/
-angular.module('controllers').controller('ownerListController', ['$scope', '$rootScope', '$location',
+angular.module('controllers').controller('ownerListController', ['$scope', '$rootScope',
function($scope, $rootScope, $location) {
if ($rootScope.owners!=null){
$scope.ownerList = $rootScope.owners;
- }
-
- $scope.displayOwnerDetail = function(id) {
- var url = "owner/" + id + "/view";
- $rootScope.ownerId = id;
- $location.path(url);
- }
+ }
}]);
/*
* Owners detail (used for both Editable and non-editable pages)
*/
-angular.module('controllers').controller('ownerDetailController', ['$scope', '$resource', '$rootScope',
+angular.module('controllers').controller('ownerDetailController', ['$scope', '$resource', '$stateParams',
loadOwner
]);
-function loadOwner($scope, $resource, $rootScope) {
- var ownerResource = $resource('/petclinic/owner/' + $rootScope.ownerId);
+function loadOwner($scope, $resource, $stateParams) {
+ var ownerResource = $resource('/petclinic/owner/' + $stateParams.id);
$scope.owner = ownerResource.get();
}
/*
* Owner Edit Form
*/
-angular.module('controllers').controller('ownerFormController', ['$scope', '$resource', '$http', '$rootScope', '$location',
-function($scope, $resource, $http, $rootScope, $location) {
+angular.module('controllers').controller('ownerFormController', ['$scope', '$resource', '$http', '$stateParams', '$state',
+function($scope, $resource, $http, $stateParams, $state) {
$scope.submitOwnerForm = function() {
var form = $scope.owner;
@@ -63,12 +57,12 @@ function($scope, $resource, $http, $rootScope, $location) {
city: form.city,
telephone: form.telephone
};
- var restUrl = "/petclinic/owner/" + $rootScope.ownerId;
- $http.post(restUrl, data);
- $location.path('/owner/list');
+ var restUrl = "/petclinic/owner/" + $stateParams.id;
+ $http.put(restUrl, data);
+ $state.go('app.ownerlist');
}
- loadOwner($scope, $resource, $rootScope);
+ loadOwner($scope, $resource, $stateParams);
}]);
diff --git a/src/main/webapp/scripts/app/owner/ownerDetail.html b/src/main/webapp/scripts/app/owner/ownerDetail.html
index 73704124..c3ba84ae 100644
--- a/src/main/webapp/scripts/app/owner/ownerDetail.html
+++ b/src/main/webapp/scripts/app/owner/ownerDetail.html
@@ -21,7 +21,7 @@
</tr>
<tr>
<td>
- <a class="btn btn-info" ng-href="#/owner/{{owner.id}}/edit">Edit Owner</a></td>
+ <a class="btn btn-info" ui-sref="app.owneredit({id: owner.id})">Edit Owner</a></td>
<td>
<spring:url value="{ownerId}/pets/new.html" var="addUrl">
<spring:param name="ownerId" value="${owner.id}"/>
diff --git a/src/main/webapp/scripts/app/owner/ownerForm.html b/src/main/webapp/scripts/app/owner/ownerForm.html
index ad604d44..719c0af2 100644
--- a/src/main/webapp/scripts/app/owner/ownerForm.html
+++ b/src/main/webapp/scripts/app/owner/ownerForm.html
@@ -1,7 +1,7 @@
<div class="container">
<h2>Owner</h2>
- <form class="form-horizontal" name="ownerForm" ng-controller="ownerFormController">
+ <form class="form-horizontal" name="ownerForm" data-ng-controller="ownerFormController">
<fieldset>
<div class="control-group" id="firstName">
<label class="control-label">First name </label>
diff --git a/src/main/webapp/scripts/app/owner/ownerList.html b/src/main/webapp/scripts/app/owner/ownerList.html
index 5a87146e..9a66b6ad 100644
--- a/src/main/webapp/scripts/app/owner/ownerList.html
+++ b/src/main/webapp/scripts/app/owner/ownerList.html
@@ -12,7 +12,7 @@
<tr ng-repeat="owner in ownerList">
<td>
- <a ng-click="displayOwnerDetail(owner.id)">
+ <a ui-sref="app.ownerdetail({id: owner.id})">
{{owner.firstName}} {{owner.lastName}}
</a>
</td>
diff --git a/src/main/webapp/scripts/app/owner/ownerSearchForm.html b/src/main/webapp/scripts/app/owner/ownerSearchForm.html
index 21e97467..778b0919 100644
--- a/src/main/webapp/scripts/app/owner/ownerSearchForm.html
+++ b/src/main/webapp/scripts/app/owner/ownerSearchForm.html
@@ -1,5 +1,5 @@
<h2>Find Owners</h2>
- <form class="form-horizontal" id="ownerFindForm" ng-controller="ownerSearchController">
+ <form class="form-horizontal" id="ownerFindForm" data-ng-controller="ownerSearchController">
<fieldset>
<div class="control-group" id="lastName">
<label class="control-label">Last name </label>
diff --git a/src/main/webapp/scripts/app/vet/vetList.html b/src/main/webapp/scripts/app/vet/vetList.html
index 78f12a6b..7d582a7f 100644
--- a/src/main/webapp/scripts/app/vet/vetList.html
+++ b/src/main/webapp/scripts/app/vet/vetList.html
@@ -1,4 +1,4 @@
-<div ng-controller="vetController">
+<div data-ng-controller="vetController">
<table class="table table-striped">
<thead>
<tr>
--
GitLab