本文介绍如何利用AngularJS与Bootstrap框架开发一个简单的TODO List单页面应用。内容涵盖AngularJS的引入方式、MVC架构核心指令（ng-app、ng-controller、ng-model）及事件处理，并通过完整代码示例展示如何构建具备添加、删除和状态统计功能的前端应用。
AngularJS与Bootstrap开发TODO List教程
基于一个关于AngularJS的视频教程，该视频演示了如何开发一款TODO List形式的单页面应用（SPA）。为了加深理解并巩固所学知识，本文整理了一份详细的开发指南。
环境准备与库引入
准备工作
获取AngularJS
所谓的下载，实际上只需确保能在网页中正确引用AngularJS库文件即可。以下是几种常用的引入方式。
通过CDN加速引用
使用国内提供的CDN加速服务同样可行。
具体代码示例如下：
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>通过npm安装
利用Node.js的包管理工具进行操作也非常便捷，大致分为两步完成。首先，进入项目代码所在的目录。其次，执行安装命令：npm install angular。
<!-- src路径需根据实际项目结构调整 --> <script src="node_modules/angular/angular.js"></script>
手动下载方式
传统方式是手动下载相关文件并在页面中引入，由于步骤较为繁琐，此处不再赘述。
获取Bootstrap
作为当前流行的现代化前端框架，Bootstrap应用广泛。可通过官方渠道获取下载地址。
核心概念与指令解析
基础知识储备
MVC架构概述
AngularJS的核心采用MVC（模型-视图-控制器）架构，属于事件驱动的应用模式。鉴于笔者初学阶段理解尚浅，如有谬误，欢迎指正。
ng-app指令
该指令充当整个单页面应用的“总管家”，即Application（应用）的标识。在此应用中，单页面服务即扮演了App的角色。
通常，ng-app应作为ng-controller的父容器进行嵌套，否则可能无法达到预期效果。
ng-controller指令
控制器是应用的核心组件之一，其存在降低了模块间的耦合度，使代码编写更加规范且简洁。
ng-model指令
用于模型数据处理，通常与页面元素绑定以实现数据输出，从而达成无刷新页面的交互效果。
事件处理基础
ng-click指令
在单页面应用中，声明了此属性的元素即具备点击事件功能。具体调用的函数取决于该元素所在容器对应的控制器逻辑。
换言之，点击事件所触发的函数代码应编写在相应的控制器内部，以执行特定功能。
代码实现与解析
完整代码展示
以下是本例的详细代码实现。
main.js
(function(window){
// 注册一个应用程序主模块
var todoapp = window.angular.module('todoapp',[]);
// 注册控制器
// window.angular.module('todoapp')
todoapp.controller('maincontroller'
,['$scope',function($scope){
// $scope 作用就是往视图中添加元素
// 文本框中的数值
$scope.text = ''; // 会使用双向绑定的数据类型
// 为方便页面展示，手动添加一串列表
$scope.todolist = [{
text:'Angularjs',
done:false
},{
text:'Bootstrap',
done:false
}];
// 添加函数，响应交互
$scope.add = function(){
var text = $scope.text.trim();
if(text) {
$scope.todolist.push({
text:text,
done:false
});
$scope.text = '';
}
}
// 点击删除按钮的响应事件
$scope.delete = function(todo){
var index = $scope.todolist.indexOf(todo)
$scope.todolist.splice(index,1);// 起删除的作用
}
// 获取已完成的事件的个数，按照checkbox的选择与否实现
// 由于页面是动态变化的，所以要使用函数，或者干脆使用模型绑定，但是那样的话会稍微麻烦一点
$scope.doneCount = function(){
// 使用filter来实现
var temp = $scope.todolist.filter(function(item){
return item.done;// 返回true表示当前的数据满足条件，事件已完成
});
return temp.length;
}
}]);
})(window)
todolist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angularjs 整合Bootstrap实现任务清单</title>
<!-- 引入 Bootstrap -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
.container {
max-width: 720px;
}
.done {
color: #cca;
}
.checkbox {
margin-right: 12px;
margin-bottom: 0;
}
.done > .checkbox > label > span {
text-decoration: line-through;
}
</style>
<script src="node_modules/angular/angular.js"></script>
<script src="myjs/app.js"></script>
</head>
<body >
<div class="container" ng-app="todoapp">
<header>
<h1 class="display-3">TODO LIST</h1>
<hr></header>
<!-- 内容部分-->
<section ng-controller="maincontroller">
<!--为了实现好看的界面，所以用了表单控制-->
<form class="input-group input-group-lg">
<input type="text" class="form-control" ng-model="text" name="">
<span class="input-group-btn">
<button class="btn btn-secondary" ng-click="add()">Add</button>
</span>
</form>
<ul class="list-group" style="padding:12px;">
<li class="list-group-item" ng-class="{'done':item.done}" ng-repeat="item in todolist" >
<button type="button" class="close" aria-label="close" ng-click="delete(item)">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="item.done">
<span>{{item.text }}</span>
</label>
</div>
</li>
</ul>
<p>
总共 <strong>{{todolist.length }}</strong>
个任务，已完成 <strong>{{doneCount()}}</strong>
个
</p>
</section>
</div>
</body>
</html>
页面运行效果
代码逻辑解析
代码最外层包裹的结构起到了临时命名空间的作用，有效防止了全局命名空间的污染。
(function(window){
// to do something
})(window)
需注意，末尾的(window)参数不可省略。
应用模块创建
// 注册应用程序主模块 var todoapp = window.angular.module('todoapp',[]);
控制器创建
todoapp.controller('maincontroller'
// 这里的$scope也就起到了容器的作用，声明了变量的可见范围。
,['$scope',function($scope){
// $scope 作用就是往视图中添加元素
// 文本框中的数值
$scope.text = ''; // 会使用双向绑定的数据类型
// 为方便页面展示，手动添加一串列表
$scope.todolist = [{
text:'Angularjs',
done:false
},{
text:'Bootstrap',
done:false
}];
}]);
功能函数完善
// 添加函数，响应交互
$scope.add = function(){
var text = $scope.text.trim();
if(text) {
$scope.todolist.push({
text:text,
done:false
});
$scope.text = '';
}
}
// 点击删除按钮的响应事件
$scope.delete = function(todo){
var index = $scope.todolist.indexOf(todo)
$scope.todolist.splice(index,1);// 起删除的作用
}
// 获取已完成的事件的个数，按照checkbox的选择与否实现
// 由于页面是动态变化的，所以要使用函数，或者干脆使用模型绑定，但是那样的话会稍微麻烦一点
$scope.doneCount = function(){
// 使用filter来实现
var temp = $scope.todolist.filter(function(item){
return item.done;// 返回true表示当前的数据满足条件，事件已完成
});
return temp.length;
}
总结
虽然代码量不大，但蕴含的设计思想深刻。
若希望深入学习，可参考相关学习资源，并附上以下三个精彩专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对各位的学习有所帮助，欢迎大家继续支持本站。