mirror of
https://github.com/spring-projects/spring-petclinic.git
synced 2025-07-17 21:35:50 +00:00
code migrated to Angular-ui-router
This commit is contained in:
parent
ef2ba55a9d
commit
b67ce6b1ab
12 changed files with 88 additions and 71 deletions
|
@ -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;
|
||||
|
|
|
@ -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());
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}]);
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
<div ng-controlleeer="mainControllerww">
|
||||
<div ng-controller="mainController">
|
||||
<p>Welcome to Petclinic </p>
|
||||
</div>
|
||||
|
|
|
@ -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);
|
||||
|
||||
}]);
|
||||
|
||||
|
|
|
@ -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}"/>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<div ng-controller="vetController">
|
||||
<div data-ng-controller="vetController">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
Loading…
Reference in a new issue