How to Pass Variables When Using $routeProvider

Question

I'm using $routeProvider to create a one page app where users press continue to go to the next step. It is important to pass variables to the next page whenever a user clicks continue so I followed some advice and created my own service which has persistent variables. This all works great except that I can only get variables from the service, I don't know how to update the variables. Here is my code:

myApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/pick_categories', {
                templateUrl: '/pick_categories.html',
                controller: 'MeetupDataCtrl'
            }).
            when('/pick_times', {
                templateUrl: '/pick_times.html',
                controller: 'MeetupDataCtrl'
            }).
            when('/events', {
                templateUrl: '/events.html',
                controller: 'MeetupDataCtrl'
            }).
            otherwise({
                redirectTo: '/pick_categories'
            });
    }]);

myApp.service("meetupService", function(){
    this.checked_categories = [];
});

myApp.controller('MeetupDataCtrl', ['$scope', '$http', '$location', '$resource', 'meetupService', function MeetupDataCtrl($scope, $http, $location, $resource, meetupService) {
    $scope.checked_categories = meetupService.checked_categories;
}]);

Then in the view I have checked_categories bound to an input field.

I know the problem is that I'm getting the service's variables on init, but I'm not updating the service's variables from the scope after I change routes. Any ideas on how I could do this? (or if there are other best practices)

after user insert data in input box the scope is updated then in controller you must update checked_categories via a function in service — Soheil Ghahremani
– Soheil Ghahremani, Commented Dec 30, 2013 at 23:28
If $scope.checked_categories is being modified, then the changes should persist to other routes using the service. Can you post how it's being bound to an input field, and ideally a Plunker showing it not working? — Michal Charemza
– Michal Charemza, Commented Dec 30, 2013 at 23:50

null · Accepted Answer · 2013-12-31 01:35:13Z

3

You could in fact change the service properties directly ... :

meetupService.checked_categories.push({ something: 'something'});

... but it's better to encapsulate the state properties of a service so you can do something like the following from your controller:

meetupService.addCategory('theCheckedCategory');

Do mind that services are singletons in Angular; there will be only one meetupService in your Angular application. This means that once the user has modified the checked_categories array somehow they will have that some array until they refresh/reload your website.

Also note that passing state information via url arguments is in most cases not necessary when building a single page app (which Angular is).

It sounds like your trying to build a wizard and if I'm guessing right you don't need anything of the above. Wizards are actually quite easy to make in Angular because all the state information is kept, ... well as long as you want it to.

See this plunker for a simple wizard example.

Edit:

Oh, and if you really need to pass arguments to the route, you can do that with the builtin $location service.

// change the path
$location.path('/newValue')

// change the query string / url arguments
$location.search({myArg: 'value', myOtherArg: 'anotherValue'});

edited Dec 31, 2013 at 1:35

answered Dec 31, 2013 at 1:23

null

7,9163 gold badges39 silver badges38 bronze badges

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

1 Comment

Rob Over a year ago

+1 for the second half of the post and the plunker. that is exactly what i needed

Collectives™ on Stack Overflow

How to Pass Variables When Using $routeProvider

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related