初探angular

時間 2019-11-21

原文原文鏈接

前言

　　angular4.0目前已經發布了，angular是mvw框架，因此對其有一個簡單的瞭解仍是頗有必要的。目前angular有中文官網，且文檔介紹也都是4.x的，可是爲了瞭解其發展過程，咱們先了解anguar1.x版本的，而後再瞭解4.x版本。css

　　angular的特色：html

跨平臺開發。angular能夠在網頁、移動app、hybrid等多平臺使用，angular所倡導的也是一套框架、多種平臺。
速度與性能。angular自己仍是十分先進的，好比其使用的是web worker和服務器端渲染，這樣能夠最大限度的增長響應速度。
美妙的工具。angular可使用簡潔的聲明式模板進行快速開發。而且大多數的IDE均可以支持angular的各類特性並提供了通用的組件。
流行。 angular目前在github上的star數已經超過了兩萬（1.x版本的angular已經超過了5萬）。

第一部分： angular1.x版本

　　angular 1.x 文檔vue

　　angular1.0版本是在2012年穀歌開源發佈的，至今也不過5年的時間，github上的star數已經超過5萬，可見其受歡迎程度。ios

　　首先，咱們先來看一個最簡單的angular實例：git

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

實例講解：
　　當網頁加載完畢，AngularJS 自動開啓。
　　ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程序的"全部者"。
　　ng-model 指令把輸入域的值綁定到應用程序變量 name，其中能夠看到angular也是經過 {{}} 來使用angular表達式的。　　angularjs

　　而且不可貴知一個angular應用是由模塊(Module)來定義的，而其又是由 controller 來控制的，後續會主要來說解。github

　　即咱們首先引入了 angular.min.js ，這個js文件大約有160多kb，仍是能夠接受的, 可是相較於vue的70多kb，能夠發現angular是vue的將近兩倍大小，因此咱們也就常說vue是一個輕型的JavaScript框架。而後使用angular指令 ng-app 指定了div爲angular容器。接着使用了ng-model做爲了雙向數據綁定的指令，這樣，當咱們在input中輸入時，就會在下面的H1中獲得同步的相應，以此來實現數據的雙向綁定（以前提到angular的框架是mvw，即既能夠擴展爲mvc又能夠擴展爲mvvm等等）。另外，能夠看到這方面angular和vue的理念都是相似的。 web

一、 Angular表達式ajax

　　即將表達式寫在{{}}中，一樣也可使用ng-bind實現相同的功能。其中能夠是數字、對象、數組等。vue-router

補充：angular初始化。在angular中，也是能夠進行初始化的，使用ng-init便可，這種方法在真正的項目中不經常使用，可是做爲演示，仍是有學習的必要的，以下所示：
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價: {{ quantity * cost }}</p>
</div>
這樣，咱們就經過ng-init將quantity賦值爲1，將cost賦值爲5了。

二、 Angular指令

　　angular指令是擴展的html屬性，都帶有ng-前綴，如以前遇到的ng-init、ng-bind等等。又如能夠經過ng-model進行數據綁定。

　　ng-repeat也能夠對數組、對象等遍歷，這和vue中的v-for的做用是相似的。

　　除此以外，angular爲了提供更好地可擴展性，還能夠經過自定義指令來對應用進行更好地控制。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<runoob-directive></runoob-directive>

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

</body>
</html>

如上所示：經過 app.directive() 方法就能夠定義自定義的指令了，而後在html中渲染便可。

　　在angular中，咱們能夠經過如下方式來調用指令：

元素名。即上面直接使用<runoob-directive></runoob-directive>來調用。
屬性。定義屬性以後能夠直接經過 <div runoob-directive></div> 這種方式來調用。
類名。使用<div class="runoob-directive"></div>來調用。可是在定義的時候有所不用，須要指明C，下面經過一個例子來講明。
註釋。 直接調用，一樣，須要指明M。

　　即這些指令，須要限制使用。 經過添加 restrict 屬性,並設置只值爲 "A", 來設置指令只能經過屬性的方式來調用:

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

　　另外，咱們還須要知道的是： restrict的值還能夠是下面幾種：

E --- element 做爲元素名使用
A --- attribute 做爲屬性使用
C --- class做爲類名使用
M 做爲註釋使用

三、 angular模型

　　所謂模型，實際上就是指ng-model，由於ng-model中的輸入域的值能夠和angular建立的變量相綁定，以下所示:

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

　　即首先經過module建立一個app，而後加入控制器來控制myCtrl中的內容，controller()的第二個參數接受一個函數，其參數必須爲$scope，能夠對myCtrl中的值進行控制。

　　固然，咱們也可使用ng-model實現文章開頭舉例的數據雙向綁定。

　　angular中還能夠對用戶輸入進行驗證，這是vue自己所缺乏的，以下所示:

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span>
</form>

