AngularJS学习总结

Posted 艾薇儿802388

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS学习总结相关的知识,希望对你有一定的参考价值。

第一章  简单认识AngularJS 

1、双向数据绑定

可通过ng-model监控输入

ng-app属性声明所有被其包含的内容都属于这个AngularJs应用,这也是我们在web应用中嵌套AngularJs的原因
只有被具有ng-app属性的DOM元素包含的元素才会受AngularJs的影响

2、MVC模式

MVC是一种软件架构设计模式,它将表现从用户交互中分离出来;模型中包含应用的数据和与数据进行交互的方法,视图将数据
呈现给用户,而控制器则是二者之间的桥梁。


3、模块

使用angular.module()方法来声明模块,这个方法能够接受两个参数,第一个是模块名称,第二个是依赖列表,也就是可以被注入
到模块中的对象列表。
angular.module(‘myapp‘,[]);//此方法是用来定义模块的
angular.module(‘myapp‘); //获取对模块的引用

开发大型应用时,我们会创建多个模块来承载业务逻辑

参数:

1、name :模块的名称 字符串变量

2、requires: 包含了一个字符串变量组成的列表,每个元素都是一个模块名称

4、作用域 (scope)

作用域是构成AngularJs应用的核心基础

$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方

$rootScope是AngularJs中最接近全局作用域的对象

$scope 对象就是一个普通的javascript对象,我们可以在其上随意修改和添加属性

$scope对象在AngualrJs中充当数据模型,但与传统的数据模型不一样,它不负责处理和操作数据,只是视图和html之间的桥梁
,是视图和控制器之间的胶水

*****$scope的所有属性,都可以自动被视图访问到

可以使用$scope的$destory()的方法来清理作用域(尽管angualrJs会自己清理作用域)


5、多种标记

可以在AngularJs应用的模板中使用多种标记

指令:将DOM元素增强为可复用的DOM组件的属性或元素 指令通常不会创建自己的$scope,但也有例外,比如:ng-controller,ng-repeat会
创建自己的子作用域并将它们附加到DOM元素上

值绑定:模板语法{{}}可以将表达式绑定到视图上

过滤器:可以在视图中使用的函数,用来进行格式化

表单控件:用来检验用户输入的控件

6、控制器

AngularJs允许我们在视图中像调用普通数据一样调用$scope上的函数。

angularJs同其他js框架最主要的区别:控制器并不适合用来执行DOM操作、格式化或数据操作,以及除存储数据模型之外的状态维护操作
它只是视图和$scope之间的桥梁。

AngularJS允许在$scope上设置包括对象在内的任何类型的数据,并且在视图中还可以展示对象的属性。

控制器嵌套:(作用域包含作用域)

7、表达式

表达式特性:

1、所有的表达式都在其所属的作用域内部执行,并有访问$scope的权限

2、如果表达式发生了TypeError和ReferenceError并不会抛异常

3、不允许使用任何流程控制功能

4、可以接受过滤器和过滤器链

AngularJs 会在运行$digest循环的过程中自动解析表达式

AngularJS通过$parse这个内部服务来进行表达式的运算,将$parse服务注入到控制器中,然后调用它就可以实现手动解析表达式

8、 过滤器

过滤器用来格式化需要展示给用户的数据,AngularJs有很多实用的内置过滤器,同时也提供了方便的途径可以自己创建过滤器

过滤器可以在html中使用 例如:{{123.456789 | number:2 }} 过滤器和参数之间用冒号分割; 使用多个过滤器时,用| 短竖线分割

也可以在js中使用过滤器

AngularJS提供的内置过滤器:

1、currency:可以将一个数值格式化为货币格式,但是也可以自定义货币符号
{{123 |currency }}

2、date :可以将日期格式化为需要的格式

年份格式化:

四位:{{today | date:‘yyyy‘}}
两位:{{today | date:‘yy‘}}
一位:{{today | date:‘y‘}}

还有月份、日期等格式 详见AngularJs权威教程page25

3、filter:可以从给定数组中选择一个子集,并将其生成一个新数组返回。

这个过滤器通常用来过滤需要进行展示的元素


第一个参数:
这个过滤器的第一个参数可以是字符串、对象、或是一个用来从数组中选择元素的函数

字符串:返回所有包含该字符串的元素(还可以通过加!表示不包含此字符串的所有元素)

例如:{{[‘Air‘,‘Lerner‘,‘Likes‘,‘Eat‘,‘Pizza‘] | filter:‘e‘ }}

对象:AngularJs会将待过滤对象的属性同这个对象中的同名属性进行比较

{{[{
‘name‘:‘Ari‘,
‘city‘:‘San Franisco‘,
‘favorite Food‘:‘Pizza‘
},
{
‘name‘:‘Kate‘,
‘city‘:‘indian Franisco‘,
‘favorite Food‘:‘Pizza‘
}

] | filter:{‘favorite Food‘:‘Pizza‘} }}

函数:对每个元素都执行这个函数,返回非假值的元素会出现在新的数组中并返回

(也可以用自定义函数进行过滤,这个函数定义在$scope上)

第二个参数:用来指定预期值同实际值进行比较的方式


4、json

json 过滤器可以将一个JSON或js对象转换成字符串。

{{{‘name‘:‘Ari‘,‘City‘:‘San Francisco‘}| json }}

5、limitTo :会根据传入的参数生成一个新的数组或字符串

