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引用对象的方法代码
Aug 13 Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
PHP 输出缓存详解
2009/06/20 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
关于js datetime的那点事
2011/11/15 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
会计专业自我鉴定
2014/02/10 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
护理专业自我评价
2015/03/11 职场文书
MySQL常见优化方案汇总
2022/01/18 MySQL
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
Java中API的使用方法详情
2022/04/06 Java/Android