Javascript AngularJS导入无法正常工作_Javascript_Angularjs

Javascript AngularJS导入无法正常工作

javascript angularjs

Javascript AngularJS导入无法正常工作,javascript,angularjs,Javascript,Angularjs,我试图将hello world输出到屏幕上，但得到的只是{{{hello world}}。我刚刚开始使用angular，这是我的第一个应用程序。我有一个js文件来声明应用程序，并将其附加到HTML标记，但仍然存在问题？有什么想法吗 <!DOCTYPE html> <html ng-app="app"> <head> <title>Bootstrap 3</title> <meta name="viewport

我试图将hello world输出到屏幕上，但得到的只是{{{hello world}}。我刚刚开始使用angular，这是我的第一个应用程序。我有一个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>

{{Hello World}

是一个无效的表达式，可能会产生角度错误。要使其成为有效语句，请将其包装在qoutes中，以将其转换为字符串

{{“Hello World”}

var-app=angular.module（'app'，[]）；
app.controller（'bodyController'，function（）{
});

引导程序3




















{{“你好，世界”}
我认为您缺少指向app.js javascript文件的链接。
我用您的代码为您提供了一个链接：
1） 修复方法不是将Hello World
（带空格！）用作$scope变量，而是作为一个单词-{{HelloWorld}
。模板{{}}括号内的值由angular计算，因为JS中变量名中不能有空格，所以声明无法工作。
然后在控制器中为其分配一些值，如下所示：
$scope.HelloWorld = 'foo bar';

2） 要在模板（视图）中输出某些内容，必须在控制器中声明它。例如，为$scope.HelloWorld
分配一个值，在我的示例中，它只是'foo bar'
，但可以是$scope.HelloWorld='Hello World'
。在您喜爱的浏览器中搜索如何使用调试工具。显示错误消息有助于调试问题。在bodycontroller中添加$scope.greeting='Hello World'；在html大括号中，将其更改为{{greeting}}。我还将删除jQuery引用，并尝试在没有它的情况下构建应用程序。
$scope.HelloWorld = 'foo bar';