例如:截取字符串的前三个字符
{{San Franisco is very cloudy | limitTo:3}}
截取字符串的后六个字符
{{San Franisco is very cloudy | limitTo-6}}

返回数组的第一个元素

{{[‘a‘,‘b‘,‘c‘,‘d‘] | limitTo: 1 }}

6、lowercase:将字符串转为小写

{{"San Franisco is very cloudy" | lowercase}}


7、number :将数字格式化为文本,第二个参数可选:用来控制小数点后截取的位数
{{123.46789 | number:2}}

8、orderBy:可以用表达式对指定的数组进行排序

第一个参数:是用来确定数组排序方向的谓词(即根据什么来排序)

第二个参数:用来控制排序的方向(是否逆向)

9、uppercase:将字符串转为大写

{{"San Franisco is very cloudy" | uppercase}}

10、自定义过滤器

注意:angular.module(‘这里只能写ng-app的值‘,[]);

11、表单验证

AngularJs能够将HTML5表单验证功能同它自己的验证指令结合起来使用,并且非常方便

要使用表单验证,首先要确保表单form中有name属性

如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记

可以在input上使用的所有验证选项:

1、必填项:required

2、最小长度:ng-minlength=‘位数’

3、最大长度:ng-maxlength=‘位数’

4、模式匹配:ng-pattern=‘正则表达式’

5、电子邮件:type=‘email’

6、数字:type=‘number’

7、URL: type=‘url’

8、自定义验证:第十章讲

9、在表单中控制变量

根据表单的属性,可以对表单做出实时响应

formName.inputName.property

未修改的表单: formName.inputName.$pristine

修改过的表单: formName.inputName.$dirty

合法的表单: formName.inputName.$valid

不合法的表单: formName.inputName.$invalid

错误: $error对象,它包含当前表单的所有验证内容,以及它们是否合法的信息,用下面语句访问这个属性

formName.inputName.$error

第二章 指令简介

1、指令:自定义HTML元素和属性

 指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径

2、HTML引导

 当浏览器加载一个包含AngularJS应用的HTML时,我们只需要一小段简单的代码就能够启动AngularJs应用。

 在HTML中要用内置指令ng-app标记出应用的根节点。这个指令需要以属性的形式来使用,因此可以将它写到任何位置,但是写到<html>的开始标签上是最常规的做法:

     内置指令是打包在AngularJS内部的指令。所有内置指令的命名空间都使用ng作为前缀。为防止命名冲突,不要在自定义指令前加ng前缀。

  现在,在HTML元素中可以使用所有内置指令和自定义指令了。同时,基于JavaScript的原型继承机制,任何在这个根元素内部的指令只要能够访问作用域,就可以访问$rootscope。

  这里的能够访问作用域指的是同DOM进行了链接,这个操作会在指令稍后的生命周期中进行。

3、我们的第一个指令

  让我们来创建一个自定义指令:<my-directive></my-directive>

  假设我们已经创建了一个完整的HTML文档,其中包含了AngularJS,并且DOM中已经用ng-app指令标识出了应用的根元素,当AngualrJs编译HTML时就会调用指令。

  调用指令意味着执行指令背后与之相关的JavaScript代码,这些代码是我们用指令定义写出来的:

  myDirective指令的定义是这样的:

  angular.module(‘myApp‘,[])

   .dirctive(‘myDirective‘,function(){

  return {

    restrict:‘E‘,

    template:‘<a href="http://google.com">Click me to go to Gooogle</a>‘

  }

  })

通过AngularJs模块API中的.directive()方法,我们可以通过传入一个字符串和一个函数注册一个新指令。其中字符串是这个指令的名字,指令名应该是驼峰命名风格的,函数用过返回一个对象。

因为我们之前在HTML里使用my-directive声明指令,因此指令定义必须以myDirective为名字

directive()方法返回的对象中包含了用来定义和配置指令的方法和属性。为了尽快掌握简单的属性定义,我们只用了restrict和template两个设置项来定义指令。

打开Chrome开发者工具,可以看到AngularJS在页面加载以及调用指令定义后生成的代码,AngularJS把生成后的代码提供给Chrome进行渲染

默认情况下,AngualrJS将模板生成的HTMl代码嵌套在自定义标签<my-directive>内部。

下面向指令定义中添加一些新的设置:我们可以将自定义标签从生成的DOM中完全移除掉,并只留下由模板生成的链接。将replace设置为true就可以实现这个效果:

angular.module("myApp",[])
.directive("myDirective",function(){
return {
restrict:‘E‘,
     replace:true,
template:‘<a href="http://Google.com">Click me to go to Google</a>‘
};
});
再次看一下生成后的代码,会发现DOM原始的指令已经不见了,只有我们在模板中写的HTML代码。replace方法会用自定义元素取代指令声明,而不是嵌套在其内部。
我们把创建的这些自定义元素称为指令(用directive()方法创建),因为事实上指令并不需要创建一个新的自定义元素。
下面都是用来声明前面创建指令的合法格式:
<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>

 

你好你好

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



 




























































以上是关于AngularJS学习总结的主要内容,如果未能解决你的问题,请参考以下文章

课题实践总结

angularjs2 学习笔记 组件

angularjs2 学习笔记 组件

angularJS使用ocLazyLoad实现js延迟加载

Python学习总结

angularjs项目总结