Best way to restrict dynamic URL parameters matched to an AngularJS state
Question
Currently I have a state url defined as:
…/:table/edit/:id
-> Consequently both urls:
…/products/edit/5 & …/notValidTable/edit/5 load my tableEdit state as defined below:
tableEdit.state.js:
angular.module(‘myApp')
.config(function($stateProvider) {
$stateProvider
.state('tableEdit', {
url: '/:table/edit/:id',
templateUrl: ‘../table_edit/table_edit.html',
controller: 'TableEditCtrl'
});
});
Q - As I know my ':table' param in tableEdit should only be one of: 'products', 'providers', 'customer', 'keywords' or 'topics', how can I restrict its values accepted for my state to load?
Here is a solution that I have, but I am hoping for feedback or a better way around this issue:
app.js:
angular.module(‘myApp', [
'ui.router',
])
.config(
['$urlRouterProvider',
function($urlRouterProvider) {
$urlRouterProvider
.when('/:table/edit/:id', ['$match', '$state',
function($match, $state) {
if ($match.table !== 'products'
&& $match.table !== 'providers'
&& $match.table !== 'customer'
&& $match.table !== 'keywords'
&& $match.table !== 'topics') {
$state.transitionTo('tablesHome');
} else {
$state.transitionTo('tableEdit', $match, true); }
}
}
])
.otherwise('/home');
])
Are there better ways to restrict the possible values for tableEdit's ':table' parameter so that my page gets redirected appropriately for non-valid parameter values?
Many thanks.
1 answers
solution1
2 ACCPTED 2015-03-03 21:42:38
You can put a regex on your route parameters. Here's a working example:
var app = angular.module('myApp', [ 'ui.router', ]) app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) { $stateProvider .state('table', { // this is the important bit. // it will restrict this route to only 'products' and 'customers url: '/{table:products|customers}' }) .state('table.edit', { url: '/edit/:id', template: "<h1>TABLE</h1>" }) .state('home', { url: '/*path', // special 'catch all route', template: "<h1>HOME</h1>" }); $urlRouterProvider.otherwise('/home'); }]); app.run(['$rootScope', '$state', function($rootScope, $state) { $rootScope.$state = $state; }])
<!DOCTYPE html> <html> <head> <script data-require="angular.js@1.4.0-beta.5" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script> <script data-require="ui-router@0.2.13" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script> <script src="script.js"></script> </head> <body ng-app="myApp"> <h1>Hello Plunker!</h1> <a href="#/products/edit/5">/products/edit/5</a><br/> <a href="#/customers/edit/5">/customers/edit/5</a><br/> <a href="#/not-a-table/edit/5">/not-a-table/edit/5</a><br/> <a href="#/this-is-a-random-url">/this-is-a-random-url</a><br/> <div ui-view=""></div> <pre> <!-- Here's some values to keep an eye on in the sample in order to understand $state and $stateParams --> $state = {{$state.current.name}} $params = {{$state.params}} $state full url = {{ $state.$current.url.source }} </pre> </body> </html>
https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.