Question

我的任务是使用AngularJS在浏览器中显示Hello, Angular!。

这是我的HTML：

<!DOCTYPE html>
<html ng-app>
    <head>
        <title>Introduction to AngularJS Application</title>
        <script src="Scripts/MyScripts/Example01Scripts.js"></script>
    </head>
    <body ng-controller="MainController">
        <h1>{{message}}</h1>
    </body>
</html>

这是我的JavaScript：

/// <reference path="../angular.js" />
var MainController = function ($scope) {
    $scope.message = "Hello, Angular!";
};

这就是我得到的：

<h1>{{message}}</h1>

这是我的预期结果：

<!DOCTYPE html>
<html ng-app>
    <head>
        <title>Introduction to AngularJS Application</title>
        <script src="Scripts/MyScripts/Example01Scripts.js"></script>
    </head>
    <body ng-controller="MainController">
        <h1>Hello, Angular!</h1>
    </body>
</html>

插值无法正常运行。为什么会这样，我该如何解决？

Answer 1

在HTML上，您在ng-app指令上缺少Angular源代码和应用名称。

在JS上你错过了模块声明。

HTML应该像

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <title>Introduction to AngularJS Application</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="Scripts/MyScripts/Example01Scripts.js"></script>
</head>
<body ng-controller="MainController">
    <h1>{{message}}</h1>
</body>
</html>

你的Example01Scripts.js应该是这样的：

angular.module('MyApp', []).controller('MainController', function($scope){
    $scope.message = "Hello, Angular!";
});

Answer 2

看起来模块丢失了。已经创建了一个可以完成您想要的测试脚本。

Code example here

Answer 3

我已经使用了您的代码并对其进行了更新。您在ng-app中缺少应用名称。点击Run code snippet查看是否有效。

＆＃13;

angular.module('myApp', []).controller('MainController', function($scope){
    $scope.message = "Hello, Angular!";
});

＆＃13;

<html ng-app="myApp">
<head>
    <title>Introduction to AngularJS Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MainController">
    <h1>{{message}}</h1>
</body>
</html>

＆＃13;

AngularJS页面未加载到新手

3 个答案: