AngularJS Declaring Multiple Controllers in 1 app

debugcn Published at Dev

user2828701

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>

Sunil Lama

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.