How to pass data to different page using AngularJS?

Question

Quite new to angularJS and trying to pass information from one page to another.

Currently this controller displays a list of customers in a table format, with one column being the "More info".

 ** adminSearch.html **
 <div ng-controller="adminSearch">
 ...    
 <tr ng-repeat-start="custObj in customers | filter:custSearch">                         
    <td> {{custObj.id}} </td>
    <td> {{custObj.name}} </td>
    <td> <a href="#"> More Info </a></td>
 </tr> 
 ...

Controller:

** adminSearch.js **
app.controller('adminSearch', ['$scope', function($scope) {         
$scope.customers = [{id:1, name:'John', email:'John@example.com', phone:'555-1276', account:123456, mylH: '1'},
             {id:2, name:'Mary', email:'Mary@example.com', phone:'800-BIG-MARY', account:123456, mylH: '1'},
             {id:3, name:'Mike', email:'Mike@example.com', phone:'555-4321', account:123456, mylH: '0'}];}]);

What I want is when the user clicks "More Info" from the table for one of the customer, it should go to a new page displaying all the information about that customer...

Not sure what the new page needs but I am guessing it needs a new controller:

  ** customerInfo.html **
  <div ng-controller="customerInfo"> ... </div>

  ** customerInfo.js **
  app.controller('customerInfo', ['$scope', function($scope) {
  }]);

Thanks for your help is advance!

You might want to write a service and share data across the page using service's getter setter methods. — Indra Uprade, Jun 30 '16 at 13:33
You create a directive. In the directive you define your scope, and you call the directive from your html passing data as attributes. [link] [https://docs.angularjs.org/guide/directive ] — Josué Zatarain, Jun 30 '16 at 13:33

score 1 · Accepted Answer · answered Jun 30 '16 at 13:37

1

from what i understand is that you need to navigate from one html file to another html file and pass the customer details for that page. then i would suggest to use ui router to navigate through pages. please refer this link https://scotch.io/tutorials/3-simple-tips-for-using-ui-router

answered Jun 30 '16 at 13:37

Sachila Ranawaka

39,756
7
56
80

1

Thanks, got it working now, that link helped me a lot. I have one issue now though. When I am displaying the variables using
{{ name }}
, it works fine but if i refresh the page, i just see plain text "{{ name }}". Any suggestions on that issue? – Vipresh Jul 06 '16 at 15:07
Can u check the browser console and post the error – Sachila Ranawaka Jul 06 '16 at 15:31

How to pass data to different page using AngularJS?

1 Answers1

{{ name }}