migrated from angular-router to ui-router

This article explains well why ui-router now is more popular:
http://www.funnyant.com/angularjs-ui-router/
This commit is contained in:
michaelisvy 2015-06-30 09:31:09 +08:00
parent b67ce6b1ab
commit e493177709
3 changed files with 28 additions and 25 deletions

View file

@ -36,7 +36,7 @@ petClinicApp.config(['$stateProvider', '$urlRouterProvider', function($stateProv
}). }).
state('app.ownerlist', { state('app.ownerlist', {
url: 'owner/list', url: 'owner/list?lastName',
views: { views: {
'content@': { 'content@': {
templateUrl: 'scripts/app/owner/ownerList.html', templateUrl: 'scripts/app/owner/ownerList.html',

View file

@ -3,30 +3,31 @@
/* /*
* Owner Search * Owner Search
*/ */
angular.module('controllers').controller('ownerSearchController', ['$scope', '$rootScope', '$resource', '$state', angular.module('controllers').controller('ownerSearchController', ['$scope', '$state',
function($scope, $rootScope, $resource, $state) { function($scope, $state) {
$scope.submitOwnerFindForm = function() { $scope.ownerSearchForm = {};
// form always needs to be initialised
// otherwise we can't read $scope.ownerSearchForm.lastName
var destUrl = '/petclinic/owner/list?lastName=' $scope.submitOwnerSearchForm = function() {
if(angular.isDefined($scope.ownerFindForm)) { var lastNameValue;
destUrl += $scope.ownerFindForm.lastName; $state.go('app.ownerlist', {lastName: $scope.ownerSearchForm.lastName});
} }}]);
var ownerResource = $resource(destUrl);
$rootScope.owners = ownerResource.query();
$state.go('app.ownerlist'); //updating URL in address bar
}}]);
/* /*
* Owners List * Owners List
*/ */
angular.module('controllers').controller('ownerListController', ['$scope', '$rootScope', angular.module('controllers').controller('ownerListController', ['$scope', '$resource', '$stateParams',
function($scope, $rootScope, $location) { function($scope, $resource, $stateParams) {
if ($rootScope.owners!=null){
$scope.ownerList = $rootScope.owners; var destUrl = '/petclinic/owner/list?lastName=';
} if(angular.isDefined($stateParams.lastName)) {
}]); destUrl += $stateParams.lastName;
}
var ownerResource = $resource(destUrl);
$scope.ownerList = ownerResource.query();
}]);
/* /*
* Owners detail (used for both Editable and non-editable pages) * Owners detail (used for both Editable and non-editable pages)
@ -46,6 +47,8 @@ function loadOwner($scope, $resource, $stateParams) {
angular.module('controllers').controller('ownerFormController', ['$scope', '$resource', '$http', '$stateParams', '$state', angular.module('controllers').controller('ownerFormController', ['$scope', '$resource', '$http', '$stateParams', '$state',
function($scope, $resource, $http, $stateParams, $state) { function($scope, $resource, $http, $stateParams, $state) {
scope.submitOwnerForm = {};
$scope.submitOwnerForm = function() { $scope.submitOwnerForm = function() {
var form = $scope.owner; var form = $scope.owner;

View file

@ -1,15 +1,15 @@
<h2>Find Owners</h2> <h2>Find Ownersss</h2>
<form class="form-horizontal" id="ownerFindForm" data-ng-controller="ownerSearchController"> <form class="form-horizontal" 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>
<input ng-model="ownerFindForm.lastName" size="30" maxlength="80"/> <input ng-model="ownerSearchForm.lastName" size="30" maxlength="80"/>
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button type="submit" ng-click="submitOwnerFindForm()">Find Owner</button> <button type="submit" ng-click="submitOwnerSearchForm()">Find Ownerss</button>
</div> </div>
</fieldset> </fieldset>
</form> </form>
<br/> <br/>
<a href="/owners/new">Add Owner</a> <a href="/owners/new">Add Ownerss</a>