Question

我试图将hello world输出到屏幕上，但我得到的只是{{Hello World}}。我刚刚开始使用角度，这是我的第一个应用程序。我有一个js文件来声明应用程序并将其附加到HTML标记，但我仍有问题吗？有什么想法吗？

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <title>Bootstrap 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript" src="angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link href="index.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/reset.css">
  </head>

  <body ng-controller="bodyController">
    <div class="navbar navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">Tech Site</a>
        </div>
        <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Specs and Features</a></li>
            <li><a href="#">How To Videos</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class = "caret"></b></a>
              <ul class="dropdown-menu ">
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Google+</a></li>
                <li><a href="#">Instagram</a></li>
              </ul>
            </li>
            <li></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">      
      <div class="row">
        <div class="col-md-2 " ></div>
        <div class="col-md-8 " >
          {{Hello World}}     
        </div> 
        <div class="col-md-2 " ></div>  
      </div>
    </div>

    <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </body>
</html>

app.js：

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

app.controller('bodyController', function(){

});

Answer 1

{{Hello World}}是一个无效的表达式，可能会出现角度错误。要使它成为有效语句，请将其包装在qoutes中以将其转换为字符串{{"Hello World"}}

＆＃13;

var app = angular.module('app', []);
app.controller('bodyController', function() {
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link href="index.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="css/reset.css">
</head>
<body ng-controller="bodyController">

  <div class="navbar navbar-inverse navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Tech Site</a>
      </div>
      <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Specs and Features</a>
          </li>
          <li><a href="#">How To Videos</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class = "caret"></b></a>
            <ul class="dropdown-menu ">
              <li><a href="#">Twitter</a>
              </li>
              <li><a href="#">Facebook</a>
              </li>
              <li><a href="#">Google+</a>
              </li>
              <li><a href="#">Instagram</a>
              </li>
            </ul>
          </li>
          <li>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-2 "></div>
      <div class="col-md-8 ">
        {{"Hello World"}}

      </div>
      <div class="col-md-2 "></div>
    </div>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</body>
</html>

＆＃13;

Answer 2

我认为您缺少指向app.js javascript文件的链接。

Answer 3

我使用您的代码为您准备好了：http://plnkr.co/edit/QqfkHsZ8A45KFq768Xrb?p=preview

1）修复不是使用Hello World（空格！）作为$ scope变量，而是使用一个单词 - {{HelloWorld}}。模板{{}}括号内的值正在通过angular进行评估，因为JS中的变量名称中没有空格，声明无法工作。然后在控制器中为它分配一些值，如下所示：

$scope.HelloWorld = 'foo bar';

2）要在模板（视图）中输出内容，必须在控制器中声明它。即分配$scope.HelloWorld一个值，在我的示例中仅为'foo bar'，但例如可以为$scope.HelloWorld = 'Hello World'。

AngularJS导入无法正常工作

3 个答案: