AngularJS

Posted 2020-06-20

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>