Angularjs结合结合Bootstrap制作的一个制作的一个TODO List
主要介绍了Angularjs结合Bootstrap制作的一个TODO List 的相关资料,感兴趣的小伙伴们可以参考一下
看了一个关于Angularjs的视频,视频内容讲解的是如何制作一款TODO list形式的SPA(Simple Page Application,单页面应
用)。为了增强理解,下面写了一篇文章,用以复习巩固。
准备准备
Angularjs下载下载
说是下载,其实只要能在我们的页面中引用到Angularjs即可。可以有如下方式。
CDN加速加速
使用国内的CDN加速服务也是可以的。
复制代码 代码如下:
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
npm 方式方式
使用Nodejs的包管理工具也挺方便的,基本上来说两步就搞定了。
首先进入到我们将要写代码的文件夹。
•安装Angularjs:npm install angular
•页面上引入使用:
<!-- 这个src地址视自己的情况而定-->
<script src="node_modules/angular/angular.js"></script>
常规方式常规方式
常规方式就是我们手动的下载相关的文件,然后手动的引入,由于比较繁琐。这里不再过多的叙述。
Bootstrap下载下载
作为一款很流行的现代化的前端框架,Bootstrap可谓是风头尽出了。下载地址
知识储备知识储备
MVC 架构架构
Angularjs 核心采用MVC架构,事件驱动应用。我也是刚接触,所以理解的也不是很到位。有错误的话,还望博友指出来。
ng-app
其作为整个单页面的大管家,app 即application,应用的意思。我们的单页面的服务就充当了这么一个app的作用。
一般来说,ng-app 要作为ng-controller的父容器来嵌套。否则可能不会出现预期的结果
ng-controller
控制器,页面上应用的左膀右臂,控制器的存在简化了模块之间的耦合性,使得代码编写的更加规范和简单。
ng-model
模型处理,一般会和页面元素进行绑定输出,实现无刷新的页面效果。
事件基础事件基础
ng-click
在我们的单页面应用中,声明了此属性的元素就具备了点击事件的功能。至于调用的是那一部分的函数,其实是和该元素所在
的容器内相关的。
也就是说,点击事件对应的函数是书写在相关控制器里面的用于完成特定的功能的代码。
完整代码
下面 贴出来本例详细的代码
main.js