　　這裏的ng-show和vue中的v-show用法相似，可是這裏咱們能夠經過經過myForm.myAddress.$error來調用錯誤，若是這裏有錯誤，那麼span就會顯示提示錯誤，若是沒有錯誤，那麼就不會顯示。而且其驗證的時機就是在失去焦點時開始驗證。

　　咱們還能夠根據v-model來獲取到表單的狀態，包括invalid, dirty, touched, error。

四、angular做用域

　　使用angular控制器時，咱們可使用做用域$scope了。當在控制器中添加了$scope時，就能夠經過視圖來獲取到做用域中的值了，即獲取$scope對象。

　　另外，全部的應用都有一個根做用域，即$rootScope，在根做用域中定義的值能夠在各個控制器中使用。

五、angular控制器

　　咱們經過ng-controller來定義控制器，而且能夠經過控制器來控制其中的全部數據。

　　以前咱們舉例控制器的時候提到的都是控制屬性，實際上還能夠經過控制器來實現方法，以下所示：

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

這樣，就能夠在html的表達式中調用方法了。

在大型文件中，控制器中的代碼是比較繁瑣的，因此咱們每每將之寫在一個外部js文件中，而後直接引用便可。

六、angular過濾器

　　同vue相似，angular也是支持過濾器的，這樣，更加方便咱們的操做。使用過濾器很簡單，只須要在表達式中添加一個 | 管道字符，而後添加一個過濾器便可。

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

<p>姓名爲 {{ lastName | uppercase }}</p>

</div>

　　如上所示，這個內置的過濾器就會將lastName的內容（能夠經過控制器來控制）轉化爲大寫。其餘過濾器以下:

curreny --- 轉化數字爲貨幣形式。
lowercase --- 與uppercase相反，將字母轉化爲小寫形式。
orderBy: '字符串' --- 能夠在ng-repeat中將某個對象、數組進行排序顯示。
filter --- 過濾輸入，舉例以下：

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

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

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

</div>

　　固然，不少狀況下，可能這些過濾仍是不夠用的，咱們能夠自定義過濾器，以下：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Runoob";
});
app.filter('reverse', function() { //能夠注入依賴
    return function(text) {
        return text.split("").reverse().join("");
    }
});

　　即經過filter方法來自定義過濾器。

七、 angularjs服務

　　在angular中可使用內置服務，也能夠自建服務。在angular中服務能夠是一個函數或者是一個對象，且共有30多個內置的服務，好比$location服務、$http服務等等。

　　使用angular中的服務比直接使用window中的對象更好一些，好比使用$location服務比使用window.location更具靈活性。

　　如上所示，經過對比能夠發現使用內置服務是很是不錯的。

$http服務也是angular中經常使用的服務，經過$http大大簡化了咱們發送ajax請求的步驟，而且還能夠很好的和angular相融合。以下所示，就是使用angular的$http服務發送請求：

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

能夠看到使用$http服務好處以下：

簡化了操做，若是隻使用原生ajax是很是麻煩的，因此angular提供了$http服務。
另外，像vue，咱們若是但願使用簡潔的http服務，不得不使用resource或者使用axios，可是使用這些都必須再引入額外的文件，而angular已經提早繼承了，因此使用起來時很是方便的。可是，不可避免的使得angular的體型是vue的足足兩倍之多。
針對第二點，其實還好，由於在寫中大型應用的時候，http是必定須要的，使用angular就不須要這麼多的問題了。
而隨之而來的問題是，使用vue而後外加axios或者resource的好處是方便咱們選擇不一樣的http請求框架。

$timeout服務。此服務對原生的timeout包裝了一層函數，實現了promise，在stackoverflow上對此有很好的解釋：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

而$interval服務與此相似，不作過多解釋。

另外，同指令同樣，咱們還能夠建立自定義的服務，以下：

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

八、angular HTTP

　　以前提到angular中內置了不少服務，而其中的http服務即是其中很是重要的一個。最基本的格式以下：

// 簡單的 GET 請求，能夠改成 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 請求成功執行代碼
    }, function errorCallback(response) {
        // 請求失敗執行代碼
});

　　可是，通常對於get請求和post請求都會使用相對簡潔的形式，以下所示：

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

九、angular select（選擇框）

　　angular能夠經過數組或者對象建立一個下拉框。　　

<div ng-app="myApp" ng-controller="myCtrl">
 
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

　　即這裏使用了ng-options指令。

十、angular 表格

　咱們可使用ng-repeat很容易的實現表格，結合使用orderBy過濾器效果更佳。與vue不一樣的時，使用Index須要 v-for='item,index in items '這種形式，而angular能夠不聲明 index 而直接使用$index來引用，可是缺點在於沒法解決嵌套的問題，由於當有多個 ng-repeat 時，直接使用$index就會致使數據的混亂。

　另外，爲了方便表格的使用，angular還提供了了 $odd 和 $even來判斷表格中的奇數行和偶數行。

十一、angular html dom

　　在angular中咱們還能夠經過ng-disabled綁定到html中diaabled的屬性。同vue相似，也可使用ng-show、ng-if，只是在angular中多了一個ng-hide，但本質是相似的。

