精品人妻无码一区二区三区下载,越看水流的越多的故事,最新中文字幕av无码不卡

AngularJS 動畫

AngularJS 提供了動畫效果，可以配合 CSS 使用。
AngularJS 使用動畫需要引入 angular-animate.min.js 庫。

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

還需在應(yīng)用中使用模型 ngAnimate：

<body ng-app="ngAnimate">

什么是動畫？

動畫是通過改變 HTML 元素產(chǎn)生的動態(tài)變化效果。
實例
勾選復(fù)選框隱藏 DIV:

<body ng-app="ngAnimate">
  隱藏 DIV: <input type="checkbox" ng-model="myCheck">
  <div ng-hide="myCheck"></div>
</body>

嘗試一下 ?

應(yīng)用中動畫不宜太多，但合適的使用動畫可以增加頁面的豐富性，也可以更易讓用戶理解。

如果我們應(yīng)用已經(jīng)設(shè)置了應(yīng)用名，可以把 ngAnimate 直接添加在模型中：
實例

<body ng-app="myApp">
  <h1>隱藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
  <div ng-hide="myCheck"></div>
  <script>
    var app = angular.module('myApp', ['ngAnimate']);
  </script>

嘗試一下 ?

ngAnimate 做了什么?

ngAnimate 模型可以添加或移除 class 。
ngAnimate 模型并不能使 HTML 元素產(chǎn)生動畫，但是 ngAnimate 會監(jiān)測事件，類似隱藏顯示 HTML 元素，如果事件發(fā)生 ngAnimate 就會使用預(yù)定義的 class 來設(shè)置 HTML 元素的動畫。
AngularJS 添加/移除 class 的指令:

ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
其他指令會在進入 DOM 會添加 ng-enter 類，移除 DOM 會添加 ng-leave 屬性。
當(dāng) HTML 元素位置改變時，ng-repeat 指令同樣可以添加 ng-move 類。
此外，在動畫完成后，HTML 元素的類集合將被移除。例如： ng-hide
指令會添加一下類：

ng-animate
ng-hide-animate
ng-hide-add (如果元素將被隱藏)
ng-hide-remove (如果元素將顯示)
ng-hide-add-active (如果元素將隱藏)
ng-hide-remove-active (如果元素將顯示)

使用 CSS 動畫

我們可以使用 CSS transition(過渡) 或 CSS 動畫讓 HTML 元素產(chǎn)生動畫效果，該部分內(nèi)容你可以參閱我們的 CSS 過渡教程， CSS 動畫教程。

CSS 過渡

CSS 過渡可以讓我們平滑的將一個 CSS 屬性值修改為另外一個：
實例
在 DIV 元素設(shè)置了 .ng-hide 類時，過渡需要花費 0.5 秒，高度從 100px 變?yōu)?0:

<style>
  div {    
      transition: all linear 0.5s;    
      background-color: lightblue;    
      height: 100px;
  }
  .ng-hide {    
      height: 0;
  }
</style>

嘗試一下 ?

CSS 動畫

CSS 動畫允許你平滑的修改 CSS 屬性值:
實例
在 DIV 元素設(shè)置了 .ng-hide 類時, myChange 動畫將執(zhí)行，它會平滑的將高度從 100px 變?yōu)?0:

<style>
  @keyframes myChange {    
      from {        
          height: 100px;    
      } to {        
          height: 0;    
      }
  }
  div {    
      height: 100px;    
      background-color: lightblue;
  }
  div.ng-hide {    
      animation: 0.5s myChange;
  }
</style>

嘗試一下 ?

AngularJS 依賴注入

什么是依賴注入

wiki 上的解釋是：依賴注入（Dependency Injection，簡稱DI）是一種軟件設(shè)計模式，在這種模式下，一個或更多的依賴（或服務(wù)）被注入（或者通過引用傳遞）到一個獨立的對象（或客戶端）中，然后成為了該客戶端狀態(tài)的一部分。
該模式分離了客戶端依賴本身行為的創(chuàng)建，這使得程序設(shè)計變得松耦合，并遵循了依賴反轉(zhuǎn)和單一職責(zé)原則。與服務(wù)定位器模式形成直接對比的是，它允許客戶端了解客戶端如何使用該系統(tǒng)找到依賴
一句話 --- 沒事你不要來找我，有事我會去找你。

AngularJS 提供很好的依賴注入機制。以下5個核心組件用來作為依賴注入：

value
factory
service
provider
constant

value

Value 是一個簡單的 javascript 對象，用于向控制器傳遞值（配置階段）：

