AngularJS Tips

可以做什么

1. 绑定应用到元素. e.g.: ng-app

2. 克隆和重复元素。e.g.: ng-repeat

3. 隐藏和显示元素。e.g.: ng-hide, ng-show, ng-if

4. 在元素“背后”加代码

5. 可以做输入校验

注意: HTML5页面中，要将前缀dg-改成data-dg-。

---

Angular 表达式

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

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

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

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

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

与JavaScript 表达式对比

• 类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

• 与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

• 与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

• 与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

---

AngularJS 指令

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

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

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

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

自定义指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

你可以通过以下方式来调用指令：

• 元素名

• 属性

• 类名

• 注释

限制自定义指令调用方式

通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {return {restrict : "A",template : "
自定义指令!
"};
});

restrict 值可以是以下几种:

• E 作为元素名使用

• A 作为属性使用

• C 作为类名使用

• M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

---

AngularJS 模型 (ng-model 指令)

ng-model 指令

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

双向绑定

双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：

​名字: 
​
你输入了: {{name}}
​

验证用户输入

Email:不是一个合法的邮箱地址

应用状态

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

Email:
状态
{{myForm.myAddress.$valid}}{{myForm.myAddress.$dirty}}{{myForm.myAddress.$touched}}

CSS 类

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

​
输入你的名字:

ng-model 指令根据表单域的状态添加/移除以下类：

• ng-empty

• ng-not-empty

• ng-touched

• ng-untouched

• ng-valid

• ng-invalid

• ng-dirty

• ng-pending

• ng-pristine

---

AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

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

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

如何使用 Scope

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

​
{{carname}}
​

​

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

Scope概述

AngularJS 应用组成如下：

• View(视图), 即 HTML。

• Model(模型), 当前视图中可用的数据。

• Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。

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

{{greeting}}
点我    

Scope 作用范围

了解你当前使用的 scope 是非常重要的。

在以上两个实例中，只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。

根作用域

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

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

AngularJS 控制器(ng-controller对应的.controller)

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

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

​
名: 

姓: 



姓名: {{firstName + " " + lastName}}
​

​

应用解析：

AngularJS 应用程序由 ng-app 定义。应用程序在 内运行。

ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。

myCtrl 函数是一个 JavaScript 函数。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。

控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

控制器方法

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

控制器也可以有方法（变量和函数）：

​
名: 

姓: 



姓名: {{fullName()}}
​

​

AngularJS 过滤器

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

AngularJS 过滤器用途

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

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

表达式中添加过滤器

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

比如我们项目中用到的本地化消息：

{{msg_id | translate}}

过滤输入

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

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

​

​
{{ (x.name | uppercase) + ', ' + x.country }}

​

根据输入来过滤。

AngularJS 服务(Service)

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

什么是服务？

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

AngularJS 内建了30 多个服务。

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

$location vs window.location

	window.location	$location.service
目的	允许对当前浏览器位置进行读写操作	允许对当前浏览器位置进行读写操作
API	暴露一个能被读写的对象	暴露jquery风格的读写器
是否在AngularJS应用生命周期中和应用整合	否	可获取到应用声明周期内的每一个阶段，并且和$watch整合
是否和HTML5 API的无缝整合	否	是（对低级浏览器优雅降级）
和应用的上下文是否相关	否，window.location.path返回"/docroot/actual/path"	是，$location.path()返回"/actual/path"

 

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

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

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

 

创建自定义服务

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

app.service('hexafy', function() {this.myFunc = function (x) {return x.toString(16);}
});
​
app.controller('myCtrl', function($scope, hexafy) {$scope.hex = hexafy.myFunc(255);
});

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

​

{{x | myFormat}}

---

AngularJS HTTP

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

 
{{ x.Name + ', ' + x.Country }}

应用解析:

注意：以上代码的 get 请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上，附：PHP Ajax 跨域问题最佳解决方案。

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

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

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

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

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

服务器数据文件为：  http://www.runoob.com/try/angularjs/data/sites.php。

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

---

AngularJS Select(选择框)

使用 ng-options 创建选择框

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

$scope.sites = [{site : "Google", url : "http://www.google.com"},{site : "Runoob", url : "http://www.runoob.com"},{site : "Taobao", url : "http://www.taobao.com"}
];

​
你选择的是: {{selectedSite.site}}
网址为: {{selectedSite.url}}

而ng-repeat:

{{x.site}}

​
你选择的是: {{selectedSite}}

AngularJS 表格

{{ x.Name }}
{{ x.Name }}
{{ x.Country }}
{{ x.Country }}

AngularJS HTML DOM

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。(参数可以为表达式)

ng-show 指令隐藏或显示一个 HTML 元素。(参数可以为表达式)

ng-hide 指令用于隐藏或显示 HTML 元素。(参数可以为表达式)

ng-click 指令定义了 AngularJS 点击事件。

AngularJS 模块

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

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

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

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

什么时候载入库?

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

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

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

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

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

AngularJS 表单

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

First Name:

Last Name:


RESET
form = {{user}}
master = {{master}}

​

AngularJS 输入验证

​
Validation Example
​

​
用户名:
用户名是必须的。

​
邮箱:
邮箱是必须的。非法的邮箱。

​


​

​

​

属性	描述
$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录

AngularJS 全局 API

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

• 比较对象

• 迭代对象

• 转换对象

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

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

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

AngularJS Bootstrap

Bootstrap

你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 元素中添加如下代码:

如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：

以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。

​

​
Users
​
Edit
First Name
Last Name
  Edit
{{ user.fName }}
{{ user.lName }}

​

 Create New User


​
Create New User:
Edit User:
​

First Name:
 
Last Name:

Password:

Repeat:


​

 Save Changes


​



AngularJS 包含
使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:

跨域包含

默认情况下， ng-include 指令不允许包含其他域名的文件。

如果你需要包含其他域名的文件，你需要设置域名访问白名单：

AngularJS 依赖注入

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

• value

• factory

• service

• provider

• constant

value

Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：

// 定义一个模块
var mainApp = angular.module("mainApp", []);
​
// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...
​
// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {$scope.number = defaultInput;$scope.result = CalcService.square($scope.number);$scope.square = function() {$scope.result = CalcService.square($scope.number);}
});

factory

factory 是一个函数用于返回值。在 service 和 controller 需要时创建。

通常我们使用 factory 函数来计算或返回值。

// 定义一个模块
var mainApp = angular.module("mainApp", []);
​
// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {var factory = {};factory.multiply = function(a, b) {return a * b}return factory;
}); 
​
// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){this.square = function(a) {return MathService.multiply(a,a);}
});

provider

AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。

Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。

// 定义一个模块
var mainApp = angular.module("mainApp", []);
...
​
// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {$provide.provider('MathService', function() {this.$get = function() {var factory = {};  factory.multiply = function(a, b) {return a * b; }return factory;};});
});

constant

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

mainApp.constant("configParam", "constant value");

AngularJS 路由

本章节我们将为大家介绍 AngularJS 路由。

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

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

通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：

http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

 

 

路由设置对象

$stateProvider.state('app.customers.detail', {url: '/{prospectId}',views: {'content@': {templateUrl: 'customer/customer_detail.html',controller: 'customerDetailController'}}
})

参数说明：

• template:

  如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：

  .when('/computers',{template:'这是电脑分类页面'})

   

• templateUrl:

  如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

  $routeProvider.when('/computers', {templateUrl: 'views/computers.html',
  });

  以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。

• controller:

  function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。

• controllerAs:

  string类型，为controller指定别名。

• redirectTo:

  重定向的地址。

• resolve:

  指定当前controller所依赖的其他模块。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！