why my angular code doesnt work?

Question

hey i am new with angular and i cant get it working i made a new project where i put the angular.min.js file to and this code doesnt work and i dont know why it shows nothing please help me understand why.

(function() {
  var app = angular.module('list', []);

app.controller('peopleListCtrl', function(){
  this.persons = plists;
});

var plists = [
             { name: 'alon', job: 'web dev', home:'nir tzvi' },
{ name: 'ben', job: 'katbamflighter', home:'nir tzvi' },
{ name: 'shiraz', job: 'dentist assistant', home:'hadera west' }
];
})();

<!DOCTYPE html>
<html ng-app="list">
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="peopleListCtrl as ppl">
<br />
<div ng-repeat="people in ppl.persons">
<h3>
 {{people.name}}
{{people.job}}
{{people.home}}
</h3>
  </div>
    <input type="text" />
<br />
</body>
  </html>

score 3 · Answer 1 · edited May 23 '17 at 11:44

Refer this for clarifications $scope vs this in AngularJS controller

see working code.

(function() {
  var app = angular.module('list', []);

app.controller('peopleListCtrl', ['$scope',function($scope){
  $scope.persons = plists;
}]);

var plists = [
             { name: 'alon', job: 'web dev', home:'nir tzvi' },
{ name: 'ben', job: 'katbamflighter', home:'nir tzvi' },
{ name: 'shiraz', job: 'dentist assistant', home:'hadera west' }
];
})();

<!DOCTYPE html>
<html ng-app="list">
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="peopleListCtrl">
<br />
<div ng-repeat="people in persons">
<h3>
 {{people.name}}
{{people.job}}
{{people.home}}
</h3>
  </div>
    <input type="text" />
<br />
</body>
  </html>

Oh, I didn't see your edition. Yes, I think `$scope` vs. `this` is the key to understand the issue ;) — Óscar Gómez Alcañiz, Nov 17 '15 at 13:55

score 1 · Accepted Answer · answered Nov 17 '15 at 13:54

In addition to the answers above, if you really want to use the controller as syntax in order to use methods and variables belonging to the controller object as opposed as the classical $scope injection, you need to use a more modern version of AngularJS I am afraid.

Here's your code using AngularJS v1.4.7: http://plnkr.co/edit/FIrK0o8493k3VjDBSNtM?p=preview

Hope it adds some clarification!

score 0 · Answer 3 · answered Nov 17 '15 at 13:48

0

Try to replace this.persons with $scope.persons in the controller, the $scope will make sure you can use the data in your template.

app.controller('peopleListCtrl',['$scope', function($scope){
  $scope.persons = plists;
});

answered Nov 17 '15 at 13:48

KnvpBE

11
3

score 0 · Answer 4 · answered Nov 17 '15 at 13:51

Your ng-controller should just be peopleListCtrl not peopleListCtrl as ppl in your HTML.

You will also need to change this.persons to $scope.persons in your controller.

Then change your HTML to this :

<!DOCTYPE html>
<html ng-app="list">
<head>
 <script type="text/javascript"     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js">    </script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="peopleListCtrl as ppl">
<br />
<div ng-repeat="people in persons">
<h3>
 {{people.name}}
{{people.job}}
{{people.home}}
</h3>
  </div>
   <input type="text" />

why my angular code doesnt work?

4 Answers4