// 定義一個模塊
var mainApp = angular.module("mainApp", []);

// 創(chuàng)建 value 對象 "defaultInput" 并傳遞數(shù)據(jù)
mainApp.value("defaultInput", 5);
...

// 將 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { 
  $scope.number = defaultInput; 
  $scope.result = CalcService.square($scope.number); 

  $scope.square = function() { 
      $scope.result = CalcService.square($scope.number); 
  }
});

factory

factory 是一個函數(shù)用于返回值。在 service 和 controller 需要時創(chuàng)建。
通常我們使用 factory 函數(shù)來計算或返回值。

// 定義一個模塊
var mainApp = angular.module("mainApp", []);

// 創(chuàng)建 factory "MathService" 用于兩數(shù)的乘積 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() { 
  var factory = {};

  factory.multiply = function(a, b) { 
    return a * b 
  } 
  return factory;
}); 

// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){ 
  this.square = function(a) { 
    return MathService.multiply(a,a); 
  }
});
...

provider

AngularJS 中通過 provider 創(chuàng)建一個 service、factory等(配置階段)。
Provider 中提供了一個 factory 方法 get()，它用于返回 value/service/factory。

// 定義一個模塊
var mainApp = angular.module("mainApp", []);
...

// 使用 provider 創(chuàng)建 service 定義一個方法用于計算兩數(shù)乘積
mainApp.config(function($provide) { 
  $provide.provider('MathService', function() { 
    this.$get = function() { 
      var factory = {}; 

      factory.multiply = function(a, b) { 
        return a * b; 
      } 
      return factory; 
    }; 
  });
});

constant

constant(常量)用來在配置階段傳遞數(shù)值，注意這個常量在配置階段是不可用的。

mainApp.constant("configParam", "constant value");

實例
以下實例提供了以上幾個依賴注入機制的演示。

<html> 

  <head> 
    <meta charset="utf-8"> 
    <title>AngularJS 依賴注入</title> 
  </head> 

  <body> 
    <h2>AngularJS 簡單應(yīng)用</h2> 

    <div ng-app = "mainApp" ng-controller = "CalcController"> 
      <p>輸入一個數(shù)字: <input type = "number" ng-model = "number" /></p> 
      <button ng-click = "square()">X<sup>2</sup></button> 
      <p>結(jié)果: {{result}}</p> 
    </div> 

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 

    <script> 
      var mainApp = angular.module("mainApp", []); 

      mainApp.config(function($provide) { 
        $provide.provider('MathService', function() { 
          this.$get = function() { 
            var factory = {}; 

            factory.multiply = function(a, b) { 
              return a * b; 
            } 
            return factory; 
          }; 
        }); 
      }); 

      mainApp.value("defaultInput", 5); 

      mainApp.factory('MathService', function() { 
        var factory = {}; 

        factory.multiply = function(a, b) { 
          return a * b; 
        } 
        return factory; 
      }); 

      mainApp.service('CalcService', function(MathService){ 
        this.square = function(a) { 
          return MathService.multiply(a,a); 
        } 
      }); 

      mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { 
        $scope.number = defaultInput; 
        $scope.result = CalcService.square($scope.number); 

        $scope.square = function() { 
          $scope.result = CalcService.square($scope.number); 
        } 
      }); 
    </script> 
  </body>
</html>

嘗試一下 ?

AngularJS 路由

本章節(jié)我們將為大家介紹 AngularJS 路由。
AngularJS 路由允許我們通過不同的 URL 訪問不同的內(nèi)容。
通過 AngularJS 可以實現(xiàn)多視圖的單頁Web應(yīng)用（single page web application，SPA）。
通常我們的URL形式為 http://runoob.com/first/page，但在單頁Web應(yīng)用中 AngularJS 通過 # + 標(biāo)記 實現(xiàn)，例如：

http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third

