标签：
AngularJS 服务(Service)
AngularJS 中你可以创建自己的服务，或使用内建服务。
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
有个 $location 服务，它可以返回当前页面的 URL 地址。
1 var app = angular.module(‘myApp‘, []); 2 app.controller(‘customersCtrl‘, function($scope, $location) { 3 myUrl = $location.absUrl(); 4 });
$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。
$http.get(‘服务器文件名‘).then(function (response){console.log(response.data);});
AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。
1 var app = angular.module(‘myApp‘, []); 2 app.controller(‘myCtrl‘, function($scope, $http) { 3 $http.get("welcome.htm").then(function (response) { 4 $scope.myWelcome = response.data; 5 }); 6 });
$timeout 服务
AngularJS $timeout 服务对应了JS window.setTimeout 函数
1 //实例化AngularJS应用程序对象 2 var app = angular.module(‘myApp‘, []); 3 //创建控制器 4 app.controller(‘myCtrl‘, function ($scope, $timeout){ 5 $scope.myHeader = ‘Hello‘; 6 $timeout(function () { 7 $scope.myHeader = ‘How are you?‘; 8 }, 2000); 9 });
$interval 服务
AngularJS $interval 服务对应了 JS window.setInterval 函数
创建自定义服务
1 var app = angular.module(‘myApp‘, []); 2 3 // hexafy是一个构造函数 4 app.service(‘hexafy‘, function() { 5 this.myFunc = function (x) { 6 return x.toString(16); 7 } 8 });
/******************************/
1 //实例化AngularJS应用程序对象 2 var app = angular.module(‘myApp‘, []); 3 4 //创建自定义服务getfood 5 app.service(‘getfood‘, function () { 6 //编写一个特权方法myFood，传参food，返回值为：您喜欢的食物是food 7 this.myFood = function (food) { 8 return ‘你喜欢的食物是：‘ + food; 9 }; 10 }); 11 12 //创建控制器 13 app.controller(‘myCtrl‘, function ($scope, getfood){ 14 $scope.say = getfood.myFood(‘木瓜‘); 15 });
Angular JS XMLHttpRequest
$http 是AngularJS中的一个核心服务，用于读取远程服务器的数据
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。
1 <!-- 读取服务器上的JSON文件 2 http://www.runoob.com/try/angularjs/data/Customers_JSON.php 3 $http.get(url).success(); 4 response.records 5 --> 6 7 <div ng-app="myApp" ng-controller="myCtrl"> 8 <ul> 9 <li ng-repeat="x in names">{{x.Name + ‘ ‘ + x.City}}</li> 10 </ul> 11 </div> 12 13 <!-- 引入AngularJS --> 14 <script src="angular.min.js"></script> 15 <!--<script src="personController.js"></script>--> 16 <script> 17 //实例化AngularJS应用程序对象 18 var app = angular.module(‘myApp‘, []); 19 //创建控制器 20 app.controller(‘myCtrl‘, function ($scope, $http){ 21 $http.get( 22 ‘Customers_JSON.php‘ 23 ).success(function (response){ 24 $scope.names = response.records; 25 }); 26 }); 27 </script>
AngularJS Select（选择框）
使用ng-options创建选择框
ng-options 指令选择的值是一个对象
ng-repeat 指令选择的值是一个字符串
ng-options="x for x in names"
ng-options="x.site for x in sites"
ng-repeat="x in names"
1 <div ng-app="myApp" ng-controller="myCtrl"> 2 3 <select ng-model="mySites" ng-options="x.site for x in sites">{{x.site}}</select> 4 5 <p>你选择的是{{mySites.site}}，地址是{{mySites.url}}</p> 6 </div> 7 8 9 <!-- 引入AngularJS --> 10 <script src="angular.min.js"></script> 11 <!--<script src="personController.js"></script>--> 12 <script> 13 //实例化AngularJS应用程序对象 14 var app = angular.module(‘myApp‘, []); 15 //创建控制器 16 app.controller(‘myCtrl‘, function ($scope){ 17 $scope.sites = [ 18 {site:‘Google‘, url:‘http://google.com‘}, 19 {site:‘Runoob‘, url:‘http://runoob.com‘}, 20 {site:‘Taobao‘, url:‘http://taobao.com‘} 21 ]; 22 });
数据源为对象
使用对象作为数据源, x 为键(key), y 为值(value):
1 <select ng-model="selectedSite" ng-options="x for (x, y) in sites"> 2 </select> 3 <h1>你选择的值是: {{selectedSite}}</h1>
你选择的值为在 key-value 对中的 value。
value 在 key-value 对中也可以是个对象：
1 $scope.cars = { 2 car01 : {brand : "Ford", model : "Mustang", color : "red"}, 3 car02 : {brand : "Fiat", model : "500", color : "white"}, 4 car03 : {brand : "Volvo", model : "XC90", color : "black"} 5 };
在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性：
1 <select ng-model="selectedCar" ng-options="y.brand for (x, y) in sites"> 2 </select>
/********************************************/
1 <!-- 在浏览器端查看功能效果 2 --> 3 <div ng-app="myApp" ng-controller="myCtrl"> 4 5 <select name="mySelect" ng-model="mySelect" ng-options="x for (x,y) in myData"></select> 6 <p>您选择的值为：{{mySelect}}</p> 7 </div> 8 9 10 <!-- 引入AngularJS --> 11 <script src="angular.min.js"></script> 12 <!--<script src="personController.js"></script>--> 13 <script> 14 //实例化AngularJS应用程序对象 15 var app = angular.module(‘myApp‘, []); 16 //创建控制器 17 app.controller(‘myCtrl‘, function ($scope){ 18 //数据源为对象 19 $scope.myData= { 20 site01:‘Google‘, 21 site02:‘runboo‘, 22 site03:‘taobao‘ 23 }; 24 }); 25 </script>
标签：
原文地址：http://www.cnblogs.com/lqcdsns/p/5260325.html
