Web前端学习笔记——AngularJS之TodoMVC案例
程序员文章站
2022-05-08 09:15:53
...
TODOMVC案例
- 根据界面原型抽象数据成员（有哪些数据，每个数据的类型和结构）
- 设计模块，控制器
- 完成数据绑定
- 编写交互逻辑
- 下载地址：https://download.csdn.net/download/tichimi3375/10667891
<!-- package.json -->
{
"private": true,
"dependencies": {
"angular": "^1.4.9",
"todomvc-app-css": "^2.0.0"
}
}
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<!-- CSS overrides - remove if you don't need it -->
<link rel="stylesheet" href="css/app.css">
</head>
<body ng-app="MyTodoMvc">
<section class="todoapp" ng-controller="MainController">
<header class="header">
<h1>todos</h1>
<form ng-submit="add()">
<input class="new-todo" placeholder="What needs to be done?" ng-model="text" autofocus>
</form>
</header>
<section class="main">
<input class="toggle-all" type="checkbox" ng-click="toggleAll()">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<li ng-repeat="todo in todos | filter: selector : equalCompare" ng-class="{completed:todo.completed,editing:todo.id===currentEditingId}" data-id="{{todo.id}}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label ng-dblclick="editing(todo.id)">{{todo.text}}</label>
<button class="destroy" ng-click="remove(todo.id)"></button>
</div>
<form ng-submit="save()">
<input class="edit" ng-model="todo.text" ng-blur="save()">
</form>
</li>
</ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer class="footer">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><strong>{{todos.length}}</strong> item left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a ng-class="{selected:$location.path() == '/'}" href="#/">All</a>
</li>
<li>
<a ng-class="{selected:$location.path() == '/active'}" href="#/active">Active</a>
</li>
<li>
<a ng-class="{selected:$location.path() == '/completed'}" href="#/completed">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed" ng-click="clear()" ng-show="existCompleted()">Clear completed</button>
</footer>
</section>
<footer class="info">
<p>Double-click to edit a todo</p>
<!-- Remove the below line ↓ -->
<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<!-- Change this out with your name and url ↓ -->
<p>Created by <a href="http://todomvc.com">you</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- Scripts here. Don't remove ↓ -->
<script src="node_modules/angular/angular.js"></script>
<script src="js/app.js"></script>
</body>
</html>
<!-- app.js -->
(function(angular) {
'use strict';
// 1. 为应用程序创建一个模块，用来管理界面的结构
var myApp = angular.module('MyTodoMvc', []);
// 2. 注册一个主要的控制器（属于某个模块），用于往视图（view）中暴露数据
myApp.controller('MainController', ['$scope', '$location', function($scope, $location) {
// [1,2,3,4,5]
// 获取唯一ID
function getId() {
var id = Math.random(); // 1 2
for (var i = 0; i < $scope.todos.length; i++) {
if ($scope.todos[i].id === id) {
id = getId();
break;
}
}
return id;
}
// 文本框需要一个模型，为了拿到文本输入的值
$scope.text = '';
// 任务列表也需要一个
// 每一个任务的结构 { id: 1, text: '学习', completed: true }
$scope.todos = [{
id: 0.123,
text: '学习',
completed: false
}, {
id: 0.22,
text: '睡觉',
completed: false
}, {
id: 0.232,
text: '打豆豆',
completed: true
}];
// 添加todo
$scope.add = function() {
if (!$scope.text) {
return;
}
$scope.todos.push({
// 自动增长？
id: getId(),
// 由于$scope.text是双向绑定的，add同时肯定可以同他拿到界面上的输入
text: $scope.text,
completed: false
});
// 清空文本框
$scope.text = '';
};
// 处理删除
$scope.remove = function(id) {
// 删除谁
for (var i = 0; i < $scope.todos.length; i++) {
if ($scope.todos[i].id === id) {
$scope.todos.splice(i, 1);
break;
}
}
// $scope.todos
};
// 清空已完成
$scope.clear = function() {
var result = [];
for (var i = 0; i < $scope.todos.length; i++) {
if (!$scope.todos[i].completed) {
result.push($scope.todos[i]);
}
}
$scope.todos = result;
};
// 是否有已经完成的
$scope.existCompleted = function() {
// 该函数一定要有返回值
for (var i = 0; i < $scope.todos.length; i++) {
if ($scope.todos[i].completed) {
return true;
}
}
return false;
};
// 当前编辑哪个元素
$scope.currentEditingId = -1;
// -1代表一个肯定不存在的元素，默认没有任何被编辑
$scope.editing = function(id) {
$scope.currentEditingId = id;
};
$scope.save = function() {
$scope.currentEditingId = -1;
};
// $scope.checkall = false;
// $scope.$watch('checkall', function(now, old) {
// for (var i = 0; i < $scope.todos.length; i++) {
// $scope.todos[i].completed = now;
// }
// });
var now = true;
$scope.toggleAll = function() {
for (var i = 0; i < $scope.todos.length; i++) {
$scope.todos[i].completed = now;
}
now = !now;
}
// 状态筛选
$scope.selector = {}; // {} {completed:true} {completed:false}
// 点击事件的方式不合适，有DOM操作
// 让$scope也有一个指向$location的数据成员
$scope.$location = $location;
// watch只能监视属于$scope的成员
$scope.$watch('$location.path()', function(now, old) {
// 1. 拿到锚点值
// 这样写就要求执行环境必须要有window对象
// var hash = window.location.hash;
// console.log($location);
// console.log(now);
// 2. 根据锚地值对selector做变换
switch (now) {
case '/active':
$scope.selector = { completed: false };
break;
case '/completed':
$scope.selector = { completed: true };
break;
default:
$scope.selector = {};
break;
}
});
// 自定义比较函数, 默认filter过滤器使用的是模糊匹配
$scope.equalCompare = function(source, target) {
// console.log(source);
// console.log(target);
// return false;
return source === target;
};
}]);
})(angular);
推荐阅读