Angular Tutorial; can't read from javascript

Question

Hi I'm doing the angular tutorial and I'm up to a step where I'm dynamically make a list. But when I try to make the list of items, the items won't come up

index.html

    <!doctype html>
    <html lang="en" ng-app="phonecatApp">
    <head>
    <meta charset="utf-8">
    <title>Google Phone Gallery</title>
    <link rel="stylesheet" href="css\app.css">
 <link rel="stylesheet" href="css/bootstrap.css">
 <script src="lib/angular/angular.js"></script>
  <script src="js\controllers.js"></script>
 </head>
 <body ng-controller="PhoneListCtrl">
<div class="container-fluid">
<div class="row-fluid">
  <div class="span2">
    <!--Sidebar content-->

    Search: <input ng-model="query">

  </div>
  <div class="span10">
    <!--Body content-->

   <ul class="phones">
      <li ng-repeat="phone in phones | filter:query">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
      </li>
    </ul>

  </div>
  </div>
  </div>

 </body>
 </html>

the Javascript

 'use strict';

 /* Controllers */

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

 $phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
 $scope.phones = [
 {'name': 'Nexus S',
  'snippet': 'Fast just got faster with Nexus S.'},
 {'name': 'Motorola XOOM™ with Wi-Fi',
  'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM™',
  'snippet': 'The Next, Next Generation tablet.'}
  ];
});

I originally thought it was a location problem but the location is right, I usually have problems importing javascript and I usually code the javascript on the same page but I'm trying to stop that habit. Any tips?

KayakDave · Accepted Answer · 2013-10-23 15:49:54Z

2

You don't want a $ before this line:

$phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope)

You want:

phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope)

Here's a working fiddle with this change: http://jsfiddle.net/rbQry/

Edit: Sounds also like this <script> not point to angular:

<script src="lib/angular/angular.js"></script>

Try instead using:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>

edited Oct 23, 2013 at 15:49

answered Oct 23, 2013 at 15:30

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

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

6 Comments

user2809321 Over a year ago

hmm weird I did all the changes and I still don't get the items of the list

KayakDave Over a year ago

Did you get the changes by @ozandlb and @tymeJV? Those wouldn't show up in the fiddle since it handles the includes itself

user2809321 Over a year ago

yes I did, when I an the console is said something like Uncaught ReferenceError: angular is not defined

KayakDave Over a year ago

Good team effort. You can switch back to a local copy at some point if you want, you'll just need to figure out where it lives in your directory structure. Or using the CDN is fine- it's generally even better when you're in production.

user2809321 Over a year ago

how did you find that cdn btw? I'm actually encountering a similar problem again

|

tymeJV · Accepted Answer · 2013-10-23 15:27:35Z

2

Slash is going the wrong way

"js\controllers.js"

to

"js/controllers.js"

answered Oct 23, 2013 at 15:27

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Comments

ozandlb · Accepted Answer · 2013-10-23 15:40:13Z

2

In addition to responses by tymeJV, 11684 and KayakDave,

<link rel="stylesheet" href="css\app.css">

should be

<link rel="stylesheet" href="css/app.css">

answered Oct 23, 2013 at 15:40

ozandlb

1,0242 gold badges10 silver badges23 bronze badges

Comments

11684 · Accepted Answer · 2013-10-23 15:33:47Z

1

tymeJV is probably correct, but I spotted something else.

You first initialize your app like this:

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

But then, you try to reference it as $phonecatApp, which is, (from JS' perspective) something completely unrelated: a non-initialized (and non-declared) symbol. By removing the $ sign (and changing that slash) you should be fine.

A note: this kind of errors can be catched real easy with the console. In browsers like Firefox, Chrome and Safari (not IE) you can ctrl-click (or right-click for Windows) somewhere on the page which will bring up the inspect element pane (which is very useful as well). There should be an option console. If you click it you find a REPL for JavaScript and a list of all occured errors, complete with line number.

Ah, it seems KayakDave beat me. I'll leave the answer here for the note.

answered Oct 23, 2013 at 15:33

11684

7,52812 gold badges52 silver badges74 bronze badges

3 Comments

user2809321 Over a year ago

oh thankts for the tips, but still doesn't work. when I ran the console is said something in my javascript Uncaught ReferenceError: angular is not defined, not sure what it means.

KayakDave Over a year ago

Make sure your angular is really at: lib/angular/angular.js or try just getting it from the CDN: <script src="ajax.googleapis.com/ajax/libs/angularjs/1.0.8/…>

11684 Over a year ago

@user2809321 Have you changed that slash already? Are you sure that file is really there on your filesystem?

Collectives™ on Stack Overflow

Angular Tutorial; can't read from javascript

4 Answers 4

6 Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related