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 数组与字典
Jan 29 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
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数组的一些常见操作汇总
2011/07/17 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
python遍历数组的方法小结
2015/04/30 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
便捷提取python导入包的属性方法
2018/10/15 Python
Python如何实现定时器功能
2020/05/28 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
Servlet方面面试题
2016/09/28 面试题
2014年大学生党课心得体会范文
2014/03/29 职场文书
单位工作证明格式模板
2014/10/04 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书