1. Service

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用. 你可以创建自己的服务，或使用内建的30 多个服务。

1.1 $http 服务

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

• 通用格式

$http({
    method: 'GET',  // 简单的 GET 请求，可以改为 POST
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

• 简写格式

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
/* 此外还有以下简写方法 */
$http.head  
$http.put 
$http.delete
$http.jsonp
$http.patch

示例如下:

<div ng-app="myApp", ng-controller="siteCtrl">
   <ul>
      <li ng-repeat="x in names">
         {{ x.Name + ', ' + x.Country }}
      </li>
   </ul>
</div>

<script type="text/javascript">
   var app = angular.module('myApp', []);

   /* 通用写法 */
   app.controller('siteCtrl', function($scope, $http) {
      $http({
         method: 'GET',
         url: 'http://v.juhe.cn/weather/index?xxx.html'
      }).then(function successCallback(response) {
         $scope.names = "response.data.sites";
      }, function errorCallback(response) {
         // 请求失败执行代码
         $scope.names = response;
      });
   });

    /* 简写 */
   app.controller('siteCtrl', function($scope, $http) {
      $http.get("http://v.juhe.cn/weather/index?xxx.html")
      .then(function (response) {$scope.names = response.data.sites;});
   });
</script>

1.2 $timeout 服务 和 $interval 服务

AngularJS 中的$timeout 服务对应了 JS 中的 window.setTimeout 函数
AngularJS 中的 $interval 服务对应了 JS 中的 window.setInterval 函数

<div ng-app="myApp" ng-controller="siteCtrl"> 
   <p>两秒后显示时间</p>
   <h1>{{myHeader}}</h1>
</div>
<p>$timeout 访问在规定的毫秒数后执行指定函数。</p>
<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>
<script>
   var app = angular.module('myApp', []);
   app.controller('siteCtrl', function($scope, $timeout, $interval) {
      $scope.myHeader = "Hello World!";
      $timeout(function () {
         $interval(function () {
            $scope.myHeader = new Date().toLocaleTimeString();
         }, 1000);
      }, 2000);
   });
</script>

$timeout 和 $interval

1.3 自定义服务

• 你可以创建自定义服务，链接到你的模块中.
• 要使用自定义服务，需要在定义控制器的时候独立添加，设置依赖关系.
• 当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它.

<div ng-app="myApp" ng-controller="myCtrl"> 
   <p>自定义服务: 255 的16进制是: {{hex}}</p>
   <p>在获取数组 [255, 188, 50] 值时使用过滤器:</p>
   <ul><li ng-repeat="x in counts">{{x | myFormat}}</li></ul>
</div>
<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);
      $scope.counts = [255, 188, 50];
   });
            
   // 在过滤器中使用服务
   app.filter('myFormat', ['hexafy', function(hexafy) {
      return function(x) {
         return hexafy.myFunc(x);
      }
   }]);
</script>

AngularJS_自定义服务

2. Select(选择框)

• ng-options 与 ng-repeat 都可以创建选择框

<div ng-app="myApp", ng-controller="myCtrl">
   <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"></select>
   <p>该实例演示了 ng-options 指令的使用。</p>
   <select ><option ng-repeat="x in names">{{x}}</option></select>
   <p>该实例演示了使用 ng-repeat 指令来创建下拉列表。</p>
</div>

<script type="text/javascript">
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope) {
       $scope.names = ["张三", "李四", "王五", "赵六"];
   })
</script>

AngularJS_选择框

• ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表, 有局限性, 选择的值是一个字符串.
  ng-options 指令更适合创建下拉列表, 使用 ng-options 的选项是一个对象. 我们可以获取更多信息，应用也更灵活

<div ng-app="myApp", ng-controller="myCtrl">
   <p>------------ 使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串 ------------</p>
   <select ng-model="selectedSite1">
      <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
   </select>
   <h1>你选择的是: {{selectedSite1}}</h1><br />
            
   <p>------------ 使用 ng-options 指令来创建下拉列表，选中的值是一个对象 ------------</p>
   <select ng-model="selectedSite2" ng-options="x.site for x in sites"></select>
   <h1>你选择的是: {{selectedSite2.site}}</h1>
   <p>网址为: {{selectedSite2.url}}</p>
</div>

<script type="text/javascript">
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope) {
      $scope.sites = [
         {site : "Google", url : "http://www.google.com"},
         {site : "BaiDu", url : "http://www.baidu.com"},
         {site : "Taobao", url : "http://www.taobao.com"}
      ];
   })
</script>

AngularJS_选择框2

• ng-options 将数据对象作为数据源时, 直接使用对象的属性.

<div ng-app="myApp", ng-controller="myCtrl">
   <p>选择一辆车: <select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"> </select></p>
   <p>你选择的是: {{selectedCar.brand}}</p>
   <p>型号是: {{selectedCar.model}}</p>
   <p>颜色是: {{selectedCar.color}}</p>
</div>

