Angular.js初步认知

时间 2019-12-11

标签 angular.js angular 初步认知栏目 AngularJS 繁體版

原文原文链接

第一部分 Angular.js简介

Angular.js是一款基于JavaScript语言的框架,目的是为了克服HTML在构建应用上的不足.css

注意这里说的Angular.js是框架而不是类库,类库和框架都是用来解决静态页面技术上构建动态应用的问题的,可是二者却不是一个概念.angularjs

类库: 指一些函数的集合,封装一些可复用的代码块,可是类库自己须要开发者主动调用各类方法才能实现功能,如jQuery等.数组

框架: 指一种特殊的，已经实现了的WEB应用,框架会根据开发者填充的具体业务逻辑来调用开发者写的代码,如angularjs等.app

框架的类型有许多，有的是基于js的,有的是基于css的.框架

Angular.js最为核心的特性有:MVC,模块化,自动化双向数据绑定等.模块化

其中MVC指的是Model View Controller，M是指业务模型，V是指用户界面，C则是控制器，使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可使用不一样的表现形式.函数

　　在Angular.js中,能够在HTML的body中使用{{}}来表示一个angular表达式,在表达式中能够包裹如下几种状况:对象

　　a 字符串,以及字符串的拼接,表达式会将处理的结果输出ip

　　b 数字,以及数字的基本运算,表达式会将运算结果输出开发

　　c 三元表达式,表达式会先判断三元表达式的处理结果,而后将最终结果输出

　　d 布尔值,若是表达式内为判断式,会先进行判断,将判断出来的布尔值进行输出

　　e 数组,直接输出成字符串

　　f 对象,直接输出成字符串

　　指令是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: 标签被点击时触发

　　在业务逻辑较为简单的状况下,咱们能够考虑不使用js带来实现功能,可是若是须要实现的功能较多,或者实现的功能逻辑较为复杂的状况下,咱们仍是会使用JS码来实现Angular.js中的功能.

　　固然Angular也有较为规范的代码顺序:

　　a 在HTML中引用angular.js的文件

　　b 在一对script标签中建立模块和控制器

angular.module('default',[])

　　　　.controller('default',function ($scope) {})

</script>

　　c 在控制器处理函数中,设置参数或者方法,这个过程在angular中也能够称为暴露参数和暴露行为

　　d 划定angular模块的管理范围,和划定控制器的管理范围

　　e 将对应控制器暴露的参数和行为绑定到对应的位置

　　在对应位置设置ng-model="",或者设置ng-click=""等

angular的代码顺序能够看出来angular的模块化的特性

1. 在一个HTML页面中只会执行一个angular模块内的代码,若是在一个页面中定义了两个或以上的angular模块,只会将第一个模块内对应的angular代码解析并执行,其余的angular代码不会被执行,会原样输出

2. 控制器内对应的代码只有控制器在模块范围内才会被解析执行

3. 一个模块中能够存在多个控制器,每一个控制器控制不一样的参数和行为

4. angular.js能够配合jQuery使用,可是jQuery须要在angular.js以前被HTML引用