Working with multiple states and single controller in angular.ui-router

Question

I am learning angularJS and creating a web application which uses ui-router.

I have defined states as follows:

angular.module('test', [])
.config(function($stateProvider){
  $stateProvider.
       state('root',{
           url: '/',
           abstract:true,
           templateUrl: '/root.html',
           controller: 'MyController'
       })
       .state('root.route1',{
           url: '/route1',
           parent: 'root',
           views:{
               '':{
                   templateUrl: '/route1.html'
                  }
               'estimatedCost@':{
                   templateUrl: '/esitmatedCost.html'
                  }
            }
       })
       .state('root.route2',{
           url: '/route2',
           parent: 'root',
           views:{
               '':{
                   templateUrl: '/route2.html'
                  }
               'estimatedCost@':{
                   templateUrl: '/esitmatedCost.html'
                  }
            }
       })
    });

While navigating back and forth between route1 and route2, I want to share scope variables from MyController. When I navigate to route2 from route1, it is loosing value of scope variable.

I am not sure what I am doing wrong.

Can anyone help me? Thanks in advance.

Your routes are the same except for the name, is that intentional? — Incognos
– Incognos, Commented Jul 7, 2015 at 3:22
aside from the fact that having two different routes which map to the same url is probably not useful, what is the point of this? why would you need two different pages that look exactly the same, use the same data, and have the same controller? — Claies
– Claies, Commented Jul 7, 2015 at 3:33
Use factory to communicate with database, use service to facilitate intra app communication and if in service concept you need some tasks to be done at config time - use provider. Controllers are generally used just to interact with the view. — imsheth
– imsheth, Commented Jul 7, 2015 at 4:48
@imsheth can I use $state in factory? In my case, after I receive quote from route1 state, I need to go to new state route2 to receive another quote with updated values. — PratikDotCa
– PratikDotCa, Commented Jul 7, 2015 at 14:57

NoahC · Accepted Answer · 2015-07-07 04:16:15Z

I have yet to work with the ui-router, but I have worked with AngularJS for the last couple of years and this is how the language generally has worked in the past.

A controller's main purpose is to control the data on a single template. These controllers can communicate to each other through an AngularJS factory, often known as a service. In your case, you probably want to use a service as the controllers are getting destroyed on successful route change.

angular.module('test', [])
  .factory('myFactory', function() {
    var info = "Hello World";

    return {
      info: info
    };
  })
  .controller('CtrlOne', function($scope, myFactory) {
    $scope.info = myFactory.info;
  })
  .controller('CtrlTwo', function($scope, myFactory) {
    $scope.info = myFacotry.info;
  });

You can then use the two controllers on the two different views and they share the variables from the service that connects them.

Durgpal Singh · Accepted Answer · 2018-12-21 09:06:42Z

1

Use $stateParams to pass parameters between two states. Fallow the below steps :

Define your state with params object.

  .state('route.route1', {
            url: 'your url name',
            params: {
                nameOfParamObj: null
            },
            controller: 'your controller',
            templateUrl: 'your template url',
    })

From the controller where you want to send scope data use as fallows

$state.go(toState, params, options);
In toState controller catch state params using $stateParams

$stateParams.yourParamObjectName

Make sure $stateParams, $state services as dependency in your regarding controller Have a look into the official ui-router documentation Here.

edited Dec 21, 2018 at 9:06

Durgpal Singh

12k4 gold badges40 silver badges50 bronze badges

answered Mar 30, 2016 at 9:24

Ramesh Papaganti

7,9493 gold badges34 silver badges39 bronze badges

Collectives™ on Stack Overflow

Working with multiple states and single controller in angular.ui-router

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related