angularjs学习笔记之简单介绍


Posted in Javascript onSeptember 26, 2015

一.angularjs简介

    AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件。它的创新点在于,利用 数据绑定 和 依赖注入,它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现,这也使得它能够完美地和任何服务器端技术结合。  

    说了这么多,估计你啥都没有理解。。。对吗?别着急,我来说说他的几个特点吧:模块化,数据双向绑定,依赖注入,指令。下面我们就跟着这几个特点进行学习。

二.angularjs基于MVC概念

    所谓MVC,就是module(数据模型),view(视图),controller(控制器)

    其实angularjs就是将这三个模块相结合,下面是我画的一张模型图,先大致看一下:

三.结合解释

    上面也提到了,angularjs的特点是:模块化,依赖注入,双向绑定和指令。现在我来结合上图跟大家说明一下:

    模块化:上图中的下面的filter,directive...四个方块就是module的四个代表性的方法(后面会跟大家一一讲解每个函数的用法和功能),也可以理解为各自的小模块,每个模块功能不同,但是分工明确,结构清晰,实现了模块化。

    依赖注入:上面说到的四个小模块,看似是独立分开的,但是它们两两之间都有相互依赖的关系,可以互相引用,实现强大的功能(后面会详细介绍如何引用),这就是依赖注入。

    指令:从上图中也可以看出,指令就是图中的directive方法了。angularjs中有很多自带的指令,比如ng-app(指定angularjs的作用域),ng-model(定义一个数据的模型,实现双向绑定),ng-repeat(重复一个标签),ng-change(监听标签的值有没有变化)等等,而这里的directive就是最重要的功能就是自定义指令(也有教程说是html的扩展)。

    双向绑定:双向绑定就是上图中的module和view,也就是数据和视图双向绑定。会用到刚才提到的ng-model指令。

四.看一个简单的双向绑定的例子。

    index.html:

<!DOCTYPE html>
<html ng-app> 
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
    <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
  </head>
  <body>
    <div> 
      <input type="text" ng-model="text">
      <b>Hello {{text}}</b>
    </div>
  </body>
</html>

    大家可以将上面的代码拿到浏览器运行一下(注意引用angularjs的地址),你会惊奇地发现,angularjs真的很强大!!

    下面简单给大家讲解一下上面代码中出现的难懂的地方:   

ng-app 指定应用的作用范围,这里表示,整个html代码都能识别angularjs。
ng-model给元素绑定数据模型名称text,input的输入值会存到这个模型中。
{{text}}这是angularjs的一种表达式的写法,也就是中间的text是一个变量它与上面的模型名称相对应,能够实时监听input值的变化,即时更新视图展示

    哈哈,angularjs还是挺简单的吧,希望这个小笔记能够引起大家对angularjs的兴趣,后面我还会继续更新angularjs的学习笔记。希望对大家有帮助。如果对于上面的笔记有不懂的地方,尽管问我,我肯定会给大家解答的。祝大家生活愉快!

Javascript 相关文章推荐
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
javascript 中的继承实例详解
May 05 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
探索node之事件循环的实现
Oct 30 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 #Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 #Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 #Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 #Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 #Javascript
10个很棒的jQuery代码片段
Sep 24 #Javascript
JS模拟实现Select效果代码
Sep 24 #Javascript
You might like
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP 高级课程笔记 面向对象
2009/06/21 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
python求pi的方法
2014/10/08 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
Python中Threading用法详解
2017/12/27 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
python安装requests库的实例代码
2019/06/25 Python
Django实现文件上传下载
2019/10/06 Python
python能否java成为主流语言吗
2020/06/22 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
计算机通信专业推荐信
2014/02/22 职场文书
小学教学随笔感言
2014/02/26 职场文书
2014年国庆标语
2014/06/30 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
python开发制作好看的时钟效果
2022/05/02 Python
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android