How to use same controller in different ngRoute pages

Question

How to use same controller in different ngRoute pages

91 views Asked by superuser At 11 August 2019 at 07:15

Hi I want same controller in different pages. How to pass the object to different pages. Below is my sample code.

Page1.html

<body ng-app="myapp" ng-controller="studentController">
  <div>
    <table border="0">
      <tr>
        <td>
          <table>
            <tr>
              <th>Name</th>.
              <th>Marks</th>
            </tr>
            <tr ng-repeat="subject in student.subjects">
              <td> <a href="#Page2">{{ subject.name }}</a></td>
              <td>{{ subject.marks }}</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>

  <div ng-view></div>
</body>

Script.js

var app = angular.module("myapp", ["ngRoute"]);

app.config(function ($routeProvider) {
  $routeProvider
    .when("/Page1", {
      template: '<h1>Page 1</h1>'
    })
    .when("/Page2", {
      templateUrl: 'Page2.html',
      controller: 'studentController'
    })
    .otherwise({
      template: '<h1>note found</h1>'
    })
});

app.controller('studentController', function ($scope) {
  $scope.student = {
    firstName: "AAA",
    lastName: "ZZZ",
    fees: 500,
    subjects: [
      { name: 'Physics', marks: 70 },
      { name: 'Chemistry', marks: 80 },
      { name: 'Math', marks: 65 },
      { name: 'English', marks: 75 },
      { name: 'Computers', marks: 67 }
    ],
  };
});

Page2.html

<body ng-app="myapp" ng-controller="studentController">
  <h1>Hello</h1>
  <h2>
    subject name -  {{ subject.name }}
  </h2>
</body>

How to pass subject object from page 1 to page 2.

I define same controller in route config.

Is there anything do i need to define?

Original Q&A

There are 2 answers

**ChrisY** · Answer 1 · 2019-08-11T07:34:17+00:00

You can use a service for that. A service is a singleton in AngularJs, so there is only one instance of it, which makes it a perfect fit if you wanna share data over different controllers

app.service('studentService', function() {
   this.student = {
        firstName: "AAA",
        lastName: "ZZZ",
        fees: 500,
        subjects: [
            { name: 'Physics', marks: 70 },
            { name: 'Chemistry', marks: 80 },
            { name: 'Math', marks: 65 },
            { name: 'English', marks: 75 },
            { name: 'Computers', marks: 67 }
        ],
  };

  this.getSubjects = function () {
    return this.student.subjects;
  };
});

You can then inject it in your controller(s):

app.controller('studentController', function ($scope, studentService) {
    $scope.subjects = studentService.getSubjects();

});

**georgeawg** · Answer 2 · 2019-08-11T13:23:02+00:00

How to pass subject object from page 1 to page 2.

Instead of passing the object, pass an index.

Use an index in the URL in the ng-repeat:

<tr ng-repeat="subject in student.subjects">
  <td> <a href="#Page2/{{$index}}">{{ subject.name }}</a></td>
  <td>{{ subject.marks }}</td>
</tr>

Define the route with an index parameter:

.when("/Page2/:index", {
  templateUrl: 'Page2.html',
  controller: 'subjectController'
})

Subject controller

.controller('SubjectController', function($scope, $routeParams) {
     $scope.params = $routeParams;
     $scope.subject = $scope.subjects[$routeParams.index];
})

Page2.html

<div>
  <h1>Subject index {{params.index}}</h1>
  <h2>
    subject name -  {{ subject.name }}
  </h2>
</div>

The controller in the ng-view element will inherit the data from the controller instantioated in the main app.

TechQA.

How to use same controller in different ngRoute pages

There are 2 answers

Subject controller

Page2.html

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ANGULARJS

Related Questions in ANGULARJS-NG-ROUTE

Popular Questions

Popular Tags

Trending Questions