首页 > 代码库 > Angular.js初步认知
Angular.js初步认知
第一部分 Angular.js简介
Angular.js是一款基于JavaScript语言的框架,目的是为了克服HTML在构建应用上的不足.
注意这里说的Angular.js是框架而不是类库,类库和框架都是用来解决静态页面技术上构建动态应用的问题的,但是两者却不是一个概念.
类库: 指一些函数的集合,封装一些可复用的代码块,但是类库本身需要开发者主动调用各种方法才能实现功能,如jQuery等.
框架: 指一种特殊的，已经实现了的WEB应用,框架会根据开发者填充的具体业务逻辑来调用开发者写的代码,如angularjs等.
框架的类型有许多，有的是基于js的,有的是基于css的.
Angular.js最为核心的特性有:MVC,模块化,自动化双向数据绑定等.
其中MVC指的是Model View Controller，M是指业务模型，V是指用户界面，C则是控制器，使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式.
第二部分 Angular.js的主要组成
1. 表达式
在Angular.js中,可以在HTML的body中使用{{}}来表示一个angular表达式,在表达式中可以包裹以下几种情况:
a 字符串,以及字符串的拼接,表达式会将处理的结果输出
b 数字,以及数字的基本运算,表达式会将运算结果输出
c 三元表达式,表达式会先判断三元表达式的处理结果,然后将最终结果输出
d 布尔值,如果表达式内为判断式,会先进行判断,将判断出来的布尔值进行输出
e 数组,直接输出成字符串
f 对象,直接输出成字符串
2. 指令
指令是Angular.js对HTML标签的拓展属性,都是以ng-开头的属性名称
Angular.js提供的指令有许多,在现在初步认知中需先掌握以下几种指令的意义及用法
a ng-app: 划分Angular.js程序的管理范围,通常是给body或者div等设置属性,设置完成后对应标签内的与Angular有关的代码会被Angular程序解析执行
b ng-init: 初始化参数,直接写在需要初始化参数的标签中
c ng-model: 将设置的参数与标签的value值绑定,这里绑定完成后会实现双向数据绑定,value值通常为表单元素的内容取值
d ng-bind: 也是讲设置的参数与标签中的内容绑定,但是这里相当于给标签设置innerHTML值,并且只能设置不能获取值
e ng-click: 标签被点击时触发
3. Angular模块
在业务逻辑较为简单的情况下,我们可以考虑不使用js带来实现功能,但是如果需要实现的功能较多,或者实现的功能逻辑较为复杂的情况下,我们还是会使用JS码来实现Angular.js中的功能.
当然Angular也有较为规范的代码顺序:
a 在HTML中引用angular.js的文件
<script src="http://www.mamicode.com/angular.js"></script>
b 在一对script标签中创建模块和控制器
<script>
angular.module(‘default‘,[])
.controller(‘default‘,function ($scope) {})
</script>
c 在控制器处理函数中,设置参数或者方法,这个过程在angular中也可以称为暴露参数和暴露行为
d 划定angular模块的管理范围,和划定控制器的管理范围
<body ng-app="myApp" ng-controller="myController" >
e 将对应控制器暴露的参数和行为绑定到对应的位置
在对应位置设置ng-model="",或者设置ng-click=""等
angular的代码顺序可以看出来angular的模块化的特性
第三部分 Angular.js的初步注意点
1. 在一个HTML页面中只会执行一个angular模块内的代码,如果在一个页面中定义了两个或以上的angular模块,只会将第一个模块内对应的angular代码解析并执行,其他的angular代码不会被执行,会原样输出
2. 控制器内对应的代码只有控制器在模块范围内才会被解析执行
3. 一个模块中可以存在多个控制器,每个控制器控制不同的参数和行为
4. angular.js可以配合jQuery使用,但是jQuery需要在angular.js之前被HTML引用
Angular.js初步认知