當(dāng)我們點擊以上的任意一個鏈接時，向服務(wù)端請的地址都是一樣的 (http://runoob.com/)。因為 # 號之后的內(nèi)容在向服務(wù)端請求時會被瀏覽器忽略掉。所以我們就需要在客戶端實現(xiàn) # 號后面內(nèi)容的功能實現(xiàn)。 AngularJS 路由就通過 # + 標(biāo)記 幫助我們區(qū)分不同的邏輯頁面并將不同的頁面綁定到對應(yīng)的控制器上。

在以上圖形中，我們可以看到創(chuàng)建了兩個 URL： /ShowOrders 和 /AddNewOrder。每個 URL 都有對應(yīng)的視圖和控制器。
接下來我們來看一個簡單的實例：

<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>AngularJS 路由實例 - 菜鳥教程</title> 
    </head> 
    <body ng-app='routingDemoApp'> 

        <h2>AngularJS 路由應(yīng)用</h2> 
        <ul> 
            <li><a href="#/">首頁</a></li> 
            <li><a href="#/computers">電腦</a></li> 
            <li><a href="#/printers">打印機</a></li> 
            <li><a href="#/blabla">其他</a></li> 
        </ul> 

        <div ng-view></div> 
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
        <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> 
        <script> 
            angular.module('routingDemoApp',['ngRoute']) 
            .config(['$routeProvider', function($routeProvider){ 
                $routeProvider 
                .when('/',{template:'這是首頁頁面'}) 
                .when('/computers',{template:'這是電腦分類頁面'}) 
                .when('/printers',{template:'這是打印機頁面'}) 
                .otherwise({redirectTo:'/'}); 
            }]); 
        </script> 

    </body>
</html>

嘗試一下 ?
實例解析：

1、載入了實現(xiàn)路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模塊作為主應(yīng)用模塊的依賴模塊。
```
angular.module('routingDemoApp',['ngRoute'])
```
3、使用 ngView 指令。
```
<div ng-view></div>
```

該 div 內(nèi)的 HTML 內(nèi)容會根據(jù)路由的變化而變化。

4、配置 $routeProvider，AngularJS $routeProvider 用來定義路由規(guī)則。
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'這是首頁頁面'})
.when('/computers',{template:'這是電腦分類頁面'})
.when('/printers',{template:'這是打印機頁面'})
.otherwise({redirectTo:'/'});
}
]);

AngularJS 模塊的 config 函數(shù)用于配置路由規(guī)則。通過使用 configAPI，我們請求把$routeProvider注入到我們的配置函數(shù)并且使用$routeProvider.whenAPI來定義我們的路由規(guī)則。
$routeProvider 為我們提供了 when(path,object) & otherwise(object) 函數(shù)按順序定義所有路由，函數(shù)包含兩個參數(shù):

第一個參數(shù)是 URL 或者 URL 正則規(guī)則。
第二個參數(shù)是路由配置對象。

路由設(shè)置對象

AngularJS 路由也可以通過不同的模板來實現(xiàn)。
$routeProvider.when 函數(shù)的第一個參數(shù)是 URL 或者 URL 正則規(guī)則，第二個參數(shù)為路由配置對象。
路由配置對象語法規(guī)則如下：

$routeProvider.when(url, { 
    template: string, 
    templateUrl: string, 
    controller: string, function 或 array, 
    controllerAs: string, 
    redirectTo: string, function, 
    resolve: object<key, function>
});

參數(shù)說明：

template:
如果我們只需要在 ng-view 中插入簡單的 HTML 內(nèi)容，則使用該參數(shù)：
```
.when('/computers',{template:'這是電腦分類頁面'})
```
templateUrl:
如果我們只需要在 ng-view 中插入 HTML 模板文件，則使用該參數(shù)：
```
$routeProvider.when('/computers', { 
    templateUrl: 'views/computers.html',
});
```

以上代碼會從服務(wù)端獲取 views/computers.html 文件內(nèi)容插入到 ng-view 中。

controller:
function、string或數(shù)組類型，在當(dāng)前模板上執(zhí)行的controller函數(shù)，生成新的scope。
controllerAs:
string類型，為controller指定別名。
redirectTo:
重定向的地址。
resolve:
指定當(dāng)前controller所依賴的其他模塊。

實例

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
</script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) { 
    $routeProvider. 
    when('/home', { 
        templateUrl: 'embedded.home.html', 
        controller: 'HomeController' 
    }). 
    when('/about', { 
        templateUrl: 'embedded.about.html', 
        controller: 'AboutController' 
    }). 
    otherwise({ 
        redirectTo: '/home' 
    });
});
</script> 

</head>
<body ng-app="ngRouteExample" class="ng-scope"> 
  <script type="text/ng-template" id="embedded.home.html"> 
      <h1> Home </h1> 
  </script>

  <script type="text/ng-template" id="embedded.about.html"> 
      <h1> About </h1> 
  </script> 

  <div> 
    <div id="navigation"> 
      <a href="#/home">Home</a> 
      <a href="#/about">About</a> 
    </div> 

    <div ng-view=""> 
    </div> 
  </div>
