自動化雙向數據綁定AngularJs---入門

時間 2019-11-16

原文原文鏈接

前言javascript

　AngularJS，由Misko Hevery 等人建立，後爲Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。它可經過 <script> 標籤添加到 HTML 頁面。html

1AngularJS的表達式

AngularJS 使用 表達式 把數據綁定到 HTML.前端

AngularJS 表達式寫在雙大括號內：{{ expression }}。java

AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有殊途同歸之妙。angularjs

AngularJS 將在表達式書寫的位置"輸出"數據。express

AngularJS 表達式 很像 JavaScript 表達式：它們能夠包含文字、運算符和變量。設計模式

實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}.瀏覽器

實例app

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
 
<div ng-app="">
     <p>個人第一個表達式: {{ 5 + 5 }}</p>
</div>
 
</body>
</html>

2AngularJS的模塊

模塊定義了一個應用程序。框架

模塊是應用程序中不一樣部分的容器。

模塊是應用控制器的容器。

控制器一般屬於一個模塊

建立模塊

能夠經過 AngularJS 的 angular.module 函數來建立模塊：

<div ng-app="myApp">...</div>

<script>

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

"myApp" 參數對應執行應用的 HTML 元素。

如今你能夠在 AngularJS 應用中添加控制器，指令，過濾器等

添加控制器

可使用 ng-controller 指令來添加應用的控制器:

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>

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

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

</script>

添加指令

AngularJS 提供了不少內置的指令，你可使用它們來爲你的應用添加功能。

完整的指令內容能夠參閱 AngularJS 參考手冊。

此外，你可使用模塊來爲你應用添加本身的指令：

<div ng-app="myApp" runoob-directive></div>

<script>

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

app.directive("runoobDirective", function() {
    return {
        template : "我在指令構造器中建立!"
    };
});
</script>

模塊和控制器包含在 JS 文件中

一般 AngularJS 應用程序將模塊和控制器包含在 JavaScript 文件中。

在如下實例中， "myApp.js" 包含了應用模塊的定義程序， "myCtrl.js" 文件包含了控制器：

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

<div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

3內AngularJs的scSCOPE（做用域）

Scope(做用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。

Scope 是一個對象，有可用的方法和屬性。

Scope 可應用在視圖和控制器上

如何使用 Scope

當你在 AngularJS 建立控制器時，你能夠將 $scope 對象看成一個參數傳遞:

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

<h1>{{carname}}</h1>

</div>

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

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script

當在控制器中添加 $scope 對象時，視圖 (HTML) 能夠獲取了這些屬性。

視圖中，你不須要添加 $scope 前綴, 只須要添加屬性名便可，如： {{carname}}.

若是你修改了視圖，模型和控制器也會相應更新.

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}</h1>
    <button ng-click='sayHello()'>點我</button>    
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Runoob";
    $scope.sayHello = function() {
        $scope.greeting = 'Hello ' + $scope.name + '!';
    };
});
</script>

Scope 做用範圍

瞭解你當前使用的 scope 是很是重要的。

在以上兩個實例中，只有一個做用域 scope，因此處理起來比較簡單，但在大型項目中， HTML DOM 中有多個做用域，這時你就須要知道你使用的 scope 對應的做用域是哪個。

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

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

</div>

<script>
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Emil", "Tobias", "Linus"]; }); </script>

根做用域

全部的應用都有一個 $rootScope，它能夠做用在 ng-app 指令包含的全部 HTML 元素中。

$rootScope 可做用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，能夠在各個 controller 中使用。

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

<h1>{{lastname}} 家族成員:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

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

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

4內AngularJs的依賴注入

什麼是依賴注入

wiki 上的解釋是：依賴注入（Dependency Injection，簡稱DI）是一種軟件設計模式，在這種模式下，一個或更多的依賴（或服務）被注入（或者經過引用傳遞）到一個獨立的對象（或客戶端）中，而後成爲了該客戶端狀態的一部分。

該模式分離了客戶端依賴自己行爲的建立，這使得程序設計變得鬆耦合，並遵循了依賴反轉和單一職責原則。與服務定位器模式造成直接對比的是，它容許客戶端了解客戶端如何使用該系統找到依賴.

value

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

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

// 建立 value 對象 "defaultInput" 並傳遞數據
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 是一個函數用於返回值。在 service 和 controller 須要時建立。

一般咱們使用 factory 函數來計算或返回值。

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

// 建立 factory "MathService" 用於兩數的乘積 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 建立一個 service、factory等(配置階段)。

Provider 中提供了一個 factory 方法 get()，它用於返回 value/service/factory

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

// 使用 provider 建立 service 定義一個方法用於計算兩數乘積
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
})