AngularJS

最新推荐文章于 2019-08-21 14:03:38 发布

anjiong1971

最新推荐文章于 2019-08-21 14:03:38 发布

阅读量294

点赞数

文章标签： javascript 数据库 json ViewUI

原文链接：http://www.cnblogs.com/yyn120804/p/7797630.html

版权

Angular JS和jQuery都是JavaScript的框架，两个是平行框架

jQuery添加到页面通过script：

<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

AngularJS添加到页面通过script：

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

Angular JS和jQuery又有一些区别。jQuery是通过某元素的class或者id等在script中进行编码。AngularJS则是通过指令扩展了 HTML，且通过表达式绑定数据到 HTML，从而在script中进行编码。

AngularJS 通过新的属性和表达式扩展了 HTML。

AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。

（一）AngularJS 简介

1.AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

2.AngularJS 通过指令扩展了 HTML，且通过 表达式 绑定数据到 HTML。

AngularJS 是一个 JavaScript 框架

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

	我们建议把脚本放在 <body> 元素的底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

例如：

当在输入框中输入“你好”，最后一个p元素的内容也变为“你好”

应用程序（ng-app）——变量、变量值（ng-model / init=“变量名=变量值”）——（绑定ng-bind /{{变量名}}）某个段落的innerHTML。

实例讲解：

当网页加载完毕，AngularJS 自动开启。

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

	如果您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。

ng-model和ng-bind指令的区别：

ngModel和ngBind的区别：ngModel 用来绑定input、select、textarea等form表单控件（也就是val的值），ngBind是绑定文本内容的(不包括html，如果要绑定html需要使用ngBindHtml)，这里大家会发现表述的时候使用的是ngSubmit、ngClick、ngModel等(这些都是ng定义的指令)但是在html中却写成了ng-submit、ng-click等，这是ng的一个规则(当我们自己定义指令的时候也是一样的规则，如menuContent在html内使用的时候要写成menu-content)，跟jQuery的css是一样的，其次这里出现的ngShow指令是指当指定的值或表达式为真的情况下，该元素是显示的，否则隐藏，跟它对应的属性是ngHide，其次ngBind绑定的值也同样可以是值也可以是表达式(大部分指令的名字都是很容易理解的)。

ng-bind和{{}}(表达式)：

ng-bind和{{}}一样的。<p ng-bind=“x”> </p>把x变量绑定到p元素的innerHTML中，相当于<p> {{x}} </p> 即把变量绑定到元素的内容中并且用在HTML中显示变量值。

什么是 AngularJS？

"AngularJS 是专门为应用程序设计的 HTML。"

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。
AngularJS 指令

正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量。
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
带有有效的 HTML5：

AngularJS 实例

<div data-ng-app="" data-ng-init="firstName='John'">

<p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>

AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
（二）AngularJS 表达式
AngularJS 使用 表达式 把数据绑定到 HTML
AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 数字

AngularJS 数据就像 JavaScript 数字：
使用 ng-bind 的相同实例
AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串：
AngularJS 对象

AngularJS 对象就像 JavaScript 对象：
使用 ng-bind 的相同实例：
AngularJS 数组

AngularJS 数组就像 JavaScript 数组：
使用 ng-bind 的相同实例：
（三）AngularJS 指令
AngularJS 通过被称为指令的新属性来扩展 HTML。
AngularJS 指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。
数据绑定
上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。

AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

在下一个实例中，两个文本域是通过两个 ng-model 指令同步的：
重复 HTML 元素
ng-repeat 指令会重复一个 HTML 元素：

	HTML5 允许扩展的（自制的）属性，以 data- 开头。 AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

结果：

ng-repeat 指令用在一个对象数组上：
AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。
把实例中的对象想象成数据库中的记录
通过上述两个例子，可得出，这里的x就是names里面的元素。在names[ ]数组中，x分别表示names[0],names[1]等变量。从而有x.name，x.country

	AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。把实例中的对象想象成数据库中的记录

ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的 根元素。

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。

ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了 初始值。

通常情况下，不使用 ng-init。您将使用一个控制器(controller)或模块来代替它。

稍后您将学习更多有关控制器和模块的知识。

ng-model 指令

ng-model 指令 绑定 HTML 元素 到应用程序数据。

ng-model 指令也可以：

为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

ng-repeat 指令

ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。

