Question

我是Angular.js的新手，我正在观看多元化的Angular教程，我做了老师在那些视频上所说的话：

<!Doctype>
<html lang="en" ng-app>
    <head>

    </head>
    <body>
        <h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>

        <script href="angular.min.js"></script>
        <script type="text/javascript">
            function helloWorldCtrl ($scope) {
                $scope.helloMessage = "Hello World!";
            }
        </script>
    </body>
</html>

h1应该是Hello World!，但它是{{helloMessage}}

我正在使用最新版本的Angular

在windows8上使用最新版本的Firefox

Answer 1

语法已更改，您必须将ng-app添加到正文部分，并更改脚本src，以下代码可以正常工作。

    <body ng-app>
        <h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
        <script type="text/javascript">
            function helloWorldCtrl ($scope) {

                $scope.helloMessage = "Hello World!";
            }
        </script>
    </body>

Answer 2

你应该在脚本中使用一个模块。希望以下代码可以帮助您。

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.12/angular.js" data-semver="1.3.12">  </script>
    <script src="app.js"></script>
  </head>

  <body>
   <h1 ng-controller="MainCtrl">Hello {{name}}!</h1>

    <script>      
      var app = angular.module('plunker', []);

      app.controller('MainCtrl', function($scope) {
        $scope.name = 'World';
      });   
    </script>
  </body>

</html>

Answer 3

以下是代码Plunker： -

<!DOCTYPE html>
<html data-ng-app="one">

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<body>
        <h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
        <script type="text/javascript">
        var app=angular.module("one",[]);
        app.controller("helloWorldCtrl",function  ($scope) {
                $scope.helloMessage = "Hello World!";
            });

        </script>
    </body>

</html>

我假设存在版本问题，如果您使用1.2.0以上版本的新版本，则不允许在该版本中使用全局控制器Source

Answer 4

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!Doctype>
<html lang="en" ng-app>
    <head>

    </head>
    <body>
        <h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>

        <script href="angular.min.js"></script>
        <script type="text/javascript">
            function helloWorldCtrl ($scope) {
                $scope.helloMessage = "Hello World!";
            }
        </script>
    </body>
</html>

＆＃13;

上面的代码没有任何问题，所以很明显你的版本问题是什么问题。使用nuget解决问题，以防您使用Visual Studio。

一个简单的角度代码无法正常工作

4 个答案: