Question

我是AngularJS的新手，所以我一直在做一些教程并关注一些示例视频。我遇到了一个非常简单的应用程序，但我无法在浏览器中运行它。谁能告诉我我的代码有什么问题？

<!DOCTYPE html> 
<html ng-app="hello"> 
<head lang="en"> 
    <title>My HTML 5 Page</title> 
</head> 
<body>

<h1>{{hello}}</h1> 
<input type="text" ng-model="hello" />

<script type="text/javascript" 
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js" />

</body>

</html>

我是否必须从网络服务器运行此操作？我可以不在浏览器中运行吗？我尝试了两种方式，但两种方式都不适合我。我最后得到了一个很大的{{hello}} -

{{你好}}

并且没有文本输入框，绝对没有绑定。我是否需要所有其他依赖项？脚本标记行不应包含我需要的所有内容吗？

我没有任何模块或其他任何东西。只是一个包含这些代码行的HTML文件。

感谢大家们对这个谜团的任何见解。

Answer 1

您应该检查控制台是否存在错误，这些错误可能会告诉您类似未定义模块hello的内容。

只有当您的脚本运行angular.module("hello", [])或者只是删除hello并且只使用ng-app而没有参数时，上述内容才有效。

Answer 2

原来这是两件事......

我需要删除＆＃34;你好＆＃34;来自ng-app
我无法自行关闭脚本标记。最后有效的代码：

<!DOCTYPE html> 
<html ng-app>
<head lang="en"> 
    <title>My HTML 5 Page</title> 
</head> 
<body>

<h1>{{hello}}</h1> 
<input type="text" ng-model="hello" />

<script type="text/javascript" 
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js">
</script>

</body>

</html>

Answer 3

<html ng-app="page"> 
<head lang="en"> 
    <title>My HTML 5 Page</title> 
</head> 
<body>
<div ng-controller="PageController as page" >
    <h1>{{page.product.message}}</h1> 
    <input type="text" ng-model="hello" />
</div>
</body>

</html>
    <script type="text/javascript" src="lib/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</html>


code for app.js 

<html ng-app="page"> 
<head lang="en"> 
    <title>My HTML 5 Page</title> 
</head> 
<body>
<div ng-controller="PageController as page" >
    <h1>{{page.product.message}}</h1> 
    <input type="text" ng-model="hello" />
</div>
</body>

</html>
    <script type="text/javascript" src="lib/angular.min.js"></script>
    <script type="text/javascript" src="js/app1.js"></script>
</html>

AngularJS示例不起作用

{{你好}}

3 个答案: