第一章  简单认识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学习总结的更多相关文章

  1. Angularjs学习---官方phonecat实例学习angularjs step0 step1

    接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...

  2. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

  3. 我的AngularJS 学习之旅

    我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就 ...

  4. 推荐10个很棒的AngularJS学习指南

    AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...

  5. Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结

    karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...

  6. AngularJs学习总结－了解基本特性（－）

    现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...

  7. [整理]AngularJS学习资源

    https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...

  8. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  9. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  10. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

随机推荐

  1. 通过JDBC进行简单的增删改查（以MySQL为例）

    目录 前言:什么是JDBC 一.准备工作(一):MySQL安装配置和基础学习 二.准备工作(二):下载数据库对应的jar包并导入 三.JDBC基本操作 (1)定义记录的类(可选) (2)连接的获取 ( ...

  2. 转载：java程序打包成jar 配置文件信息路径

    一个普通的java project,里面引用了config.properties配置文件,将项目打成Runnable jar,然后将config.properties放到打包后的jar路径下,执行该j ...

  3. DSP学习中遇到的几个问题（初级）

    1..c和.asm 文件分别为C语言和汇编语言的源文件. 2..cmd是存储器分配说明文件,主要功能是指定工程中的各段分配到那段存储器中,比如有片内RAM(起始地址,大小)和SDRAM等.这些要根据平 ...

  4. 查看linux版本

    http://nameyjj.blog.51cto.com/788669/557424 1. 查看内核版本命令: 1) [root@q1test01 ~]# cat /proc/version     ...

  5. java基础快捷键（1）

    1)  输出快捷键:System.out.println():在键盘上输入  Syso  然后按  Alt + ?:就出来了:System.out.println(); 2)主方法:(main): 快 ...

  6. 微软要支持Objective-C了

    今天的新闻,见http://www.solidot.org/story?sid=43899 更详细的见,http://arstechnica.com/information-technology/20 ...

  7. 使用QRCode生成二维码

    第一步: 获取QRCode组件 可以通过vs的nuget管理安装Gma.QrCodeNet, 也可以直接添加"Gma.QrCodeNet.Encoding.dll"的引用. 第二步 ...

  8. Linux系统中配置jdk

    在Linux系统下安装jdk 1.到Oracle公司的官网里下载好jdk,网址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8 ...

  9. html之如何让文字两端对齐

    text-align: justify;/*英文*/ text-align-last: justify;/*中英文*/ text-align-last: justify;亲测有效(chrome)

  10. errorlevel

    ------siwuxie095 errorlevel 程序返回码 用法:echo %errorlevel% 查看当前程序返回码(即返回值),以知道程序或命令行是否执行成功. DOS在执行完后都有返回 ...