Angular JS
Angular JS 是一个JavaScript框架。他可以通过
<script>标签添加到HTML页面。他是通过指令扩展了HTML，且通过表达式绑定数据到HTML。本文主要讲述表达式、指令和模型。
简介
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
Angular JS 扩展 HTML
- 它通过ng-directives扩展。
- ng-app 指令定义了一个AngularJS应用程序。
- ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
- ng-bind 指令把应用程序数据绑定到 HTML 视图。
指令
1. ng-app 指令
ng-app指令告诉AngularJS，该元素是angularJS 应用程序，该元素内的所有angularJS只能才能真正的执行，如果移除了ng-app指令，HTML将无法识别AngularJS指令和表达式。 ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用，相当于id的作用；ng-app可以出现在html文档的任何一个元素上。
2. ng-model 指令
ng-model指令把输入域的值绑定到另一个应用程序，将输入域输入的值赋给另一个元素，是用于表单元素的，支持双向绑定。对普通元素无效；。它还可以给应用程序数据提供类型验证（number、email、required）和状态（invalid、dirty、touched、error，也能为HTML提供CSS类。
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类
ng-invalid:未通过验证的表单。
ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true。
ng-dirty:布尔值属性，表示用户是否修改了表单。如果为 ture，表示有修改过；false 表示修没有修改过。
ng-touched:布尔值属性，表示用户是否和控件进行过交互。
ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过。
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
3. ng-bind 指令
ng-bind 指令能将数据绑定到AngularJS应用程序内HTML的任意角落，用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素。当ng-bind和{{}}同时使用时，ng-bind绑定的值覆盖该元素的内容。
验证用户输入
<!-- 提示信息会在 ng-show 属性返回 true 的情况下显示 -->
<form ng-app="" name="myForm">
数字:
<input type="number" name="myNum" ng-model="text">
<span ng-show="myForm.myNum.$number">不是一个合法的数字 </span>
</form>
4. ng-init 指令
ng-init 指令初始化一个AngularJS应用程序的变量，应用程序内可以通过ng-bind 指令或者 “{{ }}” 的方式来调用。通常情况下，可以通过控制器或者模块来代替他。
5. ng-repeat 指令
ng-repeat 指令会重复一个 HTML 元素，主要用在数组。
例如：
<div ng-app="" ng-init="names=['g','u','o']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
6. 自定义指令
Angular JS 除了上述等内置指令之外，我们还能自定义指令，指令的名称我们可以自己命名，通过.directive函数来添加自定义的指令。需要注意的是在自定义的指令名中有大写时需要在大写字母前添加 - 来分割。
下面来写几个对照的例子：
- runoob-directive -> runoobDirective
- runoob-Directive -> runoobDirective
- runoobDirective无法识别
- 小写字母 或 小写字母+数字
- 调用自定义指令的方式有元素名、属性、类名、注释
限制使用
通过添加 restrict 属性,并设置值为 "A", 来设置指令只能通过属性的方式来调用。restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
restrict 值可以是以下几种:
- E 作为元素名使用
- A 作为属性使用
- C 作为类名使用
- M 作为注释使用
下面写一个实例：
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "E",
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
表达式
AngularJS 表达式的写法为：“{{ message }}”。
AngularJS 表达式作用和ng-bind 指令相似，将数据绑定到HTML。
AngularJS 表达式可以包含文字、运算符和变量.
AngularJS 表达式不支持条件判断，循环及异常。
AngularJS 表达式支持过滤器。
下面来一下如何定义不同的数据类型：
-
数字
<div ng-app="" ng-init= " a=2; b=5 "> <p>乘积： {{ a * b }}</p> <p>乘积： <span ng-bind= " a * b " ></span> </p> </div> -
字符串
<div ng-app="" ng-init="guo='郭';hh='豪豪'"> <p>姓名： {{ guo + " " + hh }}</p> <p>姓名： <span ng-bind="guo + ' ' + hh"></span></p> </div> -
数组
<!-- 数组内的元素不能重复 --> <div ng-app="" ng-init="arr=['2',3,'4',5,'6']"> <p>第二个值为 {{ arr[1] }}</p> <p>第二个值为 <span ng-bind="arr[1]"></span></p> </div> -
对象
<div ng-app="" ng-init="name={guo:'郭',hh:'豪豪'}"> <p>姓名： {{ name.guo +" "+ name.hh}}</p> <p>姓为 <span ng-bind="name.guo +' '+ name.hh"></span></p> </div>
应用
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
例如：
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
// AngularJS 模块定义应用
var app = angular.module('myApp', []);
// AngularJS 控制器控制应用
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
作用域 Scope
概述
Scope 的主要作用是连接HTML（视图）和控制器，Scope在AngularJS的应用组成中属于 模型 ，scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>{{welcome}}</h1>
<button ng-click='sayHello()'>点我</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Guohh";
$scope.sayHello = function() {
$scope.welcome = 'Welcome ' + $scope.name + '!';
};
});
</script>
根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
$rootScope 全局对象的属性可在所有子作用域中访问，子作用域互相无法访问对方的私有变量，这一点与js的函数作用域完全一致。
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{surname }} 姓家族成员:</h1>
<ul>
<li ng-repeat="n in names">{{surname }} {{n}} </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["hh", "hao", "haohao"];
$rootScope.surname = "Guo";
});
</script>
控制器 ng-Controller
AngularJS 控制器 控制 AngularJS 应用程序的数据；是常规的 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
外部文件中的控制器
相当于JavaScript外部js文件，引用方法如下：
<script src="namesController.js"></script>
过滤器
过滤器可以理解为：自己封装的一个方法，用来对某个表达式或指令进行操作。
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
Angular JS 提供了几个简单的过滤器如下：
| 过滤器 | 描述 |
|---|---|
| currency | 格式化数字为货币格式 |
| filter | 从数组项中选择一个子集 |
| lowercase | 格式化字符串为小写 |
| orderBy | 根据某个表达式排列数组 |
| uppercase | 格式化字符串为大写 |
过滤输入
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
<div ng-app="myApp" ng-controller="namesCtrl">
<p>输入过滤:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="i in infos | filter:test | orderBy:'country'">
{{ (i.name | uppercase) + ', ' + i.country }}
</li>
</ul>
<script>
var app = angular.module('myApp',[]);
app.controller('namesCtrl',function ($scope){
$scope.infos=[
{'name':'HEGE ','country':'Denmark'},
{'name':'KAI ','country':'Norway '},
{'name':'JANI ','country':'Sweden '}
];
})
</script>
自定义过滤器
<div ng-app="myApp" ng-controller="myCtrl">
姓名: {{ name | custom }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Guohh";
});
app.filter('custom', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
其他过滤器的使用
- date 格式化
// 2017-03-22 13:52:25
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}
- number 格式化（保留小数）
{{149016.1945000 | number:2}}
- currency货币格式化
// 结果：$250.00
{{ 250 | currency }}
// 结果：RMB ￥ 250.00
{{ 250 | currency:"RMB ￥ " }}
- filter查找
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
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'}
}}
- limitTo 截取
// 从前面开始截取6位
{{"1234567890" | limitTo :6}}
// 从后面开始截取4位
{{"1234567890" | limitTo:-4}}
- 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升序排
{{
[
{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
]
| orderBy:'id'
}}
服务
AngularJS 中你可以创建自己的服务，或使用内建服务。在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。
AngularJS 会一直监控应用，处理事件变化。
$http
$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("方法名").then(function (response) {
$scope.myWelcome = response.data;
});
});
$timeout 服务
可用于设置单次或多次延时服务。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "I LOVE YOU !";
}, 2000);
});
$interval 服务
可用于设置始终运行的延时服务。
<div ng-app="myApp" ng-controller="myCtrl">
<p>现在时间是:</p>
<h1>{{theTime | date:"yyyy-MM-dd HH:mm:ss.sss"}}</h1>
</div>
<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date();
}, 1);
});
</script>
$watch 服务
$watch服务持续监听数据上的变化，更新界面。调用方法如下：
$scope.$watch('', function() { });
自定义服务
创建了自定义服务，并连接到应用上后，就可以在控制器，指令，过滤器或其他服务中使用它。如下实例代码：octal 为服务名，func为该服务的方法名，我们就可以通过octal.func()来调用。
<div ng-app="myApp" ng-controller="myCtrl">
<p>20 的 8 进制是:</p>
<h1>{{oct}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.service('octal', function() {
this.func = function (x) {
return x.toString(8);
}
});
app.controller('myCtrl', function($scope, octal) {
$scope.oct = octal.func(20);
});
</script>
