AngularJS tutorial isn't reading expressions

Question

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.

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. — realisation
– realisation, Commented Jun 25, 2014 at 14:48

realisation · Accepted Answer · 2014-06-29 22:20:27Z

1

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.

answered Jun 29, 2014 at 22:20

realisation

6386 silver badges18 bronze badges

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

Comments

Jarema · Accepted Answer · 2014-06-25 05:16:27Z

0

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:

You are not including properly angularjs.js files, and angular cant bootstrap Your code.
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.

answered Jun 25, 2014 at 5:16

Jarema

3,6262 gold badges20 silver badges30 bronze badges

3 Comments

realisation Over a year ago

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.

Jarema Over a year ago

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 Over a year ago

You should try linking CDN angular source instead of local one and see if it helps.

Jeetendra Chauhan · Accepted Answer · 2014-06-25 05:26:50Z

0

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

answered Jun 25, 2014 at 5:26

Jeetendra Chauhan

1,9772 gold badges15 silver badges21 bronze badges

6 Comments

realisation Over a year ago

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

realisation Over a year ago

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?

Jeetendra Chauhan Over a year ago

@Femtosecond have you installed bower and "bower components", i think you are missing them.

realisation Over a year ago

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?

realisation Over a year ago

Perhaps I am missing the components. Checking now!

|

Collectives™ on Stack Overflow

AngularJS tutorial isn't reading expressions

3 Answers 3

Comments

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related