AngularJS 服务(Service)
AngularJS 中你可以创建自己的服务，或使用内建服务
什么是服务？
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务，分别应用于不的应用场景。(就好比所谓的设计模式).
(比如有个 $location 服务，它可以返回当前页面的 URL 地址)
为什么使用服务?
在很多服务中，比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。
AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。
（面试的时候，考官问你，angular的$location和window.location有什么不同，哪个更好，为什么?）
$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 服务
$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。
最底层的方法，获取动态数据到controller的$scope对象中，在view中显示对应的数据！
最常见的例子：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
或者是.success(function (data) { $scope.myData = data;})
还有很多类似jqeury的ajax的处理，
// 简单的 GET 请求，可以改为 POST
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});
此外还有以下简写方法：
- $http.get
- $http.head
- $http.post
- $http.put
- $http.delete
- $http.jsonp
- $http.patch
更好的做法是外部引入angular-resource.js，利用ngResource和$resource对service进行factory实例,给controller的作用域$scope扩展query()方法及其他；
【后期再补充学习 跨域请求的问题 】
$timeout 服务
AngularJS $timeout 服务对应了 JS window.setTimeout 函数
$interval 服务
AngularJS $interval 服务对应了 JS window.setInterval 函数。
常用得到的：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
页面在myCtrl作用域下，绑定数据theTime;
创建自定义服务:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
实例化：
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
这个案例还是可以：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
<p>过滤器使用服务将10进制转换为16进制。</p>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = [255, 251, 200];
});
</script>
</body>
</html>
AngularJS Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项（实际常用到的指令，特别是个对象）
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"> </select>
用ng-repeat循环单个数组可能更巴适：
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
当然，做一下处理也是可以的 ：
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
你不用key-value也是允许的：
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>
AngularJS 表格
ng-repeat 指令可以完美的显示表格。
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
可以给input绑定一个ng-model，到tr的filter中，不就是查询乐！
<table>
<tr ng-repeat="x in names | orderBy : 'Country'">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
如果你要显示序号：
<td>{{ $index + 1 }}</td>
单数和双数设置样式：
<td ng-if="$odd" style=" margin: 0px; padding: 0px; color: rgb(17, 119, 0); font-family: 'courier new'; font-size: 13px; line-height: 18.46875px;">>{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
AngularJS HTML DOM
AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令（经常会用到的）
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
项目中会禁止点击某个button或者select。radio，checkbox等等；
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">按钮
通过input中model的值的改变来影响button中的disabled的值
ng-show 指令隐藏或显示一个 HTML 元素。
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
ng-hide 指令隐藏或显示一个 HTML 元素。
<p ng-hide="true">我是不可见的。</p>
<p ng-hide="false">我是可见的。</p>
AngularJS 事件
AngularJS 有自己的 HTML 事件指令。
1.ng-click 指令定义了 AngularJS 点击事件。(jquery的.click()差不多)
<button ng-click="count = count + 1">点我！</button>
也可以跟$scope指定个方法Fn更好；
常用的点击显示和隐藏div：
<button ng-click="toggle()">隐藏/显示</button>
<div ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
(完整的controller就没写了，关注重点)
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
下面是整个angular流程的最基础，也是最核心的！！！
AngularJS 模块
模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。
var app = angular.module("myApp", []);
我的理解就是这个module就是给这个app提供一个容器，然后才是所有的controller，view等等往里面装，所以这个声明理论上也应该只能申明一次！我看源码，如果多层申明，会覆盖前面，而前面的DI会导致找不到而报错！
（未完待续.../...）