Skip to content
Snippets Groups Projects
Commit b67ce6b1 authored by michaelisvy's avatar michaelisvy
Browse files

code migrated to Angular-ui-router

parent ef2ba55a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 88 additions and 71 deletions
src/main/java/org/springframework/samples/petclinic/web/OwnerListResource.java
+ 0
− 7
View file @ b67ce6b1
...@@ -17,17 +17,10 @@ package org.springframework.samples.petclinic.web; ...@@ -17,17 +17,10 @@ package org.springframework.samples.petclinic.web;
import java.util.Collection; import java.util.Collection;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType; import org.springframework.http.MediaType;
import org.springframework.samples.petclinic.model.Owner; import org.springframework.samples.petclinic.model.Owner;
import org.springframework.samples.petclinic.service.ClinicService; 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.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RequestParam;
......
src/main/java/org/springframework/samples/petclinic/web/OwnerResource.java
+ 1
− 3
View file @ b67ce6b1
...@@ -56,10 +56,8 @@ public class OwnerResource { ...@@ -56,10 +56,8 @@ public class OwnerResource {
} }
// TODO: should be improved so we have a single method parameter // 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) { 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.setFirstName(ownerRequest.getFirstName());
ownerModel.setLastName(ownerRequest.getLastName()); ownerModel.setLastName(ownerRequest.getLastName());
ownerModel.setCity(ownerRequest.getCity()); ownerModel.setCity(ownerRequest.getCity());
......
src/main/webapp/index.html
+ 4
− 5
View file @ b67ce6b1
...@@ -7,10 +7,9 @@ ...@@ -7,10 +7,9 @@
<link rel="stylesheet" href="bower_components/bootstrap/docs/assets/css/bootstrap.css" /> <link rel="stylesheet" href="bower_components/bootstrap/docs/assets/css/bootstrap.css" />
<link href="resources/css/petclinic.css" rel="stylesheet"/> <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/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="bower_components/angular-resource/angular-resource.js"></script>
<script src="scripts/app/app.js"></script> <script src="scripts/app/app.js"></script>
<script src="scripts/app/main/MainController.js"></script> <script src="scripts/app/main/MainController.js"></script>
...@@ -19,11 +18,11 @@ ...@@ -19,11 +18,11 @@
</head> </head>
<body class="container"> <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> </body>
</html> </html>
src/main/webapp/scripts/app/app.js
+ 59
− 26
View file @ b67ce6b1
...@@ -7,40 +7,73 @@ angular.module('services', ['ngResource']); ...@@ -7,40 +7,73 @@ angular.module('services', ['ngResource']);
/* App Module */ /* App Module */
var petClinicApp = angular.module('petClinicApp', [ var petClinicApp = angular.module('petClinicApp', [
'ngRoute', 'controllers', 'services' 'ui.router', 'controllers', 'services'
]); ]);
petClinicApp.config(['$routeProvider', petClinicApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
function($routeProvider) { $urlRouterProvider.otherwise('/');
$routeProvider.
when('/', { $stateProvider
templateUrl: 'scripts/app/main/main.html', .state('app', {
controller: 'mainController' 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', { state('app.ownersearch', {
templateUrl: 'scripts/app/owner/ownerSearchForm.html', url: 'owner/search',
controller: 'ownerSearchController' views: {
'content@': {
templateUrl: 'scripts/app/owner/ownerSearchForm.html',
controller: 'ownerSearchController'
}
}
}). }).
when('/owner/list', { state('app.ownerlist', {
templateUrl: 'scripts/app/owner/ownerList.html', url: 'owner/list',
controller: 'ownerListController' views: {
}). 'content@': {
when('/owner/:id/view', { templateUrl: 'scripts/app/owner/ownerList.html',
templateUrl: 'scripts/app/owner/ownerDetail.html', controller: 'ownerListController'
controller: 'ownerDetailController' }
}
}). }).
when('/owner/:id/edit', { state('app.ownerdetail', {
templateUrl: 'scripts/app/owner/ownerForm.html', url: 'owner/:id',
controller: 'ownerFormController' views: {
'content@': {
templateUrl: 'scripts/app/owner/ownerDetail.html',
controller: 'ownerDetailController'
}
}
}). }).
when('/vets', { state('app.owneredit', {
templateUrl: 'scripts/app/vet/vetList.html', url: 'owner/:id/edit',
controller: 'vetController' views: {
}). 'content@': {
otherwise({ templateUrl: 'scripts/app/owner/ownerForm.html',
redirectTo: '/' controller: 'ownerFormController'
}
}
}).
state('app.vets', {
url: 'vets',
views: {
'content@': {
templateUrl: 'scripts/app/vet/vetList.html',
controller: 'vetController'
}
}
}); });
}]); }]);
......
src/main/webapp/scripts/app/fragments/bodyHeader.html
+ 4
− 4
View file @ b67ce6b1
...@@ -3,15 +3,15 @@ ...@@ -3,15 +3,15 @@
<div class="navbar" style="width: 601px;"> <div class="navbar" style="width: 601px;">
<div class="navbar-inner"> <div class="navbar-inner">
<ul class="nav"> <ul class="nav">
<li style="width: 120px;"> <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>
<li style="width: 150px;"> <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>
<li style="width: 160px;"> <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>
<li style="width: 110px;"> <li style="width: 110px;">
<a href="oups.html" title="trigger a RuntimeException to see how it is handled"> <a href="oups.html" title="trigger a RuntimeException to see how it is handled">
......
src/main/webapp/scripts/app/main/main.html
+ 1
− 1
View file @ b67ce6b1
<div ng-controlleeer="mainControllerww"> <div ng-controller="mainController">
<p>Welcome to Petclinic </p> <p>Welcome to Petclinic </p>
</div> </div>
src/main/webapp/scripts/app/owner/OwnerController.js
+ 14
− 20
View file @ b67ce6b1
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
/* /*
* Owner Search * Owner Search
*/ */
angular.module('controllers').controller('ownerSearchController', ['$scope', '$rootScope', '$resource', '$location', angular.module('controllers').controller('ownerSearchController', ['$scope', '$rootScope', '$resource', '$state',
function($scope, $rootScope, $resource, $location) { function($scope, $rootScope, $resource, $state) {
$scope.submitOwnerFindForm = function() { $scope.submitOwnerFindForm = function() {
...@@ -15,42 +15,36 @@ angular.module('controllers').controller('ownerSearchController', ['$scope', '$r ...@@ -15,42 +15,36 @@ angular.module('controllers').controller('ownerSearchController', ['$scope', '$r
var ownerResource = $resource(destUrl); var ownerResource = $resource(destUrl);
$rootScope.owners = ownerResource.query(); $rootScope.owners = ownerResource.query();
$location.path('/owner/list'); $state.go('app.ownerlist'); //updating URL in address bar
}}]); }}]);
/* /*
* Owners List * Owners List
*/ */
angular.module('controllers').controller('ownerListController', ['$scope', '$rootScope', '$location', angular.module('controllers').controller('ownerListController', ['$scope', '$rootScope',
function($scope, $rootScope, $location) { function($scope, $rootScope, $location) {
if ($rootScope.owners!=null){ if ($rootScope.owners!=null){
$scope.ownerList = $rootScope.owners; $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) * 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 loadOwner
]); ]);
function loadOwner($scope, $resource, $rootScope) { function loadOwner($scope, $resource, $stateParams) {
var ownerResource = $resource('/petclinic/owner/' + $rootScope.ownerId); var ownerResource = $resource('/petclinic/owner/' + $stateParams.id);
$scope.owner = ownerResource.get(); $scope.owner = ownerResource.get();
} }
/* /*
* Owner Edit Form * Owner Edit Form
*/ */
angular.module('controllers').controller('ownerFormController', ['$scope', '$resource', '$http', '$rootScope', '$location', angular.module('controllers').controller('ownerFormController', ['$scope', '$resource', '$http', '$stateParams', '$state',
function($scope, $resource, $http, $rootScope, $location) { function($scope, $resource, $http, $stateParams, $state) {
$scope.submitOwnerForm = function() { $scope.submitOwnerForm = function() {
var form = $scope.owner; var form = $scope.owner;
...@@ -63,12 +57,12 @@ function($scope, $resource, $http, $rootScope, $location) { ...@@ -63,12 +57,12 @@ function($scope, $resource, $http, $rootScope, $location) {
city: form.city, city: form.city,
telephone: form.telephone telephone: form.telephone
}; };
var restUrl = "/petclinic/owner/" + $rootScope.ownerId; var restUrl = "/petclinic/owner/" + $stateParams.id;
$http.post(restUrl, data); $http.put(restUrl, data);
$location.path('/owner/list'); $state.go('app.ownerlist');
} }
loadOwner($scope, $resource, $rootScope); loadOwner($scope, $resource, $stateParams);
}]); }]);
......
src/main/webapp/scripts/app/owner/ownerDetail.html
+ 1
− 1
View file @ b67ce6b1
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</tr> </tr>
<tr> <tr>
<td> <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> <td>
<spring:url value="{ownerId}/pets/new.html" var="addUrl"> <spring:url value="{ownerId}/pets/new.html" var="addUrl">
<spring:param name="ownerId" value="${owner.id}"/> <spring:param name="ownerId" value="${owner.id}"/>
......
src/main/webapp/scripts/app/owner/ownerForm.html
+ 1
− 1
View file @ b67ce6b1
<div class="container"> <div class="container">
<h2>Owner</h2> <h2>Owner</h2>
<form class="form-horizontal" name="ownerForm" ng-controller="ownerFormController"> <form class="form-horizontal" name="ownerForm" data-ng-controller="ownerFormController">
<fieldset> <fieldset>
<div class="control-group" id="firstName"> <div class="control-group" id="firstName">
<label class="control-label">First name </label> <label class="control-label">First name </label>
......
src/main/webapp/scripts/app/owner/ownerList.html
+ 1
− 1
View file @ b67ce6b1
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<tr ng-repeat="owner in ownerList"> <tr ng-repeat="owner in ownerList">
<td> <td>
<a ng-click="displayOwnerDetail(owner.id)"> <a ui-sref="app.ownerdetail({id: owner.id})">
{{owner.firstName}} {{owner.lastName}} {{owner.firstName}} {{owner.lastName}}
</a> </a>
</td> </td>
......
src/main/webapp/scripts/app/owner/ownerSearchForm.html
+ 1
− 1
View file @ b67ce6b1
<h2>Find Owners</h2> <h2>Find Owners</h2>
<form class="form-horizontal" id="ownerFindForm" ng-controller="ownerSearchController"> <form class="form-horizontal" id="ownerFindForm" data-ng-controller="ownerSearchController">
<fieldset> <fieldset>
<div class="control-group" id="lastName"> <div class="control-group" id="lastName">
<label class="control-label">Last name </label> <label class="control-label">Last name </label>
......
src/main/webapp/scripts/app/vet/vetList.html
+ 1
− 1
View file @ b67ce6b1
<div ng-controller="vetController"> <div data-ng-controller="vetController">
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment