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 0 down vote favorite

I'm trying to do the AngularJS tutorial here for v1.2.12, and what I'm getting on my localhost is much different from the live demo they have on the tutorial itself.

Mainly, just starting with the first couple steps, it is not reading my expressions. They are just there in plain text, like they're cut and paste out of the code.

For instance in step 0, my local host is giving me

Nothing here {{'yet' + '!'}}

while the live demo on the site gives

Nothing here yet!

The same seems to happen for other steps. For some reason step #1 works just like it does on the webpage.

What's up with this? Did I forget to install some part of Angular? Or what? Is the tutorial just messed up?

Here's an example of the code that still does it wrong:

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="bower_components/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <!--Sidebar content-->

        Search: <input ng-model="query">
        Sort by:
        <select ng-model="orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>

      </div>
      <div class="col-md-10">
        <!--Body content-->

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

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

</body>
</html>

I used git checkout -f step-5 for this one, and instead of giving me a long list of phones like it does in the demo, I just see {{phone.name}} and {{phone.snippet}} when I run index.html on a local server.

share|improve this question
    
Any console errors? Did you add ng-app to your html tag? –  Ricky Mutschlechner Jun 25 at 4:21
3  
Could you at least post your code? –  Kemal Fadillah Jun 25 at 4:22
    
Don't know why you start criticizing the tutorials, even at the start of your learning of angularjs. Atleast put in a snippet like Kemal said so that we can see. Also if you want to check, copy-paste the whole snippet from the demo and dont forget to include the angularjs script also. Some of the demo won't work (unlikely to happen), but that won't happen at this basic level.. –  Kop4Lyf Jun 25 at 4:48
    
Uh really? I "am criticizing the tutorials"? The code is exactly as the tutorials say, and it does the same thing at multiple steps even though I use the "git checkout -f step-#". I am just trying to find out what's wrong. –  Femtosecond Jun 25 at 14:48
add comment

3 Answers

up vote 1 down vote

Answered!

The NPM install was not allowing bower to do the proper installs.

This was fixed by installing Bower globally, and executing "bower install" from the command line while in the proper directory that the tutorial is saved in.

share|improve this answer
add comment
up vote 0 down vote

Probably You are missing something. All basic angular tutorials works. Unfortunately without code its impossible to give a real reason. We can only guess that:

  1. You are not including properly angularjs.js files, and angular cant bootstrap Your code.

  2. You are trying to run Your html locally straight via browser by opening html file, not by serving it by any server instance (like apache or nodejs).

Such solution will not work whrn including scripts because of some safety restrictions. Use a server, or instead linking script file from disk, try using CDN angular links.

3 . Your angular code is wrong.

share|improve this answer
    
Hey, I don't know what it could be. I use git checkout -f step-#soandso, so my code is perfect just as the tutorial has it, and it still doesn't work. I'm using karma to host the local server, too. I had to use Karma for that one by doing "sudo npm start", because typing ./scripts/web-server.js into a new terminal window gave a bash error No Such File or Directory. –  Femtosecond Jun 25 at 14:55
    
Im on phone, so i may be innacurate but... did bower install work properly? It should run automatically, but for me it once failed silently (on npm install). Try bower install and check. –  Jarema Jun 25 at 15:52
    
You should try linking CDN angular source instead of local one and see if it helps. –  Jarema Jun 25 at 22:16
add comment
up vote 0 down vote

this is a demo hope this will help you

<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 Nothing here {{'yet' + '!'}}
</body>
</html>

i think you forget to add "angular js" or ng-app directive

share|improve this answer
    
My code is exactly as the tutorial has it, I'm using "git checkout -f step-#soandso" This is the tutorial -> code.angularjs.org/1.2.9/docs/tutorial/step_00 –  Femtosecond Jun 25 at 14:51
    
Weirdly, the code taken from the tutorial is giving me the same thing on that demo site you posted here. But why would they give the live demo with a working version when the code itself doesn't do that? –  Femtosecond Jun 25 at 15:21
    
@Femtosecond have you installed bower and "bower components", i think you are missing them. –  Jeetendra Chauhan Jun 26 at 5:06
    
I think I have... I did it all separately, and I did it w/ NPM install. Maybe if I do it separately, it doesn't work for some reason? Is there an order one must do it in? –  Femtosecond Jun 26 at 19:39
    
Perhaps I am missing the components. Checking now! –  Femtosecond Jun 26 at 20:02
show 1 more 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.