如今就開始使用AngularJS的三個重要緣由

時間 2019-12-04

標籤如今開始使用 angularjs 三個重要緣由欄目 AngularJS 简体版

原文原文鏈接

若是你不熟悉什麼是Angular.js的話，小編我強烈推薦你閱讀 Javascript教程：AngularJS的五個超酷特性。簡單來講Angular.js是google開發者設計和開發的一套前端開發框架，幫助你簡化前端開發的負擔。固然，這裏有不少其它的前端開發框架，可是如何選擇合適的前端框架對於咱們這些開發人員來講就不是那麼容易了！在今天的這篇文章中，咱們將介紹三個你應該使用Angular.js的重要緣由，但願你們以爲有幫助！javascript

緣由一：Google開發的框架

要知道開源界的不少框架都是開發人員因爲我的興趣或者激情而開發出來的，好比，Cappucino 還有 Knockout。而anguar.js是由互聯網巨人Google組織開發的。這意味這你有更增強大的社區支持。誰都不但願第一天開始使用一個框架，次日發現這個框架已經被遺棄了吧！html

其實這不是Google第一次嘗試開發javascript的前端框架，你們可能還記得Web Toolkit，用來幫助你將java代碼轉化爲javasscript代碼。過去google的wave推廣用它來開發項目。隨着HTML5，CSS3和javascript的發展，Google發現web應用並不是意味着只使用純Java來實現。前端

AngularJS將幫助標準化的開發web應用結構而且提供了針對客戶端應用的將來開發使用的模板java

versin 1.0 發佈在6個月前，已經被不少的應用實踐過了，包括商業應用及其產品。Angularjs做爲可選的架構必將成爲整個開發社區的明星。由於AngualrJS是google開發的產品，因此註定了你將有一個堅實的基礎，相信它可以成爲你的最佳選擇！git

緣由二：AngularJS很是全面

相似 Backbone 或者 JavaScriptMVC，anguar是一個快速的前端開發解決方案。沒有其它的插件或者架構足以開發數據驅動的web應用。下面列出了AnguarJS的一些特性：angularjs

方便的REST： RESTful逐漸成爲了標準的服務器和客戶端溝通的方式。使用一行javascript代碼，你就能夠快速的從服務器端獲得數據。AugularJS將這些變成了JS對象，做爲Model，遵循MVVM(model view view-model)設計模式。
MVVM救星：Model將和ViewModel互動（經過$scope對象），將監聽Model的變化。這些能夠經過View來發送和渲染，由HTML來展現你的代碼。View能夠經過$routeProvider對象來支配，因此你能夠深度的連接和組織你的View和Controller，將他們變成導航URL。AngualrJS同時提供了無狀態的Controller，能夠用來初始化和控制$scope對象。
數據綁定和依賴注入：在MVVM設計模式中的任何東西不管發生任何事情都自動的和UI通訊。這幫助咱們去除了wrapper，getter/setter方法或者class定義。AngularJS將幫助咱們處理全部的這些內容，因此你能夠處理數據像處理基本javascript數據類型，例如，數組同樣簡單。固然你也能夠經過自定義處理複雜數據。正由於全部事情的發生都是自動的，因此你沒必要調用一個main()來執行你的代碼，而是經過依賴關係來驅動。
可擴展的HTML：大多數的網站都是使用非語義的<div>標籤來搭建的。你須要本身在CSS的class中定義相關的DOM層次結構。而使用AngularJS，你能夠操做XML同樣操做HTML，給你無窮的方式來完成標籤和屬性定義。AngularJS經過本身的編譯器和directives來完成相關的設置。
使用HTML模板：若是你曾經使用過Mustache ， Hogan.js，或者handlerbars的話，你就能夠快速的理解AngularJS的模板引擎語法，應爲它是純HTML的。AngularJS經過DOM瀏覽來完成此類功能，使用上面提到的directives。模板被做爲DOM元素傳遞到Angular的編譯器中，能夠被擴展，執行或者重用。這很關鍵，這樣一來你就擁有了DOM組件，而非字符串，容許你直接的操做擴展DOM樹。
企業級別的測試：AnguarJS並不依賴於第三方的插件或者是框架，包括測試。若是你熟悉QUnit, Mocha 或者 Jasmine的話，那麼對於理解Angular的單元測試和Scenario Runner來講就很是簡單。

以上的這些基本的原則可以幫助知道你使用Angular來建立高效性能可維護的代碼。只要你有代碼保存數據，AnguarJS會幫助你處理全部的重量級內容，提供一個富客戶端的超棒體驗！github

緣由三：花幾分鐘就能夠開始開發

學習Angular很是簡單。添加幾個屬性到你的HTML中，你可使用5分鐘搭建一個應用！web

添加ng-app directive到<html>標籤，這樣Angular知道應該運行：ajax

<html lang="en" ng-app>

添加Angular<script>標籤到<head>標籤裏：express

<head>
...meta and stylesheet tags...
<script src="lib/angular/angular.js"></script>

添加正常的HTML標籤。AngularJS directive能夠在HTML屬性中被訪問，而表單式將使用兩個大括號來標示：

<body ng-controller="ActivitiesListCtrl">
<h1>Today's activities</h1>
<ul>
<li ng-repeat="activity in activities">
{{activity.name}}
</li>
</ul>
</body>
</html>

ng-controller directive設置了一個名字空間，這裏咱們能夠添加angular的相關javascript來處理數據和表達式。ng-repeat是一個angular的重複對象，能夠用來建立一系列的對象元素。

當你想從Anguar中獲取數據，你使用一個對應名字的controller方法，以下：

function ActivitiesListCtrl($scope) {
$scope.activities = [
{ "name": "Wake up" },
{ "name": "Brush teeth" },
{ "name": "Shower" },
{ "name": "Have breakfast" },
{ "name": "Go to work" },
{ "name": "Write a Nettuts article" },
{ "name": "Go to the gym" },
{ "name": "Meet friends" },
{ "name": "Go to bed" }
];
}

這裏咱們建立了一個方法，名字和前面的ng-controller directive同樣，這樣咱們頁面能夠找到對應的Angular方法來執行。咱們傳遞了$(scope)對象來訪問模板中的activities列表。提供了activities對應的name，咱們在頁面中使用"{{expression}}"表達式展示出來。

或者你保存數據在服務器上，咱們一樣可使用AJAX獲取數據：