Passing data from one route view to another

Question

I want to pass some values from one view to another in Angularjs using ui-Router.
I don't want to use $rootScope to save data or create a new services ( as I have many views that pass small bits of data so creating new jsfile for few lines code is not fun). A super-minified example of what I want to do is:

Controller of View 1
$scope.goodFood = 10 $scope.badFood = 2

Controller of View 2
$scope.results = 10 - 2 (from view 1's scope)

Is there any quick way to do these kinds of small operations ?

Answer 1

I don't want to use $rootScope to save data or create a new services ( as I have many views that pass small bits of data so creating new jsfile for few lines code is not fun)

There is no need to create a new service for new bits of data. Simply create a value service with an object:

app.value("viewData", {});

Then simply add new properties as needed:

app.controller("viewCtrl", function(viewData) {
    viewData.newProp = "new info";
    console.log(viewData.oldProp);
});

As value services are singletons, changes to the contents of the object will survive view changes.

Answer 2

Since you have specified the approach that you wanted to follow, you should create the following

$stateProvider
    .state('view2', {
        url: "/view2/:param1/:param2",
        templateUrl: 'view2.html',
        controller: function ($stateParams) {
            console.log($state.params.param1+"-"+$state.params.param2);
        }
    });

and from where ever you want to call

$state.go('view2',{param1:'10', param2:'2'});

But in general it is advised that you keep these values in a service or some where stored. With the application growing you may have to use few more attributes to compute

Answer 3

Easiest way would be to store all the data directly into the $routeParams either through route or query string.

routeUrl: /foods/:quality/:stars

then in your controller you can access

$routeParams.quality - $routeParams.stars