Passing data in between controller without help of url?

Question

I am creating two page webapp using AngularJS. my Json file is:

{
    "data": [

        { "name": "bhav",
"id": 123
            },
{"name": "bhavi",
"id": 1234
},
{"name": "bhavk",
"id": 1235
}
]
}

my app.js(Routing file is):

myApp = angular.module('myApp', ['slickCarousel',
  'ngRoute',
  'myAppControllers',
    'myAppServices','swipeLi'
]);

myApp.config(['$routeProvider',
  function($routeProvider) {

    $routeProvider.
      when('/', {
        templateUrl: 'partials/home-page.html',
        controller: 'ProfileListCtrl',
    }).
    when('/profile/:typeofprofile', {
        templateUrl: 'partials/profile-detail.html',
        controller: 'ProfileDetailCtrl'
      })
}]);

and my 1st page(home-page.html) is in given formate:

<div ng-repeat="data in data">
<a href="profile/myfriend">{{data.name}}</a>
</div>

and on 2nd page(profile-details.html) I want that id number of that profile considering I am using http.get request to pull data from Json file in controllers.

so please help me to fetch the id or name of clicked profile without passing through URL .

Note: I already look through ui-route link: Angular ui router passing data between states without URL but I didnt get that.

This is wrong `
` you have to give a different name `
`. Then it's unclear what you are asking. — michelem, Mar 17 '16 at 10:41
@d.h. I knew the method of $routeProvider, but also we can pass data using $state.go() and if u will help me then it will be great — Ajay Kumar, Mar 17 '16 at 10:55
for using $stateProvider i.e. $state.go() to pass params, you need to inject ui.route, you cannot achieve that using $routeProvider — Sunil Lama, Mar 17 '16 at 11:12
thanks @AlexRumbaNicked, if u would send me one simple example in plunker _where data can be_ shared then it will be great. I was trying to use the ui-route but not able to figure out how?? — Ajay Kumar, Mar 17 '16 at 11:59
You can use localStorage or $routeParams for storing and retrieve that particular id. Hope it helps! — Gurpinder, Mar 17 '16 at 12:20
@AJAYKUMAR, sure i will provide you a working plunker example using stateprovider, do upvote and mark it correct if it helps you. — Sunil Lama, Mar 17 '16 at 12:42

score 2 · Accepted Answer · edited May 23 '17 at 10:28

As you stated in the comments, you want to use $state.go() to pass your data.Using $state.go() to pass params is pretty simple as well. You need to inject ui.router in your application. I have created 2 partial views to show the passing of params where the params are passed from header.html to side.html.

Your JS will be something like below:

var app = angular.module('nested', ['ui.router']);
app.config(function($stateProvider,$locationProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
  $stateProvider.state('top', {
      url: "",
      templateUrl: "header.html",
      controller: 'topCtrl'
    })
    .state('top.side', {
      url: '/app/:obj/:name',
      templateUrl: "side.html",
      controller: 'filterCtrl'
    })
});

app.controller('topCtrl', function($scope,$state) {
          $scope.goItem = function(){
            $state.go('top.side',{obj:441,name:'alex'});
          };
      });


app.controller('filterCtrl', function($scope,$state) {
  console.log(JSON.stringify($state.params));
  $scope.params = $state.params;
      });

Here is the working PLUNKER where you will find what you need to do regarding the views, controller and script:

http://plnkr.co/edit/M1QEYrmNcwTeFd6FtC4t?p=preview

I have provided the methods to pass $stateParams using both ui-sref and $state.go(). However, if you want to share the data among all the controllers. see my answer in this question:
Share Data in AngularJs

Passing data in between controller without help of url?

1 Answers1