AngularJs学习笔记
基本定义：
1.ng-app = "" 定义了angularJs的使用范围;
2.ng-init = "变量 = 值;变量 = '值'" 初始化变量的值，有多个变量时，中间用分号隔开；
3.ng-model = "变量" 定义变量名;
4.ng-bind = "变量" 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。
但是一般都用双重花括号来获取变量的值，比如：{{变量}};
5.ng-repeat 指令会重复一个 HTML 元素：（可以用于循环遍历数组）
eg:5
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
AngularJs指令：是以ng作为前缀的HTML属性。
AngularJs表达式写在双大括号内{{expression}}。
AngularJs表达式把数据绑定到HTML,这与ng-bind 指令作用相同。
AngularJs将在表达式书写的位置"输出"数据。
AngularJS 表达式 与 JavaScript 表达式
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。
注意：
ng-model是用于表单元素的，支持双向绑定。对普通元素无效； <input> 元素 <select> 元素（下拉列表）<textarea> 元素 <button> 元素 HTML5 增加了如下表单元素：<datalist><keygen><output>
ng-bind用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素；
当ng-bind和{{}}同时使用时，ng-bind绑定的值覆盖该元素的内容。
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：
ng-invalid:未通过验证的表单
ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true
ng-dirty:布尔值属性，表示用户是否修改了表单。如果为 ture，表示有修改过；false 表示修没有修改过
ng-touched:布尔值属性，表示用户是否和控件进行过交互
ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过
$rootscope设置的变量在所有controller里面都是可以直接用{{$root.变量名}}来显示的，当然也可以赋值给$scope.
$rootscope是根作用域，是整个应用程序（ng-app），$scope只作用于本个方法
js中split(),如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
String.split() 执行的操作与 Array.join 执行的操作是相反的。
"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]
"|a|b|c".split("|") //将返回["", "a", "b", "c"]
AngularJS过滤器
currency 格式化数字为货币格式。
{{ 250 | currency }} // 结果：$250.00
{{ 250 | currency:"RMB ￥ " }} // 结果：RMB ￥ 250.00
filter 从数组项中选择一个子集。
// 查找name为iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
// 根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}
// 根据id升序排 默认升序false
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}
uppercase 格式化字符串为大写。
date格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
number 格式化（保留小数）
{{149016.1945000 | number:2}}
limitTo 截取
{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位
Array.prototype.slice.call(arguments);
<div ng-app = "myApp" ng-controller = "myCtrl">
<span>{{myUrl}}<span>
</div>
<script>
angular.module("myApp",[]).controller('myCtrl',function($scope,$location){
$scope.myUrl = $location.absUrl();
});
</script>
$location 服务，它可以返回当前页面的 URL 地址。
$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
AngularJS $timeout 服务对应了 JS window.setTimeout 函数。(Timer)
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);
});
$watch：持续监听数据上的变化，更新界面，如：
<div ng-app="myApp" ng-controller="myCtrl">
<b>请输入姓名：</b><br>
<b>姓：</b><input type="text" ng-model="lastName"><br>
<b>名：</b><input type="text" ng-model="firstName"><br>
<h1>{{ lastName + " " + firstName }}</h1>
<h2>{{ fullName }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.lastName = "";
$scope.firstName = "";
//监听lastName的变化，更新fullName
$scope.$watch('lastName', function() {
$scope.fullName = $scope.lastName + " " + $scope.firstName;
});
//监听firstName的变化，更新fullName
$scope.$watch('firstName', function() {
$scope.fullName = $scope.lastName + " " + $scope.firstName;
});
});
</script>
如果通过$watch去监听某变量的变化，最后去更新一个fullName就太麻烦了，还倒不如使用函数的方式，如getFullName()：
$scope.getFullName =function(){ return $scope.lastName + " " + $scope.firstName;}
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
使用 ng-options 创建选择框（使用了数组作为数据源）
在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
这种是通过ng-repeat方式创建的下拉框
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
比较：
ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：
使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。
使用了对象作为数据源：x 为键(key), y 为值(value):
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
表格
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
style{table tr:nth-child(odd){};} 表格中的奇数行
style{table tr:nth-child(even);} 表格中的偶数行
$index: <td>{{ $index + 1 }}</td>//表格显示序号
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<tr ng-repeat="x in names" style="{{$even?'background-color: #f1f1f1':'background-color: #ff0000'}}">
允许跨域请求
header("Access-Control-Allow-Origin: *");
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
ng-show 指令隐藏或显示一个 HTML 元素。ng-hide 指令用于隐藏或显示 HTML 元素。
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">我是可见的。</p> 可以是布尔值的表达式
</div>
AngularJS事件
1.ng-click点击事件 所有的操作都是通过Controller来完成的
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p> //类似ng-model是双向绑定的，类似监听者模式（响应式）
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
AngularJS表单
HTML控件：input元素，select元素,button元素,textarea元素
input控件使用ng-model指令来实现数据绑定
<input type = "text" ng-model = "firstName">
通过以上代码应用有了一个firstName的属性。它通过ng-model指令来绑定到你的应用
firstName的属性可以在controller中使用：
var app = angular.module('myApp',[]);
app.controller($scope,function(){
$scope.firstName = "Tom";
});
也可以直接通过表达式来使用这个属性
<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>你输入的内容为: {{firstname}}</h1>
</div>
Checkbox(复选框),默认是false,未被选中
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
Radio(单选框) myVar 的值可以是 dogs, tuts, 或 cars。
<body ng-app="">
<form>
选择一个选项:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
</div>
<p>ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。</p>
</body>
select(下拉框)
<body ng-app="">
<form>
选择一个选项:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
</div>
<p>ng-switch 指令根据下拉菜单的选择结果显示或隐藏 HTML 区域。</p>
</body>
app.controller('formCtrl', function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
输入验证 HTML 表单属性 novalidate 用于禁用浏览器默认的验证。
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
<body>
<h2>验证实例</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
AngularJS API
angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。
使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:
sites.htm 文件代码：
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Url }}</td>
</tr>
</table>
<div ng-app="myApp" ng-controller="sitesCtrl">
<div ng-include="'sites.htm'"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sitesCtrl', function($scope, $http) {
$http.get("sites.php").then(function (response) {
$scope.names = response.data.records;
});
});
</script>
AngularJS 动画
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
还需在应用中使用模型 ngAnimate：
<body ng-app="ngAnimate">
<style>
.hh {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">
<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div class = "hh" ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
AngularJS 依赖注入
一句话 --- 没事你不要来找我，有事我会去找你。
1.一个对别人有依赖的东西，它想要单独测试，就需要在依赖项齐备的情况下进行。如果我们在运行时注入，就可以减少这种依赖
2.参数由定义方决定
3.与import还不完全一样
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
value
factory
service
provider
constant
1.Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：
// 定义一个模块
var mainApp = angular.module("mainApp", []);
// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...
// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
});
2.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);
}
});
...
3.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;
};
});
});
4.constant
constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。
mainApp.constant("configParam", "constant value");
练习：自定义directive（指令）
元素
<first/>
<second/>
angular.module('MyApp',[])
.directive('first',first)
.controller('Con',['$scope',func1]);
function first(){
var directive = {
restrict:'ACE',
template:'this is the it-first directive',
};
return directive;
};
fucntion func1($scope){
$scope.name = 'alice';
}
等价于 ：
angular.module('myApp',[]).directive('first',[function(){
return {
restrict:'AE',
template:'second directive',
link:function(){
console.log("this is a link");
},
controller:function($scope,$element,$attrs){
console.log("this is a con");
}
};
}]).controller('Con1',['$scope',function($scope){
$scope.name = "alicehhh";
}]);
基本定义：
1.ng-app = "" 定义了angularJs的使用范围;
2.ng-init = "变量 = 值;变量 = '值'" 初始化变量的值，有多个变量时，中间用分号隔开；
3.ng-model = "变量" 定义变量名;
4.ng-bind = "变量" 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。
但是一般都用双重花括号来获取变量的值，比如：{{变量}};
5.ng-repeat 指令会重复一个 HTML 元素：（可以用于循环遍历数组）
eg:5
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
AngularJs指令：是以ng作为前缀的HTML属性。
AngularJs表达式写在双大括号内{{expression}}。
AngularJs表达式把数据绑定到HTML,这与ng-bind 指令作用相同。
AngularJs将在表达式书写的位置"输出"数据。
AngularJS 表达式 与 JavaScript 表达式
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。
注意：
ng-model是用于表单元素的，支持双向绑定。对普通元素无效； <input> 元素 <select> 元素（下拉列表）<textarea> 元素 <button> 元素 HTML5 增加了如下表单元素：<datalist><keygen><output>
ng-bind用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素；
当ng-bind和{{}}同时使用时，ng-bind绑定的值覆盖该元素的内容。
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：
ng-invalid:未通过验证的表单
ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true
ng-dirty:布尔值属性，表示用户是否修改了表单。如果为 ture，表示有修改过；false 表示修没有修改过
ng-touched:布尔值属性，表示用户是否和控件进行过交互
ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过
$rootscope设置的变量在所有controller里面都是可以直接用{{$root.变量名}}来显示的，当然也可以赋值给$scope.
$rootscope是根作用域，是整个应用程序（ng-app），$scope只作用于本个方法
js中split(),如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
String.split() 执行的操作与 Array.join 执行的操作是相反的。
"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]
"|a|b|c".split("|") //将返回["", "a", "b", "c"]
AngularJS过滤器
currency 格式化数字为货币格式。
{{ 250 | currency }} // 结果：$250.00
{{ 250 | currency:"RMB ￥ " }} // 结果：RMB ￥ 250.00
filter 从数组项中选择一个子集。
// 查找name为iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
// 根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}
// 根据id升序排 默认升序false
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}
uppercase 格式化字符串为大写。
date格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
number 格式化（保留小数）
{{149016.1945000 | number:2}}
limitTo 截取
{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位
Array.prototype.slice.call(arguments);
<div ng-app = "myApp" ng-controller = "myCtrl">
<span>{{myUrl}}<span>
</div>
<script>
angular.module("myApp",[]).controller('myCtrl',function($scope,$location){
$scope.myUrl = $location.absUrl();
});
</script>
$location 服务，它可以返回当前页面的 URL 地址。
$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
AngularJS $timeout 服务对应了 JS window.setTimeout 函数。(Timer)
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);
});
$watch：持续监听数据上的变化，更新界面，如：
<div ng-app="myApp" ng-controller="myCtrl">
<b>请输入姓名：</b><br>
<b>姓：</b><input type="text" ng-model="lastName"><br>
<b>名：</b><input type="text" ng-model="firstName"><br>
<h1>{{ lastName + " " + firstName }}</h1>
<h2>{{ fullName }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.lastName = "";
$scope.firstName = "";
//监听lastName的变化，更新fullName
$scope.$watch('lastName', function() {
$scope.fullName = $scope.lastName + " " + $scope.firstName;
});
//监听firstName的变化，更新fullName
$scope.$watch('firstName', function() {
$scope.fullName = $scope.lastName + " " + $scope.firstName;
});
});
</script>
如果通过$watch去监听某变量的变化，最后去更新一个fullName就太麻烦了，还倒不如使用函数的方式，如getFullName()：
$scope.getFullName =function(){ return $scope.lastName + " " + $scope.firstName;}
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
使用 ng-options 创建选择框（使用了数组作为数据源）
在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
这种是通过ng-repeat方式创建的下拉框
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
比较：
ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：
使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。
使用了对象作为数据源：x 为键(key), y 为值(value):
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
表格
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
style{table tr:nth-child(odd){};} 表格中的奇数行
style{table tr:nth-child(even);} 表格中的偶数行
$index: <td>{{ $index + 1 }}</td>//表格显示序号
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<tr ng-repeat="x in names" style="{{$even?'background-color: #f1f1f1':'background-color: #ff0000'}}">
允许跨域请求
header("Access-Control-Allow-Origin: *");
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
ng-show 指令隐藏或显示一个 HTML 元素。ng-hide 指令用于隐藏或显示 HTML 元素。
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">我是可见的。</p> 可以是布尔值的表达式
</div>
AngularJS事件
1.ng-click点击事件 所有的操作都是通过Controller来完成的
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p> //类似ng-model是双向绑定的，类似监听者模式（响应式）
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
AngularJS表单
HTML控件：input元素，select元素,button元素,textarea元素
input控件使用ng-model指令来实现数据绑定
<input type = "text" ng-model = "firstName">
通过以上代码应用有了一个firstName的属性。它通过ng-model指令来绑定到你的应用
firstName的属性可以在controller中使用：
var app = angular.module('myApp',[]);
app.controller($scope,function(){
$scope.firstName = "Tom";
});
也可以直接通过表达式来使用这个属性
<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>你输入的内容为: {{firstname}}</h1>
</div>
Checkbox(复选框),默认是false,未被选中
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
Radio(单选框) myVar 的值可以是 dogs, tuts, 或 cars。
<body ng-app="">
<form>
选择一个选项:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
</div>
<p>ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。</p>
</body>
select(下拉框)
<body ng-app="">
<form>
选择一个选项:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
</div>
<p>ng-switch 指令根据下拉菜单的选择结果显示或隐藏 HTML 区域。</p>
</body>
app.controller('formCtrl', function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
输入验证 HTML 表单属性 novalidate 用于禁用浏览器默认的验证。
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
<body>
<h2>验证实例</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
AngularJS API
angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。
使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:
sites.htm 文件代码：
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Url }}</td>
</tr>
</table>
<div ng-app="myApp" ng-controller="sitesCtrl">
<div ng-include="'sites.htm'"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sitesCtrl', function($scope, $http) {
$http.get("sites.php").then(function (response) {
$scope.names = response.data.records;
});
});
</script>
AngularJS 动画
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
还需在应用中使用模型 ngAnimate：
<body ng-app="ngAnimate">
<style>
.hh {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">
<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div class = "hh" ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
AngularJS 依赖注入
一句话 --- 没事你不要来找我，有事我会去找你。
1.一个对别人有依赖的东西，它想要单独测试，就需要在依赖项齐备的情况下进行。如果我们在运行时注入，就可以减少这种依赖
2.参数由定义方决定
3.与import还不完全一样
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
value
factory
service
provider
constant
1.Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：
// 定义一个模块
var mainApp = angular.module("mainApp", []);
// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...
// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
});
2.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);
}
});
...
3.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;
};
});
});
4.constant
constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。
mainApp.constant("configParam", "constant value");
练习：自定义directive（指令）
元素
<first/>
<second/>
angular.module('MyApp',[])
.directive('first',first)
.controller('Con',['$scope',func1]);
function first(){
var directive = {
restrict:'ACE',
template:'this is the it-first directive',
};
return directive;
};
fucntion func1($scope){
$scope.name = 'alice';
}
等价于 ：
angular.module('myApp',[]).directive('first',[function(){
return {
restrict:'AE',
template:'second directive',
link:function(){
console.log("this is a link");
},
controller:function($scope,$element,$attrs){
console.log("this is a con");
}
};
}]).controller('Con1',['$scope',function($scope){
$scope.name = "alicehhh";
}]);