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? — Sina Khelil, Jul 07 '15 at 03: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, Jul 07 '15 at 03: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, Jul 07 '15 at 04: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, Jul 07 '15 at 14:57
@w3hunter : I think you should make a call from controller/service that should receive quote from endpoint x -> call should return data to your controller/service, if controller -> set the data in service to get the data anywhere else in the app where you inject the service. State resembles a route/path in angular-ui-router. Hope this helps. — imsheth, Jul 08 '15 at 04:27
@w3hunter : you can refer this http://stackoverflow.com/a/12009408 — imsheth, Jul 15 '15 at 08:03

score 1 · Answer 1 · answered Jul 07 '15 at 04:16

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.

score 1 · Answer 2 · edited Dec 21 '18 at 09:06

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.

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

2 Answers2