首页 > 代码库 > 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初步认知