AngularJS 学习笔记（三）--- Service、Http和select

一、服务 Service

1、概念

​ 在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用，AngularJS 中的内置服务可直接进行使用，例如 $location、$http 等等。出了系统中内置的服务，我们还可以通过 .service 自定义服务。服务可以在控制器，指令，过滤器或其他服务中使用它

​ AngularJS 的很多内置服务，在DOM中都有对应的对象，之所以推荐使用服务而不是对象，是因为这些服务可获取到应用生命周期内的每一个阶段，并且和$watch整合，使AngularJS可以监控应用，而DOM对象则没有这个能力。$watch 的作用：持续监听数据的变化，并更新界面。

2、常用的服务

服务	作用
$location	获取当前页面的URL地址
$http	向后台服务器发送请求，接收数据
$timeout	在规定的毫秒数后执行指定函数
$interval	在指定的周期(以毫秒计)来不断循环调用函数

3、案例

<script>
var app = angular.module('myApp', [])
.controller('myCtrl', function($scope, $location,$http,$timeout,$interval,hexafy) {
    // 获取当前页面的 URL
    $scope.myUrl = $location.absUrl();
    // 连接服务器
    $http.get("服务器地址").then(function (data) {
      $scope.data = data;
  	});
    // 定时执行函数
    $timeout(function () {
      $scope.myHeader = "How are you?";
  	}, 2000);
    // 周期循环执行函数
     $scope.num = 0;
     $interval(function () {
      $scope.num = $scope.num+1;
  	 }, 1000);
    // 使用自定义服务 无需加 $
    $scope.hex = hexafy.myFunc(255);
})
// 自定义服务  将某数字转成16进制数
.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
</script>

二、$http

1、概念

​ $http 是AngularJS最核心的服务，用于前后端交互，请求后端服务器的数据，也就是对接口。请求数据的方法有post和get两种。

2、案例

// 普通格式
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});
// 简写格式
$http.get('Url',params,config).then(successCallback, errorCallback);
$http.post('Url', params, config).then(successCallback, errorCallback);

三、下拉选择框 select

1、概念

​ 在 AngularJS 中 我们可以通过 select 标签和 ng-options 指令 结合，或者 option标签和ng-repeat指令结合，来创建一个下拉选择框。其中ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，我们更推荐使用 ng-options 指令 来创建下拉列表，因为使用 ng-options 的选项是一个对象， ng-repeat 只是一个字符串。我们可以通过 ng-model 来获取下拉框选择的值,也可以通过在select标签上用 ng-model 来设置下拉框初始值。

2、案例

// 普通数组
<div ng-app="myApp" ng-controller="myCtrl">
// ng-options
<select  ng-model="selectedName" ng-options="x for x in names">
</select>
// ng-repeat
<select>
<option ng-repeat="x in names" ng-model="selectedName">{{x}}</option>
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
    $scope.selectedName = $scope.names[0]
});
</script>

// 对象数组
<div ng-app="myApp2" ng-controller="myCtrl2">
    
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>你选择的是: {{selectedSite.site}}</h1>

<select ng-model="selectedSite2">
<option ng-repeat="x in sites">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite2}}</h1>
</div>

<script>
var app = angular.module('myApp2', []);
app.controller('myCtrl2', function($scope) {
   $scope.sites = [
	    {site : "Google", url : "http://www.google.com"},
	    {site : "Runoob", url : "http://www.runoob.com"},
	    {site : "Taobao", url : "http://www.taobao.com"}
	];
});
</script>