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

AngularJS 動(dòng)畫(huà)

<small>AngularJS 提供了動(dòng)畫(huà)效果，可以配合 CSS 使用。
AngularJS 使用動(dòng)畫(huà)需要引入 angular-animate.min.js 庫(kù)。

<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">
什么是動(dòng)畫(huà)？

動(dòng)畫(huà)是通過(guò)改變 HTML 元素產(chǎn)生的動(dòng)態(tài)變化效果。
實(shí)例
勾選復(fù)選框隱藏 DIV:</small>

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

嘗試一下 ?
<small>
應(yīng)用中動(dòng)畫(huà)不宜太多，但合適的使用動(dòng)畫(huà)可以增加頁(yè)面的豐富性，也可以更易讓用戶理解。

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

<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)生動(dòng)畫(huà)，但是 ngAnimate 會(huì)監(jiān)測(cè)事件，類(lèi)似隱藏顯示 HTML 元素 ，如果事件發(fā)生 ngAnimate 就會(huì)使用預(yù)定義的 class 來(lái)設(shè)置 HTML 元素的動(dòng)畫(huà)。
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 的值。
其他指令會(huì)在進(jìn)入 DOM 會(huì)添加 ng-enter 類(lèi)，移除 DOM 會(huì)添加 ng-leave 屬性。
當(dāng) HTML 元素位置改變時(shí)，ng-repeat 指令同樣可以添加 ng-move 類(lèi) 。
此外， 在動(dòng)畫(huà)完成后，HTML 元素的類(lèi)集合將被移除。例如： ng-hide
指令會(huì)添加一下類(lèi)：

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (如果元素將被隱藏)
  • ng-hide-remove (如果元素將顯示)
  • ng-hide-add-active (如果元素將隱藏)
  • ng-hide-remove-active (如果元素將顯示)
使用 CSS 動(dòng)畫(huà)

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

CSS 過(guò)渡

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

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

嘗試一下 ?

CSS 動(dòng)畫(huà)

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

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

嘗試一下 ?

AngularJS 依賴注入

什么是依賴注入

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

AngularJS 提供很好的依賴注入機(jī)制。以下5個(gè)核心組件用來(lái)作為依賴注入：

  • value
  • factory
  • service
  • provider
  • constant

value

Value 是一個(gè)簡(jiǎn)單的 javascript 對(duì)象，用于向控制器傳遞值（配置階段）：</small>

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

// 創(chuàng)建 value 對(duì)象 "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

<small>factory 是一個(gè)函數(shù)用于返回值。在 service 和 controller 需要時(shí)創(chuàng)建。
通常我們使用 factory 函數(shù)來(lái)計(jì)算或返回值。</small>

// 定義一個(gè)模塊
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

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

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

// 使用 provider 創(chuàng)建 service 定義一個(gè)方法用于計(jì)算兩數(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

<small>constant(常量)用來(lái)在配置階段傳遞數(shù)值，注意這個(gè)常量在配置階段是不可用的。</small>

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

實(shí)例
<small>以下實(shí)例提供了以上幾個(gè)依賴注入機(jī)制的演示。</small>

<html> 

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

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

    <div ng-app = "mainApp" ng-controller = "CalcController"> 
      <p>輸入一個(gè)數(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 路由

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

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

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


在以上圖形中，我們可以看到創(chuàng)建了兩個(gè) URL： /ShowOrders 和 /AddNewOrder。每個(gè) URL 都有對(duì)應(yīng)的視圖和控制器。
接下來(lái)我們來(lái)看一個(gè)簡(jiǎn)單的實(shí)例：</small>

<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>AngularJS 路由實(shí)例 - 菜鳥(niǎo)教程</title> 
    </head> 
    <body ng-app='routingDemoApp'> 

        <h2>AngularJS 路由應(yīng)用</h2> 
        <ul> 
            <li><a href="#/">首頁(yè)</a></li> 
            <li><a href="#/computers">電腦</a></li> 
            <li><a href="#/printers">打印機(jī)</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:'這是首頁(yè)頁(yè)面'}) 
                .when('/computers',{template:'這是電腦分類(lèi)頁(yè)面'}) 
                .when('/printers',{template:'這是打印機(jī)頁(yè)面'}) 
                .otherwise({redirectTo:'/'}); 
            }]); 
        </script> 

    </body>
</html>

嘗試一下 ?
<small>實(shí)例解析：

  • 1、載入了實(shí)現(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)容會(huì)根據(jù)路由的變化而變化。

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

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

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

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

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

參數(shù)說(shuō)明：

  • template:
    如果我們只需要在 ng-view 中插入簡(jiǎn)單的 HTML 內(nèi)容，則使用該參數(shù)：

    .when('/computers',{template:'這是電腦分類(lèi)頁(yè)面'})

  • templateUrl:
    如果我們只需要在 ng-view 中插入 HTML 模板文件，則使用該參數(shù)：

    $routeProvider.when('/computers', { 
    templateUrl: 'views/computers.html',
});

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

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

實(shí)例

<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)用

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

AngularJS 應(yīng)用實(shí)例

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

[**我的筆記**點(diǎn)擊測(cè)試可操作版](http://www.runoob.com/angularjs/angularjs-application.html)
應(yīng)用程序講解

AngularJS 實(shí)例

<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>

嘗試一下 ?
<small>應(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 頁(yè)面中控制器: ng-controller="myNoteCtrl" 的作用域:

<div ng-controller="myNoteCtrl">

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

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

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

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

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

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

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

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

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

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

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

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ng-model 指令ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)。ng-model 指令也可以：...
    壬萬(wàn)er閱讀 974評(píng)論 0贊 2
  • AngularJS是什么？AngularJs（后面就簡(jiǎn)稱ng了）是一個(gè)用于設(shè)計(jì)動(dòng)態(tài)web應(yīng)用的結(jié)構(gòu)框架。首先，它是...
    200813閱讀 1,783評(píng)論 0贊 3
  • Angular JS 基礎(chǔ) 本文中的AngularJS是AngularJS 1.x AngularJS是一個(gè)Jav...
    靜候那一米陽(yáng)光閱讀 900評(píng)論 0贊 13
  • 簡(jiǎn)介： AngularJS 是一個(gè) JavaScript 框架。它可通過(guò) 標(biāo)簽添加到 HTML 頁(yè)面。 Ang...
    JenniferYe閱讀 1,519評(píng)論 0贊 13
  • 學(xué)習(xí)一門(mén)語(yǔ)言之前先了解它的組成結(jié)構(gòu)，絕對(duì)是非常有意義的。當(dāng)初學(xué)習(xí)java se的時(shí)候就是在了解java桌面程序...
    橙風(fēng)破浪z閱讀 665評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容