<script type="text/javascript">
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope) {
      $scope.cars = {
         car01: {brand : "福特", model : "翼虎", color : "胭脂红"},
         car02: {brand : "宝马", model : "750Li", color : "象牙白"},
         car03: {brand : "沃尔沃", model : "XC90", color : "高级黑"}
      };
      //设置第2个为初始值
      // $scope.selectedCar = $scope.cars.car02; 
   })
</script>

AngularJS_选择框3

3. 表格

ng-repeat 指令可以完美的显示表格

• $index ：遍历的进度（0...length-1）
• $first ：当元素是遍历的第一个时值为true.
• $middle ：当元素处于第一个和后元素之间时值为true.
• $last：当元素是遍历的后一个时值为true.
• $even ：当 $index 值是偶数时值为true.
• $odd ：当 $index 值是奇数时值为true.

<style>
   table, td {
      border: 1px solid grey;
      border-collapse: collapse;
      padding: 5px;
   }

   table tr:nth-child(odd) {
      background-color: #f1f1f1;
   }

   table tr:nth-child(even) {
      background-color: #ffffff;
   }
</style>

<div ng-app="myApp", ng-controller="myCtrl">
   <table>
      <tr ng-repeat="x in names | orderBy : 'city'">
         <td>{{ $index + 1 }}</td>
         <!-- td style="{{$even?'background-color: #f1f1f1':''}}">{{$index + 1}}</td>-->
         <td>{{ x.Name }}</td>
         <td>{{ x.city }}</td>
         <td>{{ x.country }}</td>
      </tr>
   </table>
</div>

<script type="text/javascript">
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope) {
      $scope.names = [
         {Name : "赵高", city : "Berlin",  country : "秦国"},
         {Name : "鬼谷子", city : "Luleå",  country : "卫国"},
         {Name : "屈原", city : "México D.F.",  country : "中山国"},
         {Name : "廉颇", city : "Madrid",  country : "赵国"},
         {Name : "蔺相如", city : "São Paulo",  country : "南燕"},
         {Name : "鲁仲连", city : "Buenos Aires",  country : "陆浑"},
         {Name : "毛遂", city : "Tsawassen",  country : "孤竹"},
         {Name : "庞涓", city : "México D.F.",  country : "魏国"},
         {Name : "管仲", city : "Bern",  country : "山戎"},
         {Name : "孔子", city : "London",  country : "钟吾"},
         {Name : "白起", city : "Strasbourg",  country : "楚国"},
        ];
   })
</script>

AngularJS_表格

4.HTML DOM 和事件

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令.
AngularJS 有自己的 HTML 事件指令.

• ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性.
• ng-show 指令隐藏或显示一个 HTML 元素, 根据 value 的值来显示（隐藏）HTML 元素。
  你可以使用表达式来计算布尔值（ true 或 false）.
• ng-hide 指令用于隐藏或显示 HTML 元素.
• ng-click 指令定义了 AngularJS 点击事件

<div ng-app="myApp", ng-controller="myCtrl" ng-init="mySwitch = true">
   <button ng-click="sum()" ng-disabled="mySwitch">累加</button>
   <p>{{ count }}</p>
   <p> <input type="checkbox"  ng-model="mySwitch"/>开启累加按钮</p>
   <p ng-show="count > 10">count大于10后显示</p>
   <p ng-hide="count > 15">count大于15后隐藏</p>
</div>

<script>
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function ($scope) {
      $scope.count = 0;
      $scope.sum = function () {
         $scope.count = this.count + 1;
      }
   });
</script>

AngularJS_Dom

5.AngularJS 表单

<body ng-app="">
   <form>
      选择一个选项:
      <input type="radio" ng-model="myVar" value="dogs"/>Dogs
      <input type="radio" ng-model="myVar" value="tuts">Tutorials
      <input type="radio" ng-model="myVar" value="cars">Cars
   </form>

   <div ng-switch="myVar">
      <div ng-switch-when="dogs"><p> 你选择了Dogs </p></div>
      <div ng-switch-when="tuts"><p> 你选择了Tutorials </p></div>
      <div ng-switch-when="cars"><p> 你选择了Cars </p></div>
   </div>

   <p>ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。</p>
</body>

AngularJS_表单

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

AngularJS_表单2

6.AngularJS 输入验证

AngularJS 表单和控件可以验证输入的数据

• $dirty : 表单有填写记录
• $valid : 字段内容合法的
• $invalid : 字段内容是非法的
• $pristine: 表单没有填写记录

<h2>验证实例</h2>

<form ng-app="myApp" ng-controller="myCtrl" name="myForm" novalidate>

   <p>用户名:<br>
      <input type="text" name="user" ng-model="user" required>
      <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
      <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
      </span>
   </p>

   <p>邮箱:<br>
      <input type="email" name="email" ng-model="email" required>
      <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
      <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
      <span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
      </span>
   </p>

   <p>
      <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  myForm.email.$dirty && myForm.email.$invalid">
   </p>

</form>

<script>
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope) {
      $scope.user = 'John Doe';
      $scope.email = 'john.doe@gmail.com';
   });
</script>

AngularJS_输入验证