作者：小美女金猪宝宝 | 来源：互联网 | 2023-09-02 18:16
看了一个关于Angularjs的视频&＃xff0c;视频内容讲解的是如何制作一款TODO list形式的SPA&＃xff08;Simple Page Application,单页面应用)。为了增强理解&＃xff0c;下面写了一篇文章&＃xff0c;用以复习巩固。
准备 知识储备MVC 架构ng-app ng-controller ng-model 事件基础 完整代码 代码详解 总结
准备 Angularjs下载 说是下载&＃xff0c;其实只要能在我们的页面中引用到Angularjs即可。可以有如下方式。
CDN加速 使用国内的CDN加速服务也是可以的。
<script src &＃61;"http://code.angularjs.org/angular-1.0.1.min.js" > script >
npm 方式 使用Nodejs的包管理工具也挺方便的&＃xff0c;基本上来说两步就搞定了。
常规方式 常规方式就是我们手动的下载相关的文件&＃xff0c;然后手动的引入&＃xff0c;由于比较繁琐。这里不再过多的叙述。
Bootstrap下载 作为一款很流行的现代化的前端框架&＃xff0c;Bootstrap可谓是风头尽出了。下载地址
知识储备 MVC 架构 Angularjs 核心采用MVC架构&＃xff0c;事件驱动应用。我也是刚接触&＃xff0c;所以理解的也不是很到位。有错误的话&＃xff0c;还望博友指出来。
ng-app 其作为整个单页面的大管家&＃xff0c;app 即application&＃xff0c;应用的意思。我们的单页面的服务就充当了这么一个app的作用。
一般来说&＃xff0c;ng-app 要作为ng-controller的父容器来嵌套。否则可能不会出现预期的结果
ng-controller 控制器&＃xff0c;页面上应用的左膀右臂&＃xff0c;控制器的存在简化了模块之间的耦合性&＃xff0c;使得代码编写的更加规范和简单。
ng-model 模型处理&＃xff0c;一般会和页面元素进行绑定输出&＃xff0c;实现无刷新的页面效果。
事件基础 ng-click 在我们的单页面应用中&＃xff0c;声明了此属性的元素就具备了点击事件的功能。至于调用的是那一部分的函数&＃xff0c;其实是和该元素所在的容器内相关的。
也就是说&＃xff0c;点击事件对应的函数是书写在相关控制器里面的用于完成特定的功能的代码。
完整代码 下面 贴出来本例详细的代码
main.js (function (window) {var todoapp &＃61; window.angular.module(&＃39;todoapp&＃39; ,[]);todoapp.controller(&＃39;maincontroller&＃39; ,[&＃39;$scope&＃39; ,function ($scope ) {$scope .text &＃61; &＃39;&＃39; ; $scope .todolist &＃61; [{text:&＃39;Angularjs&＃39; ,done:false },{text:&＃39;Bootstrap&＃39; ,done:false }];$scope .add &＃61; function () {var text &＃61; $scope .text.trim();if (text) {$scope .todolist.push({text:text,done:false });$scope .text &＃61; &＃39;&＃39; ;}}$scope .delete &＃61; function (todo) {var index &＃61; $scope .todolist.indexOf(todo)$scope .todolist.splice(index,1 );}$scope .doneCount &＃61; function () {var temp &＃61; $scope .todolist.filter(function (item) {return item.done;});return temp.length;}}]);})(window)
todolist.html <html > <head > <meta charset &＃61;"utf-8" > <title > Angularjs 整合Bootstrap实现任务清单title ><link href &＃61;"http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel &＃61;"stylesheet" > <style > .container {max-width : 720 px } .done {color : #cca } .checkbox {margin-right : 12 px margin-bottom : 0 } .done > .checkbox > label > span {text-decoration : line-through } style ><script src &＃61;"node_modules/angular/angular.js" > script ><script src &＃61;"myjs/app.js" > script >head ><body > <div class &＃61;"container" ng-app &＃61;"todoapp" > <header > <h1 class &＃61;"display-3" > TODO LISTh1 ><hr > header ><section ng-controller &＃61;"maincontroller" > <form class &＃61;"input-group input-group-lg" > <input type &＃61;"text" class &＃61;"form-control" ng-model &＃61;"text" name &＃61;"" > <span class &＃61;"input-group-btn" > <button class &＃61;"btn btn-secondary" ng-click &＃61;"add()" > Addbutton >span >form ><ul class &＃61;"list-group" style &＃61;"padding:12px;" > <li class &＃61;"list-group-item" ng-class &＃61;"{&＃39;done&＃39;:item.done}" ng-repeat &＃61;"item in todolist" > <button type &＃61;"button" class &＃61;"close" aria-label &＃61;"close" ng-click &＃61;"delete(item)" > <span aria-hidden &＃61;"true" > ×span ><span class &＃61;"sr-only" > Closespan >button ><div class &＃61;"checkbox" > <label > <input type &＃61;"checkbox" ng-model &＃61;"item.done" > <span > {{item.text }} span >label >div >li >ul ><p > 总共 <strong > {{todolist.length }} strong ><strong > {{doneCount ()}} strong >p >section >div >body >html >
页面效果
代码详解 代码中最外边包裹的一层代码可以很好的起到临时空间的效果&＃xff0c;防止命名空间的污染。
(function (window ) {// to do something ) (window )
注意最后面的(window)不可缺少。
创建应用 // 注册一个应用程序主模块var todoapp &＃61; window .angular.module (&＃39;todoapp&＃39; ,[]);
创建控制器 todoapp.controller(&＃39;maincontroller&＃39; ,[&＃39;$scope&＃39; ,function ($scope ) {$scope .text &＃61; &＃39;&＃39; ; $scope .todolist &＃61; [{text:&＃39;Angularjs&＃39; ,done:false },{text:&＃39;Bootstrap&＃39; ,done:false }];}]);
完善功能函数 $scope .add &＃61; function () {var text &＃61; $scope .text.trim();if (text) {$scope .todolist.push({text:text,done:false });$scope .text &＃61; &＃39;&＃39; ;}}$scope .delete &＃61; function (todo) {var index &＃61; $scope .todolist.indexOf(todo)$scope .todolist.splice(index,1 );}$scope .doneCount &＃61; function () {var temp &＃61; $scope .todolist.filter(function (item) {return item.done;});return temp.length;}
总结 代码不多&＃xff0c;思想很深邃。更多内容可以参照
京公网安备 11010802041100号