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 相关文章推荐
微信JS接口汇总及使用详解
Jan 09 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
vue 文件目录结构详解
Nov 24 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 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 miniBB中文乱码问题解决方法
2008/11/25 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
FLASH 广告之外的链接
2008/12/16 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
python实现简单俄罗斯方块
2020/03/13 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
《陶罐和铁罐》教学反思
2014/02/19 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
优秀班组长事迹
2014/05/31 职场文书
抗震救灾标语
2014/06/26 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
图神经网络GNN算法
2022/05/11 Python