十二、 angular事件

　　angularjs一樣擁有本身的html事件，如使用ng-click來表示點擊事件，其餘相似。更多的咱們能夠在angularjs的API列表中看到。

1三、 angular 模塊

　　在angular中模塊定義了一個容器，咱們經過angular.module()來建立模塊，而且能夠在模塊上添加控制器，也能夠在模塊上添加自定義的過濾器和指令。

　　即自定義的過濾器、指令都是添加到模塊上的。

1四、表單

　　和vue相似，在angular中也是可使用v-model來綁定單選框、複選框、下拉菜單等。

1五、 angular.js API

　　AngularJS 全局 API 用於執行常見任務的 JavaScript 函數集合，如：

比較對象
迭代對象
轉換對象

　　以下是常見的api：

　舉例以下；

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.lowercase($scope.x1);
});
</script>

1六、 angular bootstrap

　　angular和bootstrap框架是能夠共同使用的，以此來提升開發效率。

　　以下，咱們只要事先引入bootstrap和angular便可。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">

<h3>Users</h3>

<table class="table table-striped">
  <thead>
    <tr>
      <th>編輯</th>
      <th>名</th>
      <th>姓</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in users">
      <td>
        <button class="btn" ng-click="editUser(user.id)">
          <span class="glyphicon glyphicon-pencil"></span>編輯
        </button>
      </td>
      <td>{{ user.fName }}</td>
      <td>{{ user.lName }}</td>
    </tr>
  </tbody>
</table>

<hr>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>建立新用戶
</button>
<hr>

<h3 ng-show="edit">建立新用戶:</h3>
<h3 ng-hide="edit">編輯用戶:</h3>

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">名:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
    </div>
  </div> 
  <div class="form-group">
    <label class="col-sm-2 control-label">姓:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">密碼:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="密碼">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">重複密碼:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="重複密碼">
    </div>
  </div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>修改
</button>

</div>

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

</body>
</html>

View Code

1七、 angular 包含

　　使用angular咱們可使用ng-include在html中包含html。　　

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<body ng-app="">

<div ng-include="'runoob.htm'"></div>

</body>
</html>

1八、 angular動畫

　　angular提供了動畫效果，配合css使用，可是在使用angular動畫以前，須要引入 angular-animate.min.js 。而且還要在模型中使用ngAnimate

　　以下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">

<h1>隱藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

</body>
</html>

　　先引入了angular.min.js又引入了angular-animate.min.js，而後在body中定義了ng-app='ngAnimate'，這樣就可使用動畫了，咱們但願這個div隱藏，因此使用ng-hide，並配合.ng-hide的css來小時。

　　值得注意的是咱們在div中添加了transition: all linear 0.5s;。

1九、 angular.js 依賴注入

什麼是依賴注入？

wiki 上的解釋是：依賴注入（Dependency Injection，簡稱DI）是一種軟件設計模式，在這種模式下，一個或更多的依賴（或服務）被注入（或者經過引用傳遞）到一個獨立的對象（或客戶端）中，而後成爲了該客戶端狀態的一部分。該模式分離了客戶端依賴自己行爲的建立，這使得程序設計變得鬆耦合，並遵循了依賴反轉和單一職責原則。與服務定位器模式造成直接對比的是，它容許客戶端了解客戶端如何使用該系統找到依賴。

angularjs提供了很好的機制實現依賴注入，以下所示：

value
factory
service
provider
constant

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);
   }
});

　　即咱們首先定義了一個模塊，而後建立了對象defalutInput傳遞到模塊中，緊接着咱們又將模塊注入到控制器，而且傳入了defaultInput, 因而，咱們就能夠在控制器中使用傳入的值了。

factory、service

　　factory是一個函數，最後返回一個對象，對象中包含方法，而後在service中被調用。舉例以下：

// 定義一個模塊
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);
   }
});
...

　　即定義了factory以後，咱們就能夠在service中使用了，而這裏的service若是沒有猜錯就像以前的指令、過濾器同樣是自定義的，咱們能夠經過 angular.$CalcService()來調用這個方法。

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;
      };
   });
});

constant　　

　　constant是在配置階段傳遞數值的。在配置階段不可以使用。

20、 angular路由

　　同vue使用vue-router同樣，使用angular路由須要引入angular-route.min.js文件。

<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS 路由實例 - 菜鳥教程</title>
    </head>
    <body ng-app='routingDemoApp'>
     
        <h2>AngularJS 路由應用</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>

基本的路由配置如上，能夠看到，這裏使用了routerProvider，而後使用when()方法來作出判斷，導向不一樣的路由。即在angular中也是使用#/路由路徑的方式來進行路由的。另外，在vue中使用router-view來接收路由過來的內容，而在angular中咱們使用的是<div ng-view></div>的方式來接收路由來的內容，基本原理仍是相似的。

更多咱們能夠參考這裏。　　

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。