Search code examples
angularjsangular-ui-routerangular-uistate

Can get parameters from URL

I am working on my angularui project. In moduleI try to get variable that I sent in URL.

Here is module definition:

angular.module("workPlan", ['damageEvent',
                            'ui.router',
                            'geomindCommon',
                            'templates',
                            'lookups',
                            'ngTouch',
                            'ui.grid',
                            'ui.grid.expandable',
                            'ui.grid.selection',
                            'ui.grid.pinning',
                            'ui.grid.resizeColumns',
                            'ui.bootstrap'
])

.config([
    "$stateProvider",
    "$urlRouterProvider",
    function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise("/MainPage");
        $stateProvider
            .state("workPlan", {
                abstract: true,
                url: "/",
                template: "<ui-view></ui-view>"
            })

         .state("workPlan.list", {
             url: "MainPage",
             templateUrl: "app/workPlan/templates/workPlanList.tmpl.html",
             controller: "workPlanListController",
             controllerAs: "list",
             resolve: {
                 param: function ($stateParams) {

                     var stringParam = $stateParams.myParam;
                     return $stateParams.myParam;
                 },
                 filterParameters: [filterParametersResolver],
                 workPlans: ["workPlanServise", workPlanServiseResolver]
             }
         })
    }
]);

In this rows I try to get params from URL:

param: function ($stateParams) {    
    var stringParam = $stateParams.myParam;
    return $stateParams.myParam;
},

Here is my URL:

http://example.com/playground#/MainPage?myParam = "Some string"

But stringParam is always undefined.

Any idea what Ia am doing wrong here? Why stringParam is undefined.

Solution

  • We must define parameter. Either in url or with params : {} object. So this should solve it:

    .state("workPlan.list", {
     //url: "MainPage",
     url: "MainPage?myParam", // here we say, that myParam is expected in url

    Other ways how to set params