http://www.runoob.com/angularjs/angularjs-tutorial.html
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<scriptsrc="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
简介:
Ø AngularJS 通过 ng-directives 扩展了 HTML。
Ø AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
Ø ng-app 指令定义一个 AngularJS 应用程序。
Ø ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
Ø ng-bind 指令把应用程序数据绑定到 HTML 视图。
Ø ng-controller 定义了控制器。
表达式:
Ø AngularJS 表达式写在双大括号内:{{ expression }}。
Ø AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
Ø AngularJS 对象就像 JavaScript 对象:
<divng-app=""ng-init="person={firstName:'John',lastName:'Doe'}"></div>
Ø AngularJS 数组就像 JavaScript 数组: ng-init="points=[1,15,19,2,40]"
AngularJS 指令:
Ø ng-repeat 指令会重复一个 HTML 元素:
<div ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<ling-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Ø ng-repeat 指令用在一个对象数组上。
Ø 创建自定义的指令
除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令,HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令,runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:。
调用方式:元素名,属性,类名,注释
Ø 你可以限制你的指令只能通过特定的方式来调用。
通过添加 restrict属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:
Scope(作用域)
Ø 当你在 AngularJS创建控制器时,你可以将 $scope 对象当作一个参数传递
Ø 所有的应用都有一个$rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
过滤器
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
<div ng-app="myApp"ng-controller="personCtrl">
<p>姓名为 {{lastName | uppercase }}</p>
</div>
服务(Service)
Ø $location 服务,它可以返回当前页面的 URL 地址。$location.absUrl();
注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它,需要在 controller 中定义。
var app = angular.module('myApp', []);
app.controller('customersCtrl',function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Ø $http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求,应用响应服务器传送过来的数据。
Ø AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
Ø AngularJS $interval 服务对应了 JS window.setInterval 函数。
Ø 你可以创建自定义的访问(服务),链接到你的模块中:
当你创建了自定义服务,并连接到你的应用上后,你可以在控制器,指令,过滤器或其他服务中使用它。
XMLHttpRequest
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。
Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项。
Ø 在 AngularJS 中我们可以使用ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,选项的是一个对象
Ø 我们也可以使用ng-repeat指令来创建下拉列表,选择的值是一个字符串:
表格
Ø ng-repeat 指令可以完美的显示表格。
SQL
以下列出了列出了几种服务端代码类型:
使用 PHP 和 MySQL。返回 JSON。
使用 PHP 和 MS Access。返回 JSON。
使用 ASP.NET, VB, 及 MS Access。返回 JSON。
使用 ASP.NET, Razor, 及 SQL Lite。返回 JSON。
HTML DOM
AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。
Ø ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
Ø ng-show 指令隐藏或显示一个 HTML 元素。
Ø ng-hide 指令用于隐藏或显示 HTML 元素。
事件
Ø ng-click 指令定义了 AngularJS 点击事件。
Ø toggle() 函数用于切换 myVar 变量的值(true 和 false)。
模块
模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。
Ø angular.module 函数来创建模块:
表单
以下 HTML input 元素被称为 HTML 控件:
input 元素
select 元素
button 元素
textarea 元素
Ø formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法。
reset() 方法设置了 user 对象等于 master 对象。
ng-click 指令调用了 reset() 方法,且在点击按钮时调用。
novalidate 属性在应用中不是必须的,但是你需要在AngularJS 表单中使用,用于重写标准的 HTML5 验证。
输入验证
AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性: user 和 email。
我们使用了 ng-show指令, color:red 在邮件是 $dirty 或 $invalid 才显示。
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
API
AngularJS 全局 API 用于执行常见任务的JavaScript 函数集合,如:
比较对象
迭代对象
转换对象
angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串,如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字,如果是返回 true。
Bootstrap
AngularJS 的首选样式表是 TwitterBootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架。
<link rel="stylesheet"href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
国内:<link rel="stylesheet"href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
Scope 属性 用途
$scope.fName 模型变量 (用户名)
$scope.lName 模型变量 (用户姓)
$scope.passw1 模型变量 (用户密码 1)
$scope.passw2 模型变量 (用户密码 2)
$scope.users 模型变量 (用户的数组)
$scope.edit 当用户点击创建用户时设置为true。
$scope.error 如果 passw1 不等于 passw2 设置为 true
$scope.incomplete 如果每个字段都为空(length = 0)设置为 true
$scope.editUser 设置模型变量
$scope.watch 监控模型变量
$scope.test 验证模型变量的错误和完整性
包含
Ø 大多服务端脚本都支持包含文件功能 (SSI: Server Side Includes)。
使用 SSI, 你可在 HTML 中包含 HTML 文件,并发送到客户端浏览器。
<?phprequire("navigation.php"); ?>
Ø 通过 JavaScript有很多种方式可以在 HTML 中包含 HTML 文件。
通常我们使用 http 请求 (AJAX) 从服务端获取数据,返回的数据我们可以通过使用 innerHTML 写入到 HTML 元素中。
动画
Ø AngularJS 提供了动画效果,可以配合 CSS 使用。
Ø AngularJS 使用动画需要引入 angular-animate.min.js 库。
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
Ø 还需在应用中使用模型ngAnimate:
<body ng-app="ngAnimate">
依赖注入
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入:
value 一个简单的javascript 对象,用于向控制器传递值(配置阶段):
factory 是一个函数用于返回值。在service 和 controller 需要时创建。通常我们使用 factory 函数来计算或返回值。
service
provider 通过 provider 创建一个 service、factory等(配置阶段)。Provider 中提供了一个factory 方法 get(),它用于返回 value/service/factory。
constant (常量)用来在配置阶段传递数值,注意这个常量在配置阶段是不可用的。
路由
Ø 通常我们的URL形式为http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记实现
Ø AngularJS 路由也可以通过不同的模板来实现。
$routeProvider.when 函数的第一个参数是 URL或者 URL 正则规则,第二个参数为路由配置对象。
路由配置对象语法规则如下:
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});