总结：
ng-app=" " // 定义了 AngularJS 应用程序的 根元素。比如上述的所有案例中，都是父元素div为应用程序。
指令（定义并给定初始值）
ng-init="变量名=‘变量值’" //定义变量，并对变量进行初始化值
ng-model=“ ” //通过绑定 HTML 元素 到应用程序数据，比如输入框。ng-init和ng-model两种方式都是定义变量并通过不同的方式给予赋值。
绑】数据
ng-bind=“ ” //将绑定的值通过某元素展现出来。
{{ }} //将绑定的值通过某元素展现出来。
ng-bind和{{ }}都是绑定数据，但是还是有不同之处：{{ }} 是在其所在位置显示表达式结果。而ng-bind将元素的内容被替换为其绑定的数据。
（四）AngularJS Scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。
如何使用 Scope

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。
解析：var m = angular.module('myApp,[])中[]是什么意思?

var m = angular.module('myApp',[])

表示声明一个叫做 hd 的模块。相当于setter,[]表示是一个数组，里面的内容就是你现在声明的这个模块中需要用到的其他模块。例如

var app = angular.module('myApp',['ionic'])

上面就表示定义了一个叫myApp的模块，myApp模块中注入了 ionic模块

另外

var m = angular.module('myApp')

表示去获取一个叫做 myApp 的模块。相当于getter

Scope 概述

AngularJS 应用组成如下：
- View(视图), 即 HTML。
- Model(模型), 当前视图中可用的数据。
- Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

AngularJS 实例

创建控制器时，将 $rootScope 作为参数传递，可在应用中使用：

（五）AngularJS 控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。

AngularJS 控制器是常规的 JavaScript 对象。

AngularJS 控制器

AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

外部文件中的控制器

在大型的应用程序中，通常是把控制器存储在外部文件中。

只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可：

以下实例创建一个新的控制器文件:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

保存文件为 namesController.js:

然后，在应用中使用控制器文件:

AngularJS 实例

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

<script src="namesController.js"></script>

（六）AngularJS 过滤器

AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器

AngularJS 过滤器可用于转换数据：

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

向表达式添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。

uppercase 过滤器格式化字符串为大写：

结果为：

lowercase 过滤器格式化字符串为小写：

currency 过滤器

向指令添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

orderBy 过滤器根据某个表达式排列数组：

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：

（七）AngularJS 服务(Service)

AngularJS 服务(Service)

AngularJS 中你可以创建自己的服务，或使用内建服务。

什么是服务？

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

有个 $location 服务，它可以返回当前页面的 URL 地址。

注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。

为什么使用服务?

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location对象更好。

$http 服务

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

实例

使用 $http 服务向服务器请求数据:

$timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

2S后

$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。

创建自定义服务

你可以创建自定义的访问，链接到你的模块中：

过滤器中，使用自定义服务

当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。

在对象数组中获取值时你可以使用过滤器：

（八）AngularJS Http

AngularJS XMLHttpRequest

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

应用解析:

AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。

ng-controller 指令设置了 controller 对象 名。

函数 customersController 是一个标准的 JavaScript 对象构造器。

控制器对象有一个属性: $scope.names。

$http.get() 从web服务器上读取静态 JSON 数据。

服务器数据文件为： /statics/demosource/Customers_JSON.php。

当从服务端载入 JSON 数据时，$scope.names 变为一个数组。

	以上代码也可以用于读取数据库数据。

举例：服务器地址为：http://127.0.0.1:3000/menu

从该服务器中请求数据：

html

在页面中的显示结果：

修改js代码：

这里response.data为json对象，我们可以通过.属性调用属性了。比如，当我们输入response.data[0].img，结果为：

http://img15.3lian.com/2015/f3/16/d/49.jpg

举例：服务器中的json数据：

服务器地址为：http://127.0.0.1:3000/fonation

html：

js：

结果为：

（九）AngularJS Select(选择框)

AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。

使用 ng-options 创建选择框

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:

等同于：

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

AngularJS 表格

ng-repeat 指令可以完美的显示表格。

使用 CSS 样式

为了让页面更加美观，我们可以在页面中使用CSS：

排序显示

如果需要对表格进行排序，我们可以添加 orderBy 过滤器:

使用 uppercase 滤器

如果字母要转换为大写，可以添加 uppercase 过滤器:

AngularJS SQL

也就是从服务器上获取数据：

AngularJS HTML DOM

AngularJS 有自己的 HTML 属性指令。

ng-disabled 指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

实例讲解：

ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。

ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）。

ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素。

您可以使用一个评估为 true or false 的表达式（比如 ng-show="hour < 12"）来隐藏和显示 HTML 元素。

在下一章中，有另一个实例，通过单击一个按钮来隐藏一个 HTML 元素。

AngularJS HTML 事件

ng-click 指令

ng-click 指令定义了一个 AngularJS 单击事件。

点击button按钮，不断地增加一。即0,1,2,3,4,5......

隐藏 HTML 元素

ng-hide 指令用于设置应用的一部分 不可见 。

ng-hide="true" 让 HTML 元素 不可见。

ng-hide="false" 让元素可见。

应用解析:

personController的第一部分与控制器章节类似。

应用有一个默认属性: $scope.myVar = false;

ng-hide 指令设置应用中的元素不可见。

toggle() 函数用于切换 myVar 变量的值（true 和 false）。

ng-hide="true" 让元素 不可见。

显示 HTML 元素

ng-show 指令可用于设置应用中的一部分可见。

ng-show="false" 可以设置 HTML 元素 不可见。

ng-show="true" 可以以设置 HTML 元素可见。

以下实例使用了 ng-show 指令:

AngularJS 模块

模块定义了一个应用程序。

模块是应用程序中不同部分的容器。

模块是应用控制器的容器。

控制器通常属于一个模块。

创建模块

你可以通过 AngularJS 的 angular.module 函数来创建模块：

"myApp" 参数对应执行应用的 HTML 元素。

现在你可以在 AngularJS 应用中添加控制器，指令，过滤器等。

添加控制器

你可以使用 ng-controller 指令来添加应用的控制器:

添加指令

AngularJS 提供了很多内置的指令，你可以使用它们来为你的应用添加功能。

完整的指令内容可以参阅 AngularJS 参考手册。

此外，你可以使用模块来为你应用添加自己的指令：

模块和控制器包含在 JS 文件中

通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。

在以下实例中， "myApp.js" 包含了应用模块的定义程序， "myCtrl.js" 文件包含了控制器：

myApp.js

var app = angular.module( "myApp", []);

在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

myCtrl.js

app.controller( "myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});

函数会影响到全局命名空间

JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。

什么时候载入库?

	在我们的实例中，所有 AngularJS 库都在 HTML 文档的头部载入。

对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。

这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。

在我们的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。

另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：

AngularJS 表单

AngularJS 表单是输入控件的集合。

HTML 控件

以下 HTML input 元素被称为 HTML 控件:

input 元素
select 元素
button 元素
textarea 元素
HTML 表单

HTML 表单通常与 HTML 控件同时存在。
HTML 属性 novalidate 用于禁用浏览器的默认验证。
实例解析

AngularJS ng-model 指令用于绑定 input 元素到模型中。

模型对象 master 的值为 {"firstName" : "John", "lastName" : "Doe"}。

模型函数 reset 设置了模型对象 user 等于 master。
注意事项
①novalidate
        标准浏览器如火狐，谷歌等对HTML5有很好的支持。众所周知，HTML5中input的type属性已经具备了验证功能。如果你要自己定义验证方式，那么请加上novalidate属性，以此避开浏览器自行验证。
②type类型
        HTML5的type属性可以包含text、email、number等，但是angular又内部重写了这些属性，所以放心大胆的去用吧，angular完全可以满足你所有的验证。
③type="number"还是ng-pattern="/^[0-9]{6}$/"
        你可以使用type="number"来限制输入框只能输入数字，当然你也可以用ng-pattern来验证用户输入，从而过滤掉非数字输入。这完全取决于你的爱好，没有硬性规定，只是选择多一些罢了。
AngularJS 输入验证

1. 简介

　　能够验证用户在表单中输入的内容是否合理与正确是十分重要的，而这个验证不能仅仅基于后端，因为对其中的内容实时反馈是很重要的，我们也必须在前端尽可能的保护后端。
　　AngularJS能够将HTML5表单验证同它自己的验证指令结合起来使用。

2.如何实时响应

AngularJS在处理表单时，会根据表单的状态自动添加一些CSS类。我们可以利用这些CSS类使用不同的样式提示用户表单目前的状态。

CSS类何时自动添加
ng-pristine 表单没有做过修改时
ng-dirty 表单做过修改时
ng-valid 表单内容合法时
ng-invalid 表单内容非法时

CSS类	何时自动添加
ng-pristine	表单没有做过修改时
ng-dirty	表单做过修改时
ng-valid	表单内容合法时
ng-invalid	表单内容非法时

AngularJS在处理表单时，会根据表单的状态为表单及表单下面的元素添加一些属性，这些属性反映出了表但目前的状态，我们可以在HTML代码中利用这些属性实时提示用户，也可以在JS代码中监听这些属性以便实时相应。我们可以使用formName.property和fromName.inputField.property分别访问到表单和表单下面的元素的属性。

属性名	类型	取值
$pristine	布尔型	未修改为true，否则为false。
$dirty	布尔型	修改过为true，否则为false。
$valid	布尔型	验证正确为true，否则为false。
$invalid	布尔型	验证错误为true，否则为true。

注意

　　对于表单本身来说，只有表单下面所有的有效元素（使用了ng-model的元素）的值都验证正确，才会为form元素添加ng-valid类，才会为formName对象的$valid属性设置为true，否则，就会添加ng-invalid以及设置$valide属性为false。表单是否修改也同理。
　　另外，我们无法获取到表单下的无效元素（没用ng-model的元素），因为我们没必要获取它们的状态。
　　下面的例子演示了在表单中有ng-model的有效元素和没有ng-model的无效元素的区别。

<body ng-app="myApp" ng-controller="myController"> <form name="myForm" novalidate> <input type="text" placeholder="在此输入账号" ng-minlength="5" ng-maxlength="16" ng-model="a"/> <br/><br/> <input type="text" placeholder="在此输入密码" ng-minlength="5" ng-maxlength="16"/> <br/><br/> <button type="submit">Submit</button> </form> <script> var app = angular.module("myApp",[]); app.controller("myController", function () { }); </script> </body>

3.验证选项
- 必填项
  验证某个表单输入是否填写，只要在输入字段元素上添加HTML5标记required即可。
```
<form>
    <input type="text" placeholder="在此输入" required/> <button type="submit">Submit</button> </form>
```
　　如果没有填写，点击了Submit按钮效果如下，这是由谷歌浏览器提供的默认验证，可以在form元素加上novalidate关键字禁用浏览器的默认验证，后面我们会讲怎么进行自定义验证。
- 长度限制
  我们可以用ng-minlength和ng-maxlength指令来指定表单输入的最小长度和最大长度。
HTML 表单属性 novalidate 用于禁用浏览器默认的验证。
- angular内置了一套表单校验，其中包含几个状态：
AngularJS 表单和控件可以验证输入的数据。
输入验证

在前面的几个章节中，你已经学到关于 AngularJS 表单和控件的知识。

AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。
实例解析

AngularJS ng-model 指令用于绑定输入元素到模型中。

模型对象有两个属性： user 和 email。

我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。
AngularJS API
API 意为 Application Programming Interface（应用程序编程接口）

	客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

AngularJS 全局 API

AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：

比较对象
迭代对象
转换对象

全局 API 函数使用 angular 对象进行访问。

以下列出了一些通用的 API 函数：

API	描述
angular.lowercase()	转换字符串为小写
angular.uppercase()	转换字符串为大写
angular.isString()	判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()	判断给定的对象是否为数字，如果是返回 true。

angular.isString()
angular.isNumber()
AngularJS Bootstrap
AngularJS Include(包含)
使用 AngularJS, 你可以在 HTML 中包含 HTML 文件。

在未来的HTML中包含 HTML 文件

在 HTML 中，目前还不支持包含 HTML 文件的功能。

W3C 已经建议 http://www.w3.org 在未来的 HTML 中支持包含HTML的功能，格式如下:

AngularJS 动画

ngAnimation和module是不同的模块。。。

AngularJS中ngAnimate模块支持动画效果，但是ngAnimate模块并未包含在AngularJS核心库中，因此需要使用ngAnimate需要在定义Module时声明对其的引用。

1.在html文档中引入ngAnimate模块：<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

2.1在定义Module时声明对其的引用：

var app=angular.module("myApp",["ngAnimate"])

或者，直接在HTML文档中定义ngAnimate，即：ng-app="ngAnimate"

AngularJS中实现动画效果有两大种方式：

基于CSS的动画效果
- CSS Transition Animation
- CSS Class-based Animation
基于Javascript的动画效果
CSS的动画效果是通过纯粹的css来实现动画，javascript通过脚本触发动画。两者都需要用到Angrular提供的一些特殊的类。
ngAnimate 做了什么?

ngAnimate 模型可以添加或移除 class 。

ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

AngularJS 添加/移除 class 的指令:
- ng-show
- ng-hide
- ng-class
- ng-view
- ng-include
- ng-repeat
- ng-if
- ng-switch
ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。

其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。

当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。

此外，在动画完成后，HTML 元素的类集合将被移除。例如：ng-hide 指令会添加一下类：
- ng-animate
- ng-hide-animate
- ng-hide-add (如果元素将被隐藏)
- ng-hide-remove (如果元素将显示)
- ng-hide-add-active (如果元素将隐藏)
- ng-hide-remove-active (如果元素将显示)

官方给出的能支持动画效果的Directives：

Directive	Supported Animations
ngRepeat	enter, leave and move
ngView	enter and leave
ngInclude	enter and leave
ngSwitch	enter and leave
ngIf	enter and leave
ngClass	add and remove (the CSS class(es) present)
ngShow & ngHide	add and remove (the ng-hide class value)
form & ngModel	add and remove (dirty, pristine, valid, invalid & all other validations)
ngMessages	add and remove (ng-active & ng-inactive)
ngMessage	enter and leave

1.ng-if 属性用来控制页面内元素的添加或移除。

代码运行情况如下：

当取消选中时，ckecked的值为false，因而ng-if的值为false，从而<span>标签被删除：

当再次选中时·，checked的值为true，因而ng-if的值为true，从而span表现被添加：

2.ng-switch

根据选中的值显示对应部分:

定义和用法

ng-switch 指令根据表达式显示或隐藏对应的部分。

对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。

你可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

举例：

显示：

当我们选中下拉菜单中的某一项，比如第一项：当我们选中下拉菜单中的某一项，比如第二项：

选中对应的某一项，则会添加对应的这一项的元素以及元素内容。

ng-if ng-switch ng-show ng-hide其实算是都是显示和隐藏。但是，注意：ngIf和ngShow/ngHide不同，ngIf在元素隐藏时DOM中并没有该元素，而使用ngShow/ngHide时元素依然存在于DOM中。

AngularJS 提供了动画效果，可以配合 CSS 使用。

一、基于CSS的动画效果:

CSS动画的特殊性在于你不需要写一行javascript就可以创建出炫酷的动画，这让我想到了Bootstrap，她只要在html元素上添加一些特定的属性就可以实现一些动画。Angularjs基于CSS实现动画的原理很简单，即，如果你为某个指令加上了一些类比如fade，而你在样式表中这样写.fade.ng-leave，这样如果元素没有ng-leave这个类，你加的fade的样式就不会被运用，但是Angularjs会监视我们的指令，当检测到指令进入某种状态时就会添加相应的类，从而你的样式就会被使用了，如此，动画就触发了。下面给个例子

示例一：

1.隐藏显示DIV（ng-app=""）

页面显示结果：

1.选中方框，这时mycheck=true，因而ng-hide的值=true，因此，div隐藏。即：

2,.取消选中，这时myckeck=false,因而ng-hide的值=false,因此，div显示，即：

2.隐藏显示DIV（ng-app="ngAnmat"）没有设置应用程序名称

显示结果：

1.当选中选框，mycheck=true , 也就说ng-hide=true,因而div隐藏。但是这里要注意，这里的div隐藏式通过ng-hide在css中设置了样式，缓慢地进行隐藏：

总结：也就是说。在ng-app="ngAnumate"中，可以通过指令属性在css中定义该指令的样式。但是在ng-app=""或者ng-app="myApp"中是不可以的。

	应用中动画不宜太多，但合适的使用动画可以增加页面的丰富性，也可以更易让用户理解。

3.如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中：

示例二：

实例

在 DIV 元素设置了 .ng-hide 类时, myChange 动画将执行，它会平滑的将高度从 100px 变为 0:

示例三：（ng-if）

注意：使用CSS Transition时，ng-EVENT（动画开始前的样式）和ng-EVENT-active（动画执行完毕后的样式）这两组样式必须同时出现，且在ng-EVENT中必须包含transition的设置。

本篇开头提到过，AngularJS核心库并不包含ngAnimate模块，因此我们首先需要在定义Module时，添加对ngAnimate模块引用的声明：

var app = angular.module('cssBasedAnimationTest', ['ngAnimate']);

使用ngIf（ng-if）来控制class="fade"的元素是否加载到DOM：

<div ng-if="bool" class="fade">

注意：ngIf和ngShow/ngHide不同，ngIf在元素隐藏时DOM中并没有该元素，而使用ngShow/ngHide时元素依然存在于DOM中。

点击"Fade In!"按钮时，加载div到DOM并触发enter，AngularJS对元素自动添加ng-enter和ng-enter-active的样式，并从ng-enter到ng-enter-active执行样式转换。为了能看清过程，我们将ng-enter中的过渡时间设置为5s，点击"Fade In!"按钮后观察Html的变化。

另外一种CSS transition的方法是使用CSS的Keyframe关键字，对于示例1中样式文件可改为如下：

ng-show ng-hide

Class-based Animation即为通过ngClass、ngShow、ngHide等Directives执行动画效果。

实际观察Html的变化，无论是ngShow还是ngHide，其实都是在隐藏元素时，默认添加ng-hide-animate、ng-hide-add、ng-hide-add-active样式。也就是针对像ngHide、ngShow等这些可以感知动画的Directives，由AngularJS的ngAnimate模块自动添加了CSS Transition动画。

AngularJS 依赖

AngularJS 中的 factory、 service 和 provider区别

1. 3种创建自定义服务的方式。
  1. Factory
  2. Service
  3. Provider
2. 大家应该知道，AngularJS是后台人员在工作之余发明的，他主要应用了后台早就存在的分层思想。所以我们得了解下分层的作用，如果你是前端人员不了解什么是分层，那么你最好问问你后台的小伙伴。
  dao层：就是Model层，在后台时，这一层的作用，就要是写与数据库交互数据的一层，在angularJS里就主要是写ajax的。
  service层：主查写逻辑代码的，但在angularJS里也可以持久化数据（充当数据容器），以供不同的controller高用。
  controller层：即控制层，在angularJS里就是写控制器的。控制器里尽量不要写那些不必要的逻辑，尽量写在service层里。
  所以，就有了创建自定义服务的三种方式。

factory

当使用factory来创建服务的时候，相当于新创建了一个对象，然后在这个对象上新添属性，最后返回这个对象。当把这个服务注入控制器的时候，控制器就可以访问在那个对象上的属性了。factory方式创建的服务，作用就是返回一个有属性有方法的对象。相当于：var f = myFactory();

service

二、当使用service创建服务的时候，相当于使用new关键词进行了实例化。因此，你只需要在this上添加属性和方法，然后，服务就会自动的返回this。当把这个服务注入控制器的时候，控制器就可以访问在那个对象上的属性了。

通过service方式创建自定义服务，相当于new的一个对象：var s = new myService();，只要把属性和方法添加到this上才可以在controller里调用。

（这里的service没有定义对象。）

service 通过 new 运算符进行实例化，可以认为是一个类型，只要把属性和方法添加到 this 对象上即可，不用显式返回什么对象，比如下面的代码：

app.service('MyService', function() {
this.greeting = 'Hello from service';
});
provider

provider是唯一一种可以创建用来注入到config()函数的服务的方式。想在你的服务启动之前，进行一些模块化的配置的话，就使用provider。与 factory 和 service 稍有不同的是， provider 必须提供一个 $get 方法， $get 方法和 factory 要求是一致的，即：先定义一个对象，给这个对象添加属性和方法，然后返回这个对象，例如：
综合例子
通过点击按钮计算用户输入的数的平方并显示出来。
重新输入6，点击按钮：

html中：


在js中：

var app=angular.module("myApp",[]);
app.config(function ($provide) {
    $provide.provider('myFactory', function() {
        this.$get = function() {
            var factory = {};

            factory.mul = function(a, b) {
                return a * b;
            };
            return factory;
        };
    });
});
app.value("A",5);
app.factory("myFactory",function () {
    var factory={};
    factory.mul=function (a,b) {
        return a*b;
    };
    return factory;
});
app.service("myService",function (myFactory) {
    this.square=function (a) {
        return myFactory.mul(a,a);
    }
    });
app.controller("mycontroller",function ($scope,myService,A) {
    $scope.num=A;
    $scope.result=myService.square($scope.num);
    $scope.square=function () {
        $scope.result=myService.square($scope.num);
    }
});

AngularJS 路由

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

通常我们的URL形式为 http://w3cschool.cn/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：
当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://w3cschool.cn/)。因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
在以上图形中，我们可以看到创建了两个 URL： /ShowOrders 和 /AddNewOrder。每个 URL 都有对应的视图和控制器。

转载于:https://www.cnblogs.com/yyn120804/p/7797630.html

anjiong1971

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS

Angular JS和jQuery都是JavaScript的框架，两个是平行框架jQuery添加到页面通过script：<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>AngularJS添加到页面通过script：<script src="http://ap...
复制链接

扫一扫