Angular JS

作者: 郭豪豪 | 来源:发表于2017-09-28 12:53 被阅读0次

Angular JS 是一个JavaScript框架。他可以通过<script>标签添加到HTML页面。他是通过指令扩展了HTML，且通过表达式绑定数据到HTML。本文主要讲述表达式、指令和模型。

简介

AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

Angular JS 扩展 HTML

它通过ng-directives扩展。

ng-app 指令定义了一个AngularJS应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。

指令

1. ng-app 指令

ng-app指令告诉AngularJS，该元素是angularJS 应用程序，该元素内的所有angularJS只能才能真正的执行，如果移除了ng-app指令，HTML将无法识别AngularJS指令和表达式。 ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用，相当于id的作用；ng-app可以出现在html文档的任何一个元素上。

2. ng-model 指令

ng-model指令把输入域的值绑定到另一个应用程序，将输入域输入的值赋给另一个元素，是用于表单元素的，支持双向绑定。对普通元素无效；。它还可以给应用程序数据提供类型验证（number、email、required）和状态（invalid、dirty、touched、error，也能为HTML提供CSS类。

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类
ng-invalid:未通过验证的表单。
ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true。
ng-dirty:布尔值属性，表示用户是否修改了表单。如果为 ture，表示有修改过；false 表示修没有修改过。
ng-touched:布尔值属性，表示用户是否和控件进行过交互。
ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过。

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
    输入你的名字:
    <input name="myAddress" ng-model="text" required>
</form>

3. ng-bind 指令

ng-bind 指令能将数据绑定到AngularJS应用程序内HTML的任意角落，用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素。当ng-bind和{{}}同时使用时，ng-bind绑定的值覆盖该元素的内容。

验证用户输入

    <!-- 提示信息会在 ng-show 属性返回 true 的情况下显示 -->
    <form ng-app="" name="myForm">
        数字:
        <input type="number" name="myNum" ng-model="text">
        <span ng-show="myForm.myNum.$number">不是一个合法的数字      </span>
    </form>

4. ng-init 指令

ng-init 指令初始化一个AngularJS应用程序的变量，应用程序内可以通过ng-bind 指令或者 “{{ }}” 的方式来调用。通常情况下，可以通过控制器或者模块来代替他。

5. ng-repeat 指令

ng-repeat 指令会重复一个 HTML 元素，主要用在数组。

例如：

<div ng-app="" ng-init="names=['g','u','o']">
    <p>使用 ng-repeat 来循环数组</p>
    <ul>
      <li ng-repeat="x in names">
        {{ x }}
      </li>
    </ul>
</div>

6. 自定义指令

Angular JS 除了上述等内置指令之外，我们还能自定义指令，指令的名称我们可以自己命名，通过.directive函数来添加自定义的指令。需要注意的是在自定义的指令名中有大写时需要在大写字母前添加 - 来分割。

下面来写几个对照的例子：

runoob-directive -> runoobDirective
runoob-Directive -> runoobDirective
runoobDirective无法识别
小写字母或小写字母+数字
调用自定义指令的方式有元素名、属性、类名、注释

限制使用

通过添加 restrict 属性,并设置值为 "A", 来设置指令只能通过属性的方式来调用。restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

restrict 值可以是以下几种:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用

下面写一个实例：

   <body ng-app="myApp">

       <runoob-directive></runoob-directive>
  
       <script>
          var app = angular.module("myApp", []);
         app.directive("runoobDirective", function() {
            return {
              restrict : "E",
                  template : "<h1>自定义指令!</h1>"
               };
          });
       </script>

  </body>

表达式

AngularJS 表达式的写法为：“{{ message }}”。
AngularJS 表达式作用和ng-bind 指令相似，将数据绑定到HTML。
AngularJS 表达式可以包含文字、运算符和变量.
AngularJS 表达式不支持条件判断，循环及异常。
AngularJS 表达式支持过滤器。

下面来一下如何定义不同的数据类型：

数字

<div ng-app="" ng-init= " a=2; b=5 ">

     
     <p>乘积： {{ a * b }}</p>
     <p>乘积： <span ng-bind= " a * b " ></span> </p>

 </div>

字符串

<div ng-app="" ng-init="guo='郭';hh='豪豪'">

     <p>姓名： {{ guo + " " + hh }}</p>
     <p>姓名： <span ng-bind="guo + ' ' + hh"></span></p>

 </div>

数组

<!-- 数组内的元素不能重复 -->
<div ng-app="" ng-init="arr=['2',3,'4',5,'6']">

     <p>第二个值为 {{ arr[1] }}</p>
     <p>第二个值为 <span ng-bind="arr[1]"></span></p>

 </div>

对象

<div ng-app="" ng-init="name={guo:'郭',hh:'豪豪'}">

     <p>姓名： {{ name.guo +" "+ name.hh}}</p>
     <p>姓为 <span ng-bind="name.guo +' '+ name.hh"></span></p>

 </div>

应用

AngularJS 模块（Module）定义了 AngularJS 应用。
AngularJS 控制器（Controller）用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。

例如：

<div ng-app="myApp" ng-controller="myCtrl">
 
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
 
