基本的HTML ng-app不起作用

basic html ng-app not working

本文关键字:ng-app 不起作用 HTML      更新时间:2023-09-26

我是angularJS的新手,我被困在一个基本的步骤上。 我正在按照视频教程进行操作,我什至无法获得简单的绑定来工作。 出于某种原因,我的输出仍然只是字符串 {{totalTodos}} 而不是值 4。 我做错了什么?我正在 jetbrains 网络风暴中进行编辑,如果相关,我通过 CDN 链接下载了角度库。

我的索引.html:

<!doctype HTML>    
<html ng-app>
<head lang="en">
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
    <script type="text/javascript" src="todo.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.1-dist/dist/css/bootstrap.css">
</head>
<body>
<div ng-controller="TodoCtrl">
    {{totalTodos}}
</div>
</body>
</html>`

我的待办事项.js:

function TodoCtrl($scope) {
    $scope.totalTodos = 4;
}

你必须在javascript文件中使用一个控制器,它类似于你所拥有的,但不完全是。此外,请确保为应用命名。

它应该看起来更像:

var app = angular.module('appname', []);
app.controller('TodoCtrl', function ($scope) {
  $scope.totalTodos = 4;
});

要为应用程序命名,只需在定义 ng-app 时在 HTML 文件中ng-app="appname"