angular 笔记

ng-model 指令
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以:
为应用程序数据提供类型验证(number、email、required)。
为应用程序数据提供状态(invalid、dirty、touched、error)。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

创建自定义的指令
除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令,HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

你可以通过以下方式来调用指令:
元素名
属性
类名
注释

AngularJS 实例







元素名

属性


类名

注释

限制使用
你可以限制你的指令只能通过特定的方式来调用。
实例
通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:

restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。


Email:

编辑邮箱地址,查看状态的改变。

状态

Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。

Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。

Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。

编辑邮箱地址,查看状态的改变。

状态

Valid: true (如果输入的值是合法的则为 true)。

Dirty: false (如果值改变则为 true)。

Touched: false (如果通过触屏点击则为 true)。





输入你的名字:

编辑文本域,不同状态背景颜色会发送变化。

文本域添加了 required 属性,该值是必须的,如果为空则是不合法的。

ng-model 指令根据表单域的状态添加/移除以下类:
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。
视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}。

Scope 概述
AngularJS 应用组成如下:
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。

Scope 作用范围
了解你当前使用的 scope 是非常重要的。
在以上两个实例中,只有一个作用域 scope,所以处理起来比较简单,但在大型项目中, HTML DOM 中有多个作用域,这时你就需要知道你使用的 scope 对应的作用域是哪一个。

根作用域
所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。

应用解析:
AngularJS 应用程序由 ng-app 定义。应用程序在

内运行。
ng-controller="myCtrl"属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中, $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。

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

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

AngularJS 服务(Service)
AngularJS 中你可以创建自己的服务,或使用内建服务。
什么是服务?
在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
有个 $location 服务,它可以返回当前页面的 URL 地址。
注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它,需要在 controller 中定义。
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
为什么使用服务?
$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求,应用响应服务器传送过来的数据。
AngularJS 会一直监控应用,处理事件变化, AngularJS 使用 $location 服务比使用 window.location 对象更好。

$http 服务
$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。
$timeout 服务
AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
$interval 服务
AngularJS $interval 服务对应了 JS window.setInterval 函数。

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

自定义服务,用于转换16进制数:


toString() 方法可把一个逻辑值转换为字符串,并返回结果。

语法
booleanObject.toString()
返回值
根据原始布尔值或者 booleanObject 对象的值返回字符串 "true" 或 "false"。
抛出
如果调用该方法的对象不是 Boolean,则抛出异常 TypeError。
提示和注释
注释:在 Boolean 对象被用于字符串环境中时,此方法会被自动调用。
实例
在本例中,我们将创建一个 Boolean 对象,并把它转换成字符串:

输出:
true

AngularJS XMLHttpRequest
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。

var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/sites.php")
.success(function (response) {$scope.names = response.sites;});
});

AngularJS Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项。
使用 ng-options 创建选择框
在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出。
ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表,但 ng-options 指令更适合创建下拉列表,它有以下优势:
使用 ng-options 的选项的一个对象, ng-repeat 是一个字符串。
ng-repeat 有局限性,选择的值是一个字符串:
使用 ng-options 指令,选择的值是一个对象:
当选择值是一个对象时,我们就可以获取更多信息,应用也更灵活。

AngularJS 表格
使用 CSS 样式 让页面更加美观
使用 orderBy 过滤器 排序显示
使用 uppercase 过滤器转换为大写:
显示序号 ($index)
表格显示序号可以在 中添加 $index:
使用 $even 和 $odd









{{ x.Name }}

{{ x.Name }}

{{ x.Country }}

{{ x.Country }}

AngularJS SQL
服务端代码
以下列出了列出了几种服务端代码类型:
使用 PHP 和 MySQL。返回 JSON。
使用 PHP 和 MS Access。返回 JSON。
使用 ASP.NET, VB, 及 MS Access。 返回 JSON。

跨域 HTTP 请求
如果你需要从不同的服务器(不同域名)上获取数据就需要使用跨域 HTTP 请求。
跨域请求在网页上非常常见。很多网页从不同服务器上载入 CSS, 图片,Js脚本等。
在现代浏览器中,为了数据的安全,所有请求被严格限制在同一域名下,如果需要调用不同站点的数据,需要通过跨域来解决。
以下的 PHP 代码运行使用的网站进行跨域访问。
header("Access-Control-Allow-Origin: *");