</div>
 
<script>

// AngularJS 模块定义应用
var app = angular.module('myApp', []);
// AngularJS 控制器控制应用
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

作用域 Scope

概述

Scope 的主要作用是连接HTML（视图）和控制器，Scope在AngularJS的应用组成中属于模型，scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{welcome}}</h1>
    <button ng-click='sayHello()'>点我</button>   
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Guohh";
    $scope.sayHello = function() {
        $scope.welcome = 'Welcome  ' + $scope.name + '!';
    };
});
</script>

根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
$rootScope 全局对象的属性可在所有子作用域中访问，子作用域互相无法访问对方的私有变量，这一点与js的函数作用域完全一致。

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{surname }} 姓家族成员:</h1>

<ul>
    <li ng-repeat="n in names">{{surname }} {{n}} </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["hh", "hao", "haohao"];
    $rootScope.surname  = "Guo";
});
</script>

控制器 ng-Controller

AngularJS 控制器控制 AngularJS 应用程序的数据；是常规的 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

外部文件中的控制器

相当于JavaScript外部js文件，引用方法如下：

<script src="namesController.js"></script>

过滤器

过滤器可以理解为：自己封装的一个方法，用来对某个表达式或指令进行操作。

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

Angular JS 提供了几个简单的过滤器如下：

过滤器	描述
currency	格式化数字为货币格式
filter	从数组项中选择一个子集
lowercase	格式化字符串为小写
orderBy	根据某个表达式排列数组
uppercase	格式化字符串为大写

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

<div ng-app="myApp" ng-controller="namesCtrl">

    <p>输入过滤:</p>

    <p><input type="text" ng-model="test"></p>

    <ul>
        <li ng-repeat="i in infos | filter:test | orderBy:'country'">
        {{ (i.name | uppercase) + ', ' + i.country }}
        </li>
    </ul>

<script>
    
    var app = angular.module('myApp',[]);
    app.controller('namesCtrl',function ($scope){
        $scope.infos=[
                      {'name':'HEGE ','country':'Denmark'},
                      {'name':'KAI ','country':'Norway  '},
                      {'name':'JANI ','country':'Sweden '}
                     ];
    })
    
</script>

自定义过滤器

<div ng-app="myApp" ng-controller="myCtrl">
    姓名: {{ name | custom }}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Guohh";
});
app.filter('custom', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});

其他过滤器的使用

date 格式化

   // 2017-03-22 13:52:25
   {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}

number 格式化（保留小数）

   {{149016.1945000 | number:2}}

currency货币格式化

// 结果：$250.00
   {{ 250 | currency }}            
// 结果：RMB ￥ 250.00
   {{ 250 | currency:"RMB ￥ " }}

filter查找
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集

// 查找name为iphone的行
   {{ 
       [
           {"age": 20,"id": 10,"name": "iphone"},
           {"age": 12,"id": 11,"name": "sunm xing"},
           {"age": 44,"id": 12,"name": "test abc"}
       ]
       | filter:{'name':'iphone'} 
   }}

limitTo 截取

// 从前面开始截取6位
   {{"1234567890" | limitTo :6}} 
// 从后面开始截取4位
   {{"1234567890" | limitTo:-4}}

orderBy 排序

// 根id降序排
   {{ 
       [
           {"age": 20,"id": 10,"name": "iphone"},
           {"age": 12,"id": 11,"name": "sunm xing"},
           {"age": 44,"id": 12,"name": "test abc"}
       ] 
       | orderBy:'id':true 
   }}

   // 根据id升序排
   {{ 
       [
           {"age": 20,"id": 10,"name": "iphone"},
           {"age": 12,"id": 11,"name": "sunm xing"},
           {"age": 44,"id": 12,"name": "test abc"}
       ]
       | orderBy:'id' 
   }}

服务

AngularJS 中你可以创建自己的服务，或使用内建服务。在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。
AngularJS 会一直监控应用，处理事件变化。

`$http`

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("方法名").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

$timeout 服务

可用于设置单次或多次延时服务。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "I LOVE YOU !";
    }, 2000);
});

$interval 服务

可用于设置始终运行的延时服务。

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>现在时间是:</p>

<h1>{{theTime | date:"yyyy-MM-dd HH:mm:ss.sss"}}</h1>

</div>

<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
      $scope.theTime = new Date();
  }, 1);
});
</script>

$watch 服务

$watch服务持续监听数据上的变化，更新界面。调用方法如下：

$scope.$watch('', function() {  });

自定义服务

创建了自定义服务，并连接到应用上后，就可以在控制器，指令，过滤器或其他服务中使用它。如下实例代码：octal 为服务名，func为该服务的方法名，我们就可以通过octal.func()来调用。


<div ng-app="myApp" ng-controller="myCtrl">

<p>20 的 8 进制是:</p>

<h1>{{oct}}</h1>

</div>

<script>
var app = angular.module('myApp', []);

app.service('octal', function() {
    this.func = function (x) {
        return x.toString(8);
    }
});
app.controller('myCtrl', function($scope, octal) {
  $scope.oct = octal.func(20);
});
</script>