</body>
</html>

嘗試一下 ?

AngularJS 應(yīng)用

現(xiàn)在是時候創(chuàng)建一個真正的 AngularJS 單頁 Web 應(yīng)用（single page web application，SPA）了。

AngularJS 應(yīng)用實例

您已經(jīng)學(xué)習(xí)了足夠多關(guān)于 AngularJS 的知識，現(xiàn)在可以開始創(chuàng)建您的第一個 AngularJS 應(yīng)用程序：

[**我的筆記**點擊測試可操作版](http://www.runoob.com/angularjs/angularjs-application.html)

應(yīng)用程序講解

AngularJS 實例

<html ng-app="myNoteApp">
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-controller="myNoteCtrl">

<h2>我的筆記</h2>

<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>

<p>Number of characters left: <span ng-bind="left()"></span></p>

</div>

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

</body>
</html>

嘗試一下 ?
應(yīng)用程序文件 "myNoteApp.js":

var app = angular.module("myNoteApp", []);

控制器文件 "myNoteCtrl.js":

app.controller("myNoteCtrl", function($scope) {    
    $scope.message = "";    
    $scope.left  = function() {return 100 - $scope.message.length;};    
    $scope.clear = function() {$scope.message = "";};    
    $scope.save  = function() {alert("Note Saved");};
});

<html> 元素是 AngularJS 應(yīng)用: ng-app="myNoteApp" 的容器:

<html ng-app="myNoteApp">

<div> 是 HTML 頁面中控制器: ng-controller="myNoteCtrl" 的作用域:

<div ng-controller="myNoteCtrl">

ng-model 指令綁定了 <textarea> 到控制器變量 message:

<textarea ng-model="message" cols="40" rows="10"></textarea>

兩個 ng-click 事件調(diào)用了控制器函數(shù) clear() 和 save():

<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>

ng-bind 指令綁定控制器函數(shù) left() 到 ，用于顯示剩余字符:

Number of characters left: <span ng-bind="left()"></span>

應(yīng)用庫文件需要在 AngularJs 加載后才能執(zhí)行：

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

AngularJS 應(yīng)用架構(gòu)

以上實例是一個完整的 AngularJS 單頁Web應(yīng)用（single page web application，SPA）。
<html> 元素包含了 AngularJS 應(yīng)用 (ng-app=)。
<div> 元素定義了 AngularJS 控制器的作用域 (ng-controller=)。
在一個應(yīng)用可以由很多控制器。
應(yīng)用文件(my...App.js) 定義了應(yīng)用模型代碼。
一個或多個控制器文件 (my...Ctrl.js) 定義了控制器代碼。

總結(jié) - 它是如何工作的呢？

ng-app 指令位于應(yīng)用的根元素下。
對于單頁Web應(yīng)用（single page web application，SPA），應(yīng)用的根通常為 <html> 元素。
一個或多個 ng-controller 指令定義了應(yīng)用的控制器。每個控制器有他自己的作用域：: 定義的 HTML 元素。
AngularJS 在 HTML DOMContentLoaded 事件中自動開始。如果找到 ng-app 指令， AngularJS 載入指令中的模塊，并將 ng-app 作為應(yīng)用的根進行編譯。
應(yīng)用的根可以是整個頁面，或者頁面的一小部分，如果是一小部分會更快編譯和執(zhí)行。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

AngularJS 動畫+依賴注入+路由+應(yīng)用

AngularJS 動畫+依賴注入+路由+應(yīng)用

AngularJS 動畫

什么是動畫？

ngAnimate 做了什么?

使用 CSS 動畫

CSS 過渡

CSS 動畫

AngularJS 依賴注入

什么是依賴注入

value

factory

provider

constant

AngularJS 路由

路由設(shè)置對象

AngularJS 應(yīng)用

AngularJS 應(yīng)用實例

應(yīng)用程序講解

AngularJS 應(yīng)用架構(gòu)

總結(jié) - 它是如何工作的呢？

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

AngularJS 動畫+依賴注入+路由+應(yīng)用

AngularJS 動畫

什么是動畫？

ngAnimate 做了什么?

使用 CSS 動畫

CSS 過渡

CSS 動畫

AngularJS 依賴注入

什么是依賴注入

value

factory

provider

constant

AngularJS 路由

路由設(shè)置對象

AngularJS 應(yīng)用

AngularJS 應(yīng)用實例

應(yīng)用程序講解

AngularJS 應(yīng)用架構(gòu)

總結(jié) - 它是如何工作的呢？

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频