PHP Ajax 跨域问题最佳解决方案
分类 编程技术
本文通过设置Access-Control-Allow-Origin来实现跨域。
例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com。
如果直接使用ajax访问,会有以下错误:
XMLHttpRequest cannot load http://server.runoob.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://client.runoob.com' is therefore not allowed access.
1、允许单个域名访问
指定某域名(http://client.runoob.com)跨域访问,则只需在http://server.runoob.com/server.php文件头部添加如下代码:
header('Access-Control-Allow-Origin:http://client.runoob.com');
2、允许多个域名访问
指定多个域名(http://client1.runoob.com、http://client2.runoob.com等)跨域访问,则只需在http://server.runoob.com/server.php文件头部添加如下代码:
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';

$allow_origin = array(
'http://client1.runoob.com',
'http://client2.runoob.com'
);

if(in_array($origin, $allow_origin)){
header('Access-Control-Allow-Origin:'.$origin);
}
3、允许所有域名访问
允许所有域名访问则只需在http://server.runoob.com/server.php文件头部添加如下代码:
header('Access-Control-Allow-Origin:*');
使用 ASP.NET, Razor, 及 SQL Lite。 返回 JSON。

AngularJS HTML DOM
AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。
ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。






按钮



{{ mySwitch }}


AngularJS 事件
ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。
ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容(value)。
如果 mySwitch 为false, 按钮将不可用:

ng-show 指令
ng-show 指令隐藏或显示一个 HTML 元素。
ng-show 指令根据 value 的值来显示(隐藏)HTML 元素。
你可以使用表达式来计算布尔值( true 或 false):
单独写一个值例如ng-show="1"也可以显示

AngularJS 模块
模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。

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

...


"myApp" 参数对应执行应用的 HTML 元素。
现在你可以在 AngularJS 应用中添加控制器,指令,过滤器等。

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

添加指令
AngularJS 提供了很多内置的指令,你可以使用它们来为你的应用添加功能
此外,你可以使用模块来为你应用添加自己的指令:

AngularJS 有自己的 HTML 事件指令。
ng-click 指令
ng-click 指令定义了 AngularJS 点击事件。

隐藏 HTML 元素
ng-hide 指令用于设置应用部分是否可见。
ng-hide="true" 设置 HTML 元素不可见。
ng-hide="false" 设置 HTML 元素可见。

创建自定义的指令
除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令,HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
AngularJS 实例

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

函数会影响到全局命名空间
JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。
AngularJS 模块让所有函数的作用域在该模块下,避免了该问题。

对于 HTML 应用程序,通常建议把所有的脚本都放置在 元素的最底部。
这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。
在我们的多个 AngularJS 实例中,您将看到 AngularJS 库是在文档的 区域被加载。
AngularJS 在 元素中被加载,因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 元素中加载 AngularJS 库,但是必须放置在您的 AngularJS 脚本前面:

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

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

HTML 表单
HTML 表单通常与 HTML 控件同时存在。

例子:



First Name:



Last Name:







form = {{user }}


master = {{master}}


实例解析
ng-app 指令定义了 AngularJS 应用。
ng-controller 指令定义了应用控制器。
ng-model 指令绑定了两个 input 元素到模型的 user 对象。
formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法。
reset() 方法设置了 user 对象等于 master 对象。
ng-click 指令调用了 reset() 方法,且在点击按钮时调用。
novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。
novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。

AngularJS 输入验证
AngularJS 表单和控件可以验证输入的数据。
AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。
客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的。

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

AngularJS API
API 意为 Application Programming Interface(应用程序编程接口)。

angular.isString($scope.abs) $scope.abs为字符串则返回true,否则返回false;
angular.isNumber($scope.abs) $scope.abs为数字则返回true,否则返回false;

AngularJS Bootstrap
AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架。

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

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

Bootstrap 类解析
元素 Bootstrap 类 定义

container 内容容器
table 表格
table-striped 带条纹背景的表格

结果: {{result}}


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 路由 就通过 # + 标记
帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。



AngularJS 路由实例 - 菜鸟教程

    

AngularJS 路由应用

实例解析:
1、载入了实现路由的 js 文件:angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
angular.module('routingDemoApp',['ngRoute'])
3、使用 ngView 指令。


该 div 内的 HTML 内容会根据路由的变化而变化。
4、配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI,我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:
第一个参数是 URL 或者 URL 正则规则。
第二个参数是路由配置对象。

你可能感兴趣的:(angular 笔记)