angularjs - ui-route - how to attach mutlple URL with same name?

Question

In my app, I require to attach multiple url with same state - how do i achieve this?

here is my existing state:

.state('createCase', {
        url: '/createCase',
        templateUrl: null,
        controller: null,
        data: {
          requireLogin: false
        },

also I would like to attache another url as like this:

.state('createCase', {
        url: '/createCase?sn=12345', //(12345 is dynamic )
        templateUrl: null,
        controller: null,
        data: {
          requireLogin: false
        },

here is my current function:

function routeConfig($stateProvider, $locationProvider, $urlRouterProvider) {

    $stateProvider
      .state('login', {
        url: '/',
        templateUrl: function(){ 
          console.log('from 1oauth'); 
          return 'app/login/login.html';
        },
        controller: 'loginCtrl as ctrl',
        data: {
          requireLogin: false
        }
      })
      .state('oauth', {
        url: '/oauth',
        templateUrl: function(){

          console.log('from 2oauth');
          return 'app/oauth/oauth.template.html';

        },
        controller: 'OAuthController as ctrl',
        data: {
          requireLogin: false
        }
      })
      .state('createCase', {
        url: '/createCase',
        templateUrl: null,
        controller: null,
        data: {
          requireLogin: false
        }

        }
      })


    // if (isWeb()){  
      $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
      });
    // }

    // $urlRouterProvider.otherwise('/');
    $urlRouterProvider.otherwise('/');

  }

sonikyogurt · Accepted Answer · 2016-10-18 07:52:22Z

1

You don't need to define two different states for same url. In your controller, you can use $state.params object that has query parameters as properties.

Your route

.state('createCase', {
        url: '/createCase',
        templateUrl: null,
        controller: 'MyCtrl',
        data: {
          requireLogin: false
        },
        params: {
          sn: null
        }

Your controller

function MyCtrl($state) {
    console.log($state.params);
}

edited Oct 18, 2016 at 7:52

answered Oct 18, 2016 at 7:34

sonikyogurt

3801 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2024080 Over a year ago

at present I URL is : http://localhost:3000/createCase?sn=12345 But when I console like you, I am getting empty object. -

sonikyogurt Over a year ago

@user2024080 sorry I'm new to ui-router :-) I just updated the route. Notice I defined the parameters we accept in the route and added a default value for sn parameter.

Tal · Accepted Answer · 2016-10-18 07:49:43Z

1

Define in your route:

.state('createCase', {
        url: '/createCase?sn',   // bind your query param to URL
        templateUrl: null,
        controller: null,
        data: {
          requireLogin: false
        },

In your controller, inject $stateParams to dependencies and use it with $stateParams.sn whatever you need.

Example:

$state.go('createCase', {sn:1234});  // move to state with a param

$stateParams.sn   // get a value of ==> 1234

edited Oct 18, 2016 at 7:49

answered Oct 18, 2016 at 7:43

Tal

2151 silver badge8 bronze badges

Comments

oshell · Accepted Answer · 2016-10-18 08:46:02Z

Looks like you want to create a parent state and sub states. If you just want to have access to $routeParams you can can pass them to the controller or leave them out when using same state.

(function () {
    'use strict';

    angular.module('app', ['ui.router'])
        .config(routeConfig);

    routeConfig.$inject = ['$stateProvider'];

    function routeConfig($stateProvider) {
        $stateProvider
            .state('createCase', {
                url: '/createCase',
                template: '<h3>Create Case</h3><div ui-view="detail"></div>'
            })
            .state('createCase.detail', {
                parent: 'createCase',
                url: '/:sn',
                views: {  'detail@createCase': {
                        template: '{{sn}}',
                        controller: function($scope, $stateParams){
                            $scope.sn = $stateParams.sn;
                        }
                    }
                }
            })
    }
}());

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>AngularJS</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="[email protected]" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
</head>

<body ng-app="app">
    <ul>
        <li><a ui-sref="createCase">createCase</a></li>
        <li><a ui-sref="createCase.detail({sn:'123456'})">createCaseDetail 123456</a></li>
        <li><a ui-sref="createCase.detail({sn:''})">createCaseDetail None</a></li>
    </ul>
    <div ui-view=""></div>
</body>

</html>

Collectives™ on Stack Overflow

angularjs - ui-route - how to attach mutlple URL with same name?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related