AngularJS教程不是在阅读表达式

时间:2014-06-25 04:20:18

标签: angularjs

我正在尝试为v1.2.12执行AngularJS教程,我在本地主机上获得的内容与他们在教程本身上的实时演示有很大不同。

主要是,从刚刚开始的几个步骤开始,它不是在阅读我的表达式。它们就是纯文本,就像它们被剪切并粘贴代码一样。

例如,在第0步中,我的本地主持人正在给我

此处没有{{'尚未' +'!'}}

虽然网站上的现场演示提供了

还没有!

其他步骤似乎也是如此。出于某种原因,步骤#1的工作方式与在网页上的工作方式相同。

这是什么?我忘了安装Angular的某些部分吗?或者是什么?教程是搞砸了吗?

这是一个仍然错误的代码示例:

<!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>

我使用了git checkout -f step-5来代替这个,而不是像我在演示中那样给我一长串手机,我只看到{{phone.name}}和{{phone.snippet}当我在本地服务器上运行index.html时。

3 个答案:

答案 0 :(得分:1)

回答!

NPM安装不允许凉亭进行正确的安装。

这是通过全局安装Bower并在保存教程的正确目录中从命令行执行“bower install”来解决的。

答案 1 :(得分:0)

可能你错过了一些东西。所有基本的角度教程都有效。不幸的是,没有代码就无法给出真正的理由。我们只能猜测:

  1. 您未正确包含angularjs.js文件,并且角度无法引导您的代码。

  2. 您试图通过打开html文件直接在浏览器中本地运行您的html,而不是通过任何服务器实例(如apache或nodejs)提供。

  3. 由于某些安全限制,此类解决方案不适用于包含脚本。使用服务器,或者从磁盘链接脚本文件,尝试使用CDN角度链接。

    3。你的角度代码是错误的。

答案 2 :(得分:0)

这是demo希望这会对您有所帮助

<!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>

我认为你忘了添加&#34;角度js&#34;或ng-app指令