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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 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递归返回值时出现的问题解决办法
2013/02/19 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
js Form.elements[i]的使用实例
2011/11/13 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
python如何在终端里面显示一张图片
2016/08/17 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
Python实现京东抢秒杀功能
2021/01/25 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
未婚证明书模板
2014/10/08 职场文书
表扬通报怎么写
2015/01/16 职场文书
介绍信格式
2015/01/30 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书