首页 > 代码库 > AngularJS学习总结

AngularJS学习总结

2024-08-28 15:33:35   222人阅读

第一章  简单认识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学习总结


联系
我们