Question

观看此演示文稿后（https://www.youtube.com/watch?v=ImR0zo1tA_I）我想尝试Angular JS。我复制了代码，正是屏幕上显示的内容，但我无法正常工作。我在浏览器中尝试了它，在我的页面（http://thecodemaker.com.pl）中，我正在研究AngularJS，但它仍然不想工作。代码：

<!DOCTYPE html>
<html ng-app="basicApp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
	
    </head>
    
<body ng-controller="TodoController">
    <form>
        <div class="container">
            <div class="panel panel-primary">
                <div class="panel-heading">
                   <h1 class="panel-title"><b>ToDo List</b></h1> 
                </div>
                <ul class="list-group">
                    <li class="list-group-item" ng-repeat = "todo in todos">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> {{todo}}
                            </label>
                                <button type="button" class="close">&times;</button>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="form-group has-feedback">
                <label class="control-label invisible">Enter Task</label>
                <input type="text" class="form-control text-primary"></input>
                <button type="button" class="close form-control-feedback text-muted">&plusmn;</button>
            </div>
        
            <div class="alert alert-info">Enter new task to get started</div>
            <div class="alert alert-danger">Maximum number of tasks allowed : 5</div>
        
        </div>
    </form>
    
    <script src="js/bootstrap.min.js"></script>
	<script src="js/jquery-1.11.2.js"></script>
    <script>
    angular.module("basicApp", [])
    .controller("TodoController", ["$scope", function($scope) {
        $scope.todos =['Buil an atomic bomb','Sell it on ebay']
    }
</script>
    
</body>
</html>

任何想法有什么不对？

Answer 1

出现错误：Bootstrap's JavaScript requires jQuery，这意味着您需要将jQuery库添加到项目中，bootstrap.js

需要

Answer 2

从Angular 1.3.x开始，您不能再将控制器声明为窗口上的通用全局函数。控制器现在必须使用更新的组件声明形式。

<script>
    angular.module("basicApp", [])
    .controller("TodoController", ["$scope", function($scope) {
        $scope.todos =['Buil an atomic bomb','Sell it on ebay']
    }
</script>

在HTML中，将ng-app=""更改为ng-app="basicApp。

Answer 3

您的代码段似乎有很多问题。例如，你的提交/添加按钮没有绑定到事件监听器或任何东西，因此它没有做你想要的任何事情（比如在控制器的$ scope上向属性添加一个项目）。

查看Angular官方网站上的Todo示例，它是更新的。

https://angularjs.org/（向下滚动）。

以下是视频：https://www.youtube.com/watch?v=WuiHuZq_cg4

AngularJS没有工作

3 个答案: