javascript - AngularJS 的 HTML 页面无法正确呈现

标签 javascript html angularjs

我是 AngularJS 的新手,我正在按照书中的示例进行操作,但在一个简单示例中遇到了 HTML 呈现问题。
代码在 JSFiddle 中正常工作 - http://jsfiddle.net/2436t/
我在 Firefox 30.0 中运行它,我只得到以下输出并且在 Firebug
中没有错误 enter image description here
HTML 代码:

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script src="controllers.js"></script>
</head>
<body ng-app>
    <div ng-controller="HelloController">
        <p>{{greeting.text}}</p>
    </div>
</body>
</html>

Javascript(在外部 controllers.js 文件中):

function HelloController($scope)
{
    $scope.greeting = {text:"Hello"};
}


我确信我遗漏了一些简单的东西,但我们将不胜感激任何帮助,

肖恩

最佳答案

您缺少 ng-app="????"

您还需要在模块中注入(inject) Controller 。

这是 jsfiddle

http://jsfiddle.net/yogeshgadge/2436t/14/

HTML

<body ng-app="myApp">
    <div ng-controller="HelloController">
        <p>{{greeting.text}}</p>
    </div>
</body>

JS部分

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

app.controller('HelloController', 
  function($scope) {
    $scope.greeting = {
        text: "Hello"
    };
 }
);

关于javascript - AngularJS 的 HTML 页面无法正确呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25128930/

相关文章:

javascript - 结合请求全屏和 F11

javascript - 如何将网页向下推以适合顶部栏

css - 如何在 Angular 对话框窗口中制作滚动 div

html - 具有可扩展行的 Angular Material 表,在更改选项卡时自动扩展以 stackBlitz 示例

javascript - 联锁项目的下拉级联

javascript - 在带有 TACO 的 Visual Studio 中,推荐使用什么方式来维护 Web 托管 SPA 和混合应用程序?

php - 如何使用 td 中的 onclick 事件添加表格行

javascript - Node JS 同步事件

javascript - Js 在父级的 iframe 中从外部域打开链接

javascript - 如何设置用户上传图片并显示图片并将该图片添加到angularjs中的购物车?