AngularJS学习笔记1
简介
AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使用HTML声明动态内容。
AngularJS有五个主要核心特性,如下介绍:
1.双向数据绑定 —— 实现了把model与view完全绑定在一起,model变化,view也变化,反之亦然。
2.模板 —— 在AngularJS中,模板相当于HTML文件被浏览器解析到DOM中,AngularJS遍历这些DOM,也就是说AuguarJS把模板当做DOM来操作,去生成一些指令来完成对view的数据绑定。
3.MVVM —— 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。
4.依赖注入 —— AngularJS拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。
5.指令 —— 可以用来创建自定义的标签,也可以用来装饰元素或者操作DOM属性。
创建应用
AngularJS是以一个JavaScript文件形式发布的,可通过script标签载入AngularJS脚本
例:
<script src="/scripts/angular.min.js"></script>
hello world
<div ng-app="" ng-init="name='World'">
Hello {{ name }}!
</div>
指令介绍
AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集,它使得HTML可以转变成“特定领域语言(DSL)”,是用来扩展浏览器能力的技术之一,在DOM编译期间,和HTML关联着的指令会被检测到,并且被执行,这使得指令可以为DOM指定行为,或者改变它。
AngularJS通过称为指令的新属性来扩展的HTML,带有前缀ng-,我们也可以称之为“指令属性”,它就是绑定在DOM元素上的函数,可以调用方法、定义行为、绑定controller及$scope对象、操作DOM,等等。
AngularJS指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”,它本质上只是一个当编译器编译到相关DOM时需要执行的函数,可以写在元素的名称里,属性里,css类名里,注释里。
当浏览器启动、开始解析HTML时,DOM元素上的指令属性就会跟其他属性一样被解析,也就是说当一个Angular.js应用启动,Angular编译器就会遍历DOM树来解析HTML,寻找这些指令属性函数,在一个DOM元素上找到一个或多个这样的指令属性函数,它们就会被收集起来、排序,然后按照优先级顺序被执行。
Angular.js应用的动态性和响应能力,都要归功于指令属性,常见的有:ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。
指令:ng-app
ng-app指令来标明一个AngularJS应用程序,并通过AngularJS完成自动初始化应用和标记应用根作用域,同时载入和指令内容相关的模块,并通过拥有ng-app指令的标签为根节点开始编译其中的DOM。
引用方法很简单,如下:
<div ng-app=""> </div>
如上引用,一个AngularJS应用程序初始化就完成了并标记了作用域,也就是div元素就是AngularJS应用程序的"所有者",在它里面的指令也就会被Angular编译器所编译、解析了。
指令:ng-init
ng-init指令初始化应用程序数据,也就是为AngularJS应用程序定义初始值,通常情况下,我们会使用一个控制器或模块来代替它,后面我们会介绍有关控制器和模块的知识。
如下所示,我们为应用程序变量name赋定初始值。
<div ng-app="" ng-init="name='Hello World'"> </div>
我们不仅可以赋值字符串,也可以赋值为数字、数组、对象,而且可以为多个变量赋初始值,如下所示:
<div ng-app="" ng-init="quantity=1;price=5"> </div>
//或者
<div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']"> </div>
AngularJS 数据绑定:表达式
AngularJS框架的核心功能之一 —— 数据绑定,由两个花括号{{}}组成,可以把数据绑定到HTML,类似Javascript代码片段,可以包含文字、运算符和变量,通常在绑定数据中用到,表达式可以绑定数字、字符串、对象、数组,写在双大括号内:{{ expression }}。
1. 如前面的示例,我们就可以使用表达式这样调用初始化的变量值,如下。
<div ng-app="" ng-init="name='Hello World'">
{{ name }}
</div>
2. 当然我们也可以使用表达式输出数字、数组等等,如下所示:
2.1. 输出数字,如下示例:
<div ng-app="" ng-init="quantity=12;price=5">
<p>总价: {{ quantity * price }}</p>
</div>
2.2. 输出对象,如下示例:
<div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
<p>名字为: {{ names[0] }}</p>
</div>
指令:ng-model
在AngularJS中,只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素,实现model和view的双向绑定。
如下示例,使用ng-model指令对数据进行绑定。
<div ng-app="">
<p>请输入任意值:<input type="text" ng-model="name"></p>
<p>你输入的为: {{ name }}</p>
</div>
ng-model把相关处理事件绑定到指定标签上,这样我们就可以不用在手工处理相关事件(比如change等)的条件下完成对数据的展现需求。
以上介绍了ng-model的单向绑定(view->model)!
指令:ng-bind
指令ng-bind和AngularJS表达式{{}}有异曲同工之妙,但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。
如下使用ng-bind指令绑定把应用程序数据。
<div ng-app="">
<p>请输入一个名字:<input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span></p>
</div>
PS:使用花括号语法时,因为浏览器需要首先加载页面,渲染它,然后AngularJS才能把它解析成你期望看到的内容,所以对于首个页面中的数据绑定操作,建议采用ng-bind,以避免其未被渲染的模板被用户看到。
指令:ng-click
AngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。
对按钮、链接等,我们都可以用ng-click指令属性来实现绑定,如下简单示例:
<div ng-app="" ng-init="click=false">
<button ng-click="click= !click">隐藏/显示</button>
<div ng-hide="click">
<p>请输入一个名字:<input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span> </p>
</div>
</div>
PS:ng-hide="true",设置HTML元素不可见。
ng-click指令将DOM元素的鼠标点击事件(即mousedown)绑定到一个方法上,当浏览器在该DOM元素上鼠标触发点击事件时,Angular就会调用相应的方法!
AngularJS学习笔记1的更多相关文章
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- codevs3196 黄金宝藏
题目描述 Description 小毛终于到达宝藏点,他意外地发现有一个外星人(名叫Pluto).宝藏是一些太空黄金,有n堆排成一行,每堆中有xi颗黄金.小毛和Pluto决定轮流从中取出黄金,规则是每 ...
- IOS基础之 (七) 分类Category
一 Category 分类:Category(类目,类别) (OC有) 命名:原来的类+类别名(原来的类名自动生成,只要写后面的类别名,一般以模块名为名.比如原来类 Person,新建分类 Ct,新建 ...
- 快速反射DataTable
public class SetterWrapper<TTarget, TValue> { private Action<TTarget, TValue> _setter; p ...
- mongodb(基础用法)
驱动和客户端库 https://mongodb-documentation.readthedocs.org/en/latest/ecosystem/drivers.html#id2 https://m ...
- MySQL查询重复出现次数最多的记录
MySQL查询的方法很多,下面为您介绍的MySQL查询语句用于实现查询重复出现次数最多的记录,对于学习MySQL查询有很好的帮助作用. 在有些应用里面,我们需要查询重复次数最多的一些记录,虽然这是一个 ...
- mysql 索引 详解
索引是快速搜索的关键.MySQL索引的建立对于MySQL的高效运行是很重要的.下面介绍几种常见的MySQL索引类型. 在数据库表中,对字段建立索引可以大大提高查询速度.假如我们创建了一个 mytabl ...
- B0BO TFS 安装指南(转载)
TFS2008安装过几次,每次都遇到点麻烦,结合网上的一些经验总结一下: Windows SharePoint Services 安装 Windows SharePoint Services你有两个选 ...
- 安装 RPM 包或者安装源码包
安装 RPM 包或者安装源码包 在windows下安装一个软件很轻松,只要双击.exe的文件,安装提示连续“下一步”即可,然而linux系统下安装一个软件似乎并不那么轻松了,因为我们不是在图形界面下. ...
- Robot Motion(imitate)
Robot Motion Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 11065 Accepted: 5378 Des ...
- HNU 12847 Dwarf Tower(最短路+队列优化)
题目链接:http://acm.hnu.cn/online/?action=problem&type=show&id=12847 解题报告:有n样物品,编号从1到n第i样物品可以通过金 ...