AngularJS 中你可以创建自己的服务，或使用内建服务。
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
$location 服务，它可以返回当前页面的 URL 地址。
AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。
|
$location.service |
|
目的 |
允许对当前浏览器位置进行读写操作 |
允许对当前浏览器位置进行读写操作 |
API |
暴露一个能被读写的对象 |
暴露jquery风格的读写器 |
是否在AngularJS应用生命周期中和应用整合 |
否 |
可获取到应用生命周期内的每一个阶段，并且和$watch整合 |
是否和HTML5 API的无缝整合 |
否 |
是（对低级浏览器优雅降级） |
和应用的上下文是否相关 |
否，window.location.path返回"/docroot/actual/path" |
是，$location.path()返回"/actual/path" |
要使用自定义服务，需要在定义控制器的时候独立添加，设置依赖关系:
$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 函数。
两秒后显示信息:
app.controller('myCtrl', function($scope, $timeout){
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "Howare you today?";
}, 2000);
});
AngularJS $interval 服务对应了 JS window.setInterval 函数。
每一秒显示信息:
app.controller('myCtrl', function($scope,$interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
创建名为hexafy 的服务:
使用自定义的的服务 hexafy 将一个数字转换为16进制数:
当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。
在对象数组中获取值时你可以使用过滤器：
<divng-app="myApp"ng-controller="myCtrl">
<p>自定义服务:</p>
<h1>{{theTime}}</h1>
<h1>{{hex}}</h1>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function () {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function ($scope,hexafy) {
$scope.hex =hexafy.myFunc(255);
});
在过滤器 myFormat 中使用服务 hexafy:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
</script>
</div>
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。使用格式：
// 简单的 GET 请求，可以改为 POST
$http({
method:'GET',
url:'/someUrl'
}).then(function successCallback(response){
// 请求成功执行代码
},function errorCallback(response){
// 请求失败执行代码
});
POST 与GET 简写方法格式：
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
此外还有以下简写方法：
· $http.get
· $http.head
· $http.post
· $http.put
· $http.delete
· $http.jsonp
· $http.patch
<divng-app="myApp"ng-controller="siteCtrl">
<ul>
<ling-repeat="x in names"> {{ x.Name + ', ' + x.Country}} </li>
</ul>
</div><script>
var app= angular.module('myApp', []);
app.controller('siteCtrl', function($scope,$http) {$http.get("http://www.runoob.com/try/angularjs/data/sites.php").then(function (response) {$scope.names = response.data.sites;}); }); </script>
使用 ng-options 创建选择框
ng-init 设置默认选中值。
<divng-app="myApp"ng-controller="myCtrl">
<selectng-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>
假设我们使用以下对象:
$scope.sites =[
{site :"Google", url :"http://www.google.com"},
{site :"Runoob", url :"http://www.runoob.com"},
{site :"Taobao", url :"http://www.taobao.com"}
];
ng-repeat 有局限性，选择的值是一个字符串:
<select ng-model="selectedSite">
<option ng-repeat="x insites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
使用 ng-options 指令，选择的值是一个对象：
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>
前面实例我们使用了数组作为数据源，以下我们将数据对象作为数据源。
$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
使用对象作为数据源, x 为键(key), y 为值(value):
<select ng-model="selectedSite" ng-options="xfor (x, y) in sites">
</select>
<h1>你选择的值是: {{selectedSite}}</h1>
$scope.cars = {
car01 : {brand : "Ford",model : "Mustang", color : "red"},
car02 : {brand : "Fiat",model : "500",color : "white"},
car03 : {brand : "Volvo",model : "XC90",color : "black"}
};
在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性：
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>
<p>你选择的是: {{selectedCar.brand}}</p>
<p>型号为: {{selectedCar.model}}</p
<p>颜色为: {{selectedCar.color}}</p>
设置初始值的方法：
1 $scope.selectedCar = $scope.cars["car02"]; //设置第2个为初始值；
2 ng-init="selectedCar=cars['car02']"
自己的理解：
ng-repeat 有局限性，选择的值是一个字符串:
ng-repeat 只能让option 的value变成一个字符串后面同步的数据也就只能同步字符串
ng-options 选中的值会成为一个对象
1 后面的同步的是一个对象可以点出各种属性
2 可以循环一个对象的各种属性靠 (x,y)识别键值对
3 x for x in sites 表示循环一个数组，for 之后的 X是单个循环对象， for之前的是option显示的文本值
4x for (x,y) for之后的(x,y)代表键值对 x代表键 y代表值
ng-repeat 指令可以完美的显示表格。
<divng-app="myApp"ng-controller="customersCtrl">
<table><trng-repeat="x in names">
<td>{{ x.Name }}</td><td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.names = [
{ "Name": "AlfredsFutterkiste", "City": "Berlin", "Country": "Germany" },
{ "Name": "ComércioMineiro", "City": "São Paulo", "Country": "Brazil" }
]
});
</script>
排序显示，可以使用 orderBy 过滤器:
<tr ng-repeat="x in names | orderBy : 'Country'">
使用 uppercase 过滤器
<td>{{ x.Country | uppercase }}</td>
表格显示序号可以在 <td> 中添加 $index:
<td>{{ $index + 1 }}</td>
使用 $even 和 $odd
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
进阶写法
<trng-repeat="x innames">
<tdstyle="{{$even?'background-color:#f1f1f1':''}}">{{$index + 1}}</td>
</tr>
进价写法
<tr style="{{$even?'background-color: #f1f1f1':''}}" ng-repeat="x in names">