Elizabeth
Engineer
Engineer
  • UID625
  • Fans1
  • Follows1
  • Posts68
Reads:1134Replies:0

How AngularJS transfers parameters through ui-router

Created#
More Posted time:Sep 22, 2016 17:34 PM
Today, I received a requirement that a service developed by my colleague needs to redirect to my service and transfer parameters, which needs the help of URL routing. How do I do this in AngularJS?
It is known that route control is implemented by referencing the ui-router library and invoking $stateProvider and $urlRouterProvider services. To transfer parameters in routes, we need the preceding services. The following describes how the services work.
$urlRouterProvider
$urlRouterProvider commonly processes other URL-requested routing modes which were not specified in the state configuration.
$urlRouterProvider.otherwise('/index');

We have not tried to transfer parameters using $urlRouterProvider during routing. Details will be given after we figure it out.
$stateProvider
Here's how we set a URL in $stateProvider:
$stateProvider.state('search', {
    url: '/search',
    views: {
        'header': {
            templateUrl: "../common/header/head_nav.html",
            controller: 'headerCtrl'
        },
        'appState': {
            templateUrl: '../search/search.html',
            controller: "searchCtrl"
        }
    }
});


In the preceding configuration, we define a routing search, which consists of a view and a controller to be loaded by ui-view. Now, specify parameters for the route.
$stateProvider.state('search', {
    url: '/search/{id}',
    views: {
        'header': {
            templateUrl: "../common/header/head_nav.html",
            controller: 'headerCtrl'
        },
        'appState': {
            templateUrl: '../search/search.html',
            controller: "searchCtrl"
        }
    }
});



You only need to define parameters in curly brackets, which is so simple. You can also use colons instead of curly brackets.
$stateProvider.state('search', {
    url: '/search/:id',
    views: {
        'header': {
            templateUrl: "../common/header/head_nav.html",
            controller: 'headerCtrl'
        },
        'appState': {
            templateUrl: '../search/search.html',
            controller: "searchCtrl"
        }
    }
});


What is the difference between the two ways? In short, curly brackets provide more functions. For example, you can add a regular expression in curly brackets.
$stateProvider.state('search', {
    url: '/search/{id:[0-9]{1,8}}',
    views: {
        'header': {
            templateUrl: "../common/header/head_nav.html",
            controller: 'headerCtrl'
        },
        'appState': {
            templateUrl: '../search/search.html',
            controller: "searchCtrl"
        }
    }
});


You can even use the Get method of HTTP to add parameters.
url: '/search?id&name'
//Matches url:  '/search?id=value1&name=value2'


Isn't it flexible and powerful? The next step is to enable the parameters to be obtained on the target page, which needs the $stateParams service.
controller: function($stateParams){
  $stateParams.id
  $stateParams.name  
}


If the URL does not contain the parameters, "undefined" is returned.
For more details, visit https://github.com/angular-ui/ui-router/wiki/URL-Routing.
Guest