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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
JavaScript QueryString解析类代码
Jan 17 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
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
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
jquery遍历json对象集合详解
2016/05/18 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
详解vue 组件注册
2020/11/20 Vue.js
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python实现快递价格查询系统
2020/03/03 Python
如何基于Python按行合并两个txt
2020/11/03 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
活动总结的格式
2014/05/07 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
业务员岗位职责范本
2015/04/03 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python