AngularJS Address Book

Question

I just started learning AngularJS and I'm having some trouble with an Address Book app.

From what I can tell, the syntax is correct but the directives are not displaying the information from my scripts.js file. I tried using "use strict" and declaring ng-app as "AddressBook" but it is only showing the directives on screen and not the data.

I'm guessing I'm missing something but I have no idea what.

Here's my code: (AngularJS is now updated)

Old AngularJS Code:

function PeopleController($scope) {
     "use strict";
     $scope.people = [
          {name: "Dani Moss", phone: "1234567890", city: "Richmond"},
          {name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
          {name: "Little John", phone: "4567853432", city: "Los Angeles"},
          {name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
     ];
}

New Angular code:

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

addressBook.controller('PeopleController', ['$scope', function PeopleController($scope) {
     "use strict";
     $scope.people = [
          {name: "Dani Moss", phone: "1234567890", city: "Richmond"},
          {name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
          {name: "Little John", phone: "4567853432", city: "Los Angeles"},
          {name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
     ];
}]);

<!DOCTYPE html>
<html ng-app="AddressBook">

<head>
     <meta charset="UTF-8">
     <title>Address Book</title>
</head>

<body ng-controller="PeopleController">
     <h1>Address Book</h1>
     <div>
          <div ng-repeat="person in people">
               <div>{{person.name}}-{{person.phone}}</div>
               <span>{{person.city}} </span>
          </div>
     </div>
     <!--Javascript-->
     <script src="angular.min.js" type="text/javascript"></script>
     <script src="scripts.js" type="text/javascript"></script>
</body>

</html>

Don't know why this was marked as a duplicate for $inject:modulerr question? The problem is you're doing `person in people` when it should be `person in $scope.people` — George, Apr 05 '16 at 16:25
@GeorgeLee my friend could you see edit in question? & OP is following older way of declaring controller.. do look at linked answer.. I know title is different, but answer content is the correct.. — Pankaj Parkar, Apr 05 '16 at 16:26
I'm not sure how this is a duplicate either. I looked at the other answer and have no idea how to even read what's going on. When I mentioned beginner I really meant beginner. lolz I tried using person in $scope.people and it sadly didn't work. Am I missing something else somewhere? Is the "use strict"; the problem? — Dani Moss, Apr 05 '16 at 16:27
@DaniMoss did you looked at duplicate linked answer? and what console error you are getting? If you want I'll reopen it.. but I'm sure you gonna get same answers either.. — Pankaj Parkar, Apr 05 '16 at 16:29
@DaniMoss I can see what the other guy is saying (Can't tag him for some reason) is saying, he thinks you're not adding the controller to the app — George, Apr 05 '16 at 16:29
@PankajParkar I have no idea what the post is talking about that you linked to. Is the a simpler way to explain what I'm doing wrong that can help with my question? The book I'm using (AngularJS Web Application Development Blueprints) says to declare the controller in this way. Not sure what the new way is since I just started learning today. — Dani Moss, Apr 05 '16 at 16:30
@DaniMoss I removed that duplicate flag..still I'd say do read up on it & that answer has clear mentioned what you had missed.. — Pankaj Parkar, Apr 05 '16 at 16:32
@PankajParkar thanks for removing the duplicate flag. I am getting that same error but I don't understand how to create a controller yet. Which is probably why I'm really confused — Dani Moss, Apr 05 '16 at 16:35
@GeorgeLee I thought I did add the controller to the app. It's in a separate code file (scripts.js) and is being pulled in with my other JS. Is the controller set up wrong? — Dani Moss, Apr 05 '16 at 16:38
@DaniMoss do readup on basis first from [angular docs](https://docs.angularjs.org/guide/controller) — Pankaj Parkar, Apr 05 '16 at 16:38
@PankajParkar You really should have left the duplicate link on here. — Matthew Green, Apr 05 '16 at 16:40
@MatthewGreen thanks, I did missed to add, duplicate answer link is [here](http://stackoverflow.com/a/28728380/2435473) — Pankaj Parkar, Apr 05 '16 at 16:42

score 0 · Accepted Answer · edited Apr 05 '16 at 16:54

Possible reason I have found is your are using latest angular script but you have been using old method. global controller functions encouraged poor practices, so angular resolved to disable this behavior by default from 1.3.

<!DOCTYPE html>
<html ng-app="AddressBook">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>



<body ng-controller="PeopleController">
     <h1>Address Book</h1>
     <div>
          <div ng-repeat="person in people">
               <div>{{person.name}}-{{person.phone}}</div>
               <span>{{person.city}} </span>
          </div>
     </div>
<script>

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

function PeopleController($scope) {
     //"use strict";
     $scope.people = [
          {name: "Dani Moss", phone: "1234567890", city: "Richmond"},
          {name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
          {name: "Little John", phone: "4567853432", city: "Los Angeles"},
          {name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
     ];
}

</script>
</body>
</html>

That is exactly what I needed! Thank you! So from now on I will make sure to have the AngularJS scripts included in the HTML at the bottom of the code. That makes a lot of sense now. Again, thank you so much! — Dani Moss, Apr 05 '16 at 16:50

score 0 · Answer 2 · edited Apr 05 '16 at 17:02

angular.module('AddressBook', []);  

angular.module('AddressBook').controller('PeopleController', PeopleController);
function PeopleController($scope) {
     "use strict";
     $scope.people = [
          {name: "Dani Moss", phone: "1234567890", city: "Richmond"},
          {name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
          {name: "Little John", phone: "4567853432", city: "Los Angeles"},
          {name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
     ];
}

<!DOCTYPE html>
<html ng-app="AddressBook">

<head>
     <meta charset="UTF-8">
     <title>Address Book</title>
</head>

<body ng-controller="PeopleController">
     <h1>Address Book</h1>
     <div>
          <div ng-repeat="person in people">
               <div>{{person.name}}-{{person.phone}}</div>
               <span>{{person.city}} </span>
          </div>
     </div>
     <!--Javascript-->
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
</body>

</html>

Joe Lloyd · Answer 3 · 2016-04-05T17:12:46.847

0

Factories are Awesome

First off don't set data in your controller, I know its probably just a test but put it into a factory to replicate your http call.

.factory ('yourFactory', [ function () {
    return {
        getStuff: function () {
            return //your data
        };
    }
 }]);

Passing Data

Then in your controller get the factory data and set the scope

.controller ('yourController', [ '$scope', 'yourFactory', function  ($scope, yourFactory) {
    yourFactory.getStuff ().then (function (res) {
        $scope.people = res.data;
    });
}]);

In Conclusion

Having a proper data flow can solve data related problems. Doing a console.log at every step lets you see the resultant data in its current form. Use this to your advantage when trying to get data out of a variable.

Best of luck

Disclaimer code written on mobile phone from memory.

edited Apr 05 '16 at 17:12

answered Apr 05 '16 at 17:05

Joe Lloyd

19,471
7
53
81

Wow! That's really awesome you were able to do that from memory AND on your mobile phone. All the points for you dude! But seriously, thanks for the info! This is something I will definitely reference as I go along and learn more about how AngularJs works. – Dani Moss Apr 05 '16 at 17:14
@DaniMoss haha, no problem. I also have a couple of github repos that show this kind of thing in action they are not finished but might be a nice place to look. The one I'm working on now is [MEANBoilerPlate](https://github.com/joeLloyd/MEANBoilerPlate). I started mostly with the backend(express mongo node) but theres a little angular in the front. – Joe Lloyd Apr 05 '16 at 17:23

score 0 · Answer 4 · answered Apr 05 '16 at 17:30

In HTML file, you have used <html ng-app="AddressBook"> and in script file, you have used

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

You have to use the same name in both place. So you can fix this by changing your script file

var addressBook = angular.module('AddressBook', [])

AngularJS Address Book

4 Answers4

Factories are Awesome

Passing Data

In Conclusion