AngularJS Declaring Multiple Controllers in 1 app

Question

I am having trouble declaring 2 controllers in 1 app. My guess is it's a syntax error, but not totally sure.

The error message I receive is that "people is not defined".

//this is my app file

var myApp = angular.module('myApp',[]);


 myApp.config(function($interpolateProvider) {
 $interpolateProvider.startSymbol('{[{');
 $interpolateProvider.endSymbol('}]}');
 });



   myApp.controller('controller1', function($scope) {

   var pets = [
   {animal: "dog", years: "3 Years"},
   {animal: "dog", years: "1 Years"},
   ];});


   myApp.controller('controller2', function($scope) {


   var people = [
   {name: "john", bday: "september"},
   {name: "nancy",bday: "december"},
   ];
   });

On my html page, I am simply writing some javascript that attempts to get the length of the people array.

  var totalpeople = people.length;

Note: Not sure if this is important information, but I declare my app in the html tag.

update: here some some basic pseudo code on my html page.

    <html ng-app="myApp">
    <head>
    <script>
    var totalpeople = people.length;
    </script>
    </head>
    <body>
    <div ng-controler="controller1">
    <table><tr ng-repeat="rows in pets">
    <td>{[{pets.animal}]}</td><td>{[{pets.year}]}</td>
    </tr>
    </div>
    <div ng-controler="controller2">
    <table><tr ng-repeat="rows in people">
    <td>{[{pets.name}]}</td><td>{[{pets.bday}]}</td>
    </tr>
    </div>
    <div>
    <table><tr>
    <td><script>//not actually doing this, but totalpeople goes here </script></td>
    </tr>
    </div>

    </body>

can you share you html as well, if you have plunker it will be easier — Sunil Lama
– Sunil Lama, Commented Feb 25, 2016 at 14:56
Your snippet isn't clear at all, provide a well-intentation. By the way, you can't put a comma on a last element in array. — Hitmands
– Hitmands, Commented Feb 25, 2016 at 15:00
You have not exposed people or pets in your controllers. You would want to declare them as this.people and this.pets respectively. — Martin
– Martin, Commented Feb 25, 2016 at 15:14

Sunil Lama · Accepted Answer · 2016-02-25 16:12:36Z

1

There were a lots of errors in the html as well as in the script section. Like you have mispelled the ng-controller to ng-controler. And, ng-repeat logic is all wrong.You have missing table tags and more. I don't know why you would want to interpolate {{}} to use {[{}]}.

Here is the working plunker: http://plnkr.co/edit/qs7mCrmElXGqGHdKAmNH?p=preview

    <html>
        <head>
          <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
        </head>
        <body ng-app="myApp">
        <div ng-controller="controller1">
            <table><tr ng-repeat="rows in pets">
            <td>{[{rows.animal}]}</td><td>{[{rows.years}]}</td>
                </tr>
                </table>
              Total pets:{[{count}]}
        </div>
        <div ng-controller="controller2">
        <table><tr ng-repeat="rows in people">
        <td>{[{rows.name}]}</td><td>{[{rows.bday}]}</td>
        </tr>
        </table>
        </div>
         <br>
                  Total Pets:
                 <span id="show"></span>
    <script>
    var myApp = angular.module('myApp',[]);


     myApp.config(function($interpolateProvider) {
     $interpolateProvider.startSymbol('{[{');
     $interpolateProvider.endSymbol('}]}');
     });



       myApp.controller('controller1', function($scope) {

       $scope.pets = [
       {animal: "dog", years: "3 Years"},
       {animal: "dog", years: "1 Years"}
       ];
       $scope.count = $scope.pets.length;
       document.getElementById('show').innerText=$scope.count;//use directive to achieve this,using jquery inside controller is bad practise. Used just for the purpose of demo.
});


       myApp.controller('controller2', function($scope) {
       $scope.people = [
       {name: "john", bday: "september"},
       {name: "nancy",bday: "december"},
       ];
       });
    </script>
        </body>
      </html>

edited Feb 25, 2016 at 16:12

answered Feb 25, 2016 at 15:38

Sunil Lama

4,5391 gold badge21 silver badges48 bronze badges

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

5 Comments

user2828701 Over a year ago

@ Alex Rumba this makes sense. Sorry for the sloppy pseudo code, was trying to get something up quickly. Thank you. But how about my pets.length? I still want to reference that elsewhere in my HTML further down on my page.

Sunil Lama Over a year ago

okay updated the plunker for count as well. Does that satisfy your need?

user2828701 Over a year ago

ok - So I need to make sure I reference it within my controller area. Is there anyway I can reference it outside that area?

Sunil Lama Over a year ago

well you can either using jquery inside the controller which is not recommended, but will work. You should use directive for that purpose. I will simply give you an example using javascript inside controller

Sunil Lama Over a year ago

Sharing datas in between controllers has been discussed a lot in other threads. So, i suppose you won't be asking that. :)

Matías Fidemraizer · Accepted Answer · 2016-02-25 15:00:59Z

0

On my html page, I am simply writing some javascript that attempts to get the length of the people array.

Are you sure you expect people to be available in the global scope (i.e. a property of window object)?

Now let's simplify the code as follows:

function doStuff() {
   var people = "whatever";
}

doStuff();

// Is "people" variable available?

The answer is no, it's not available because it's a doStuff function local variable.

This isn't an Angular-specific issue, but it's how variable scoping works in JavaScript (and practically in any language).

Actually, Angular tries to avoid adding garbage to the global scope and you need to use built-in data-binding to show values in your UI.

answered Feb 25, 2016 at 15:00

Matías Fidemraizer

65.1k19 gold badges132 silver badges216 bronze badges

Comments

Dan Weber · Accepted Answer · 2016-02-25 15:01:06Z

0

Why would you need to write javascript in your view to get the length?

   $scope.people = [
      {name: "john", bday: "september"},
      {name: "nancy",bday: "december"},
   ];

Can then just do people.length in your view.

Seeing the context that you are trying to call it would help though.

answered Feb 25, 2016 at 15:01

Dan Weber

1,2371 gold badge11 silver badges22 bronze badges

Collectives™ on Stack Overflow

AngularJS Declaring Multiple Controllers in 1 app

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related