current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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?

share|improve this question
add comment

4 Answers 4

up vote 2 down vote accepted

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>
share|improve this answer
    
hmm weird I did all the changes and I still don't get the items of the list –  user2809321 Oct 23 '13 at 15:42
    
Did you get the changes by @ozandlb and @tymeJV? Those wouldn't show up in the fiddle since it handles the includes itself –  KayakDave Oct 23 '13 at 15:44
    
yes I did, when I an the console is said something like Uncaught ReferenceError: angular is not defined –  user2809321 Oct 23 '13 at 15:46
1  
ah thanks that fixed it right up –  user2809321 Oct 23 '13 at 15:51
    
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. –  KayakDave Oct 23 '13 at 15:53
show 2 more comments
up vote 2 down vote

Slash is going the wrong way

"js\controllers.js"

to

"js/controllers.js"
share|improve this answer
add comment
up vote 2 down vote

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">
share|improve this answer
add comment
up vote 1 down vote

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.

share|improve this answer
    
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. –  user2809321 Oct 23 '13 at 15:43
1  
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/…; –  KayakDave Oct 23 '13 at 15:46
    
@user2809321 Have you changed that slash already? Are you sure that file is really there on your filesystem? –  11684 Oct 23 '13 at 15:49
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.