javascript - 如果我有jQuery背景，“在AngularJS中思考”？

(13)

我發現這個問題很有意思，因為我第一次認真接觸JavaScript編程的是Node.js和AngularJS。我從來沒有學過jQuery，我想這是件好事，因為我不需要忘記任何事情。事實上，我主動避免jQuery解決方案來解決我的問題，而只是尋找一種“AngularJS方式”來解決它們。所以，我想我對這個問題的回答基本上歸結為“想像一個從未學過jQuery的人”，並避免任何直接合併jQuery的誘惑（顯然AngularJS在某種程度上在幕後使用它）。

假設我熟悉在jQuery開發客戶端應用程序，但現在我想開始使用AngularJS 。你能描述一下必要的範式轉變嗎？以下是一些可能有助於您確定答案的問題：

如何以不同方式構建和設計客戶端Web應用程序？最大的區別是什麼？
我應該停止做什麼/使用什麼; 我應該開始做什麼/使用什麼呢？
有任何服務器端考慮因素/限制嗎？

我不是在尋找jQuery和AngularJS之間的詳細比較。

收聽播客JavaScript Jabber：第32集，其中包括AngularJS的原始創作者：Misko Hevery和Igor Minar。他們談論了從其他JavaScript背景到AngularJS的內容，特別是jQuery。

在播客中提出的觀點之一讓我對你的問題有所了解：

MISKO：[...]我們在Angular中很少考慮的事情之一是，我們如何提供大量的逃生艙，這樣你就可以走出去，基本上找到一條出路。所以對我們來說，答案就是這個叫做“指令”的東西。使用指令，你基本上成為一個常規的小jQuery JavaScript，你可以做任何你想做的事情。
IGOR：所以將指令視為編譯器的指令，告訴它每當你遇到模板中的這個特定元素或這個CSS時，你就會保留這種代碼，並且代碼負責元素和元素下面的所有內容在DOM樹中。

整個劇集的成績單可在上面提供的鏈接中找到。

所以，直接回答你的問題：AngularJS是非常自以為是的，是一個真正的MV *框架。但是，你仍然可以在指令中使用jQuery來完成你所熟悉和喜愛的所有非常酷的東西。這不是“我如何做我在jQuery中常用的東西？”的問題。就像“我如何用jQuery中的所有東西來補充AngularJS一樣”這個問題一樣多。“

這真的是兩種截然不同的心態。

jQuery的

jQuery製作了一些可笑的長命令，比如getElementByHerpDerp簡短和跨瀏覽器。

AngularJS

AngularJS允許您創建自己的HTML標記/屬性，這些標記/屬性可以很好地處理動態Web應用程序（因為HTML是為靜態頁面設計的）。

編輯：

說“我有一個jQuery背景我如何在AngularJS中思考？” 就像說“我有一個HTML背景我如何在JavaScript中思考？” 您提出問題的事實表明您很可能不理解這兩種資源的基本目的。這就是為什麼我選擇通過簡單地指出基本區別來回答問題，而不是通過列表說“AngularJS使用指令，而jQuery使用CSS選擇器來創建一個jQuery對象來執行此操作等等......” 。這個問題不需要冗長的答案。

jQuery是一種使瀏覽器中的JavaScript編程更容易的方法。更短，跨瀏覽器的命令等

AngularJS擴展了HTML，因此您不必<div>為了創建應用程序而將所有地方放在一起。它使HTML實際上適用於應用程序而不是它的設計目標，即靜態的教育網頁。它使用JavaScript以迂迴的方式實現這一點，但從根本上說它是HTML的擴展，而不是JavaScript。

作為一個JavaScript MV *初學者，純粹關注應用程序架構（而不是服務器/客戶端問題），我肯定會推薦以下資源（我很驚訝還沒有提到）：JavaScript設計模式，作者：Addy Osmani ，作為不同JavaScript設計模式的介紹。本答案中使用的術語來自上面的鏈接文檔。我不打算在接受的答案中重複措辭。相反，這個答案鏈接到為AngularJS（和其他庫）提供動力的理論背景。

像我一樣，你會很快意識到AngularJS（或者Ember.js，Durandal和其他MV *框架）是一個複雜的框架，它匯集了許多不同的JavaScript設計模式。

我發現它也更容易，以測試（1）天然的JavaScript代碼和（2）對於這些模式中的每一個更小的文庫分別潛水成一個全球框架之前。這使我能夠更好地理解框架所針對的哪些關鍵問題（因為您個人面臨問題）。

例如：

JavaScript面向對象編程（這是一個Google搜索鏈接）。它不是一個庫，但肯定是任何應用程序編程的先決條件。它教會了我原型，構造函數，單例和裝飾器模式的實現
jQuery用於外觀模式的jQuery / Underscore（如用於操作DOM的WYSIWYG）
的prototype.js為原型/構造函數/混入模式
RequireJS / Curl.js用於模塊模式/ AMD
KnockoutJS用於可觀察，發布/訂閱模式

注意：這個列表不完整，也不是'最好的圖書館'; 它們恰好是我使用的庫。這些庫還包括更多模式，提到的模式只是它們的主要焦點或原始意圖。如果您覺得此列表中缺少某些內容，請在評論中提及，我將很樂意添加它。

AngularJS和jQuery：

除了JQLite功能之外，AngularJs和JQuery在每個級別都完全不同，一旦你開始學習AngularJs的核心功能，你就會看到它（我在下面解釋過）。

AngularJs是一個客戶端框架，用於構建獨立的客戶端應用程序。JQuery是一個圍繞DOM的客戶端庫。

AngularJs Cool Principle - 如果您希望在UI上進行一些更改，請從模型數據更改角度進行思考。更改您的數據和UI將重新呈現自己。你不需要每次都玩DOM，除非並且直到它幾乎不需要，並且也應該通過Angular Directives來處理。

要回答這個問題，我想與AngularJS分享我在第一個企業應用程序上的經驗。這些是Angular提供的最強大的功能，我們開始改變我們的jQuery思維模式，我們將Angular看作框架而不是庫。

雙向數據綁定是驚人的：我有一個網格，所有功能都是UPDATE，DELTE，INSERT。我有一個數據對象，使用ng-repeat綁定網格模型。您只需編寫一行簡單的JavaScript代碼即可進行刪除和插入，就是這樣。當網格模型立即更改時，網格會自動更新。更新功能是實時的，沒有代碼。你覺得很棒！

可重複使用的指令是超級的：在一個地方寫指令並在整個應用程序中使用它。我的天啊！！！我使用這些指令進行分頁，正則表達式，驗證等等。真的很酷！

路由很強：由您的實現決定如何使用它，但它需要很少的代碼行來路由請求以指定HTML和控制器（JavaScript）

控制器很棒：控制器會處理自己的HTML，但這種分離對於常見功能也很有效。如果要在主HTML上單擊按鈕調用相同的函數，只需在每個控制器中寫入相同的函數名稱並編寫單獨的代碼。

插件：還有許多其他類似功能，例如在您的應用中顯示疊加層。您不需要為它編寫代碼，只需使用可用作wc-overlay的覆蓋插件，這將自動處理所有XMLHttpRequest（XHR）請求。

RESTful架構的理想選擇：作為一個完整的框架，AngularJS非常適合使用RESTful架構。調用REST CRUD API非常簡單

服務：使用服務編寫公共代碼，在控制器中編寫較少代碼。服務可用於共享控制器之間的共同功能。

可擴展性：Angular使用angular指令擴展了HTML指令。在html中編寫表達式並在運行時評估它們。創建自己的指令和服務，並在不需要額外努力的情況下在另一個項目中使用它們。

你能描述一下必要的範式轉變嗎？

勢在必行與陳述

使用jQuery，您可以一步一步地告訴DOM需要發生什麼。使用AngularJS您可以描述您想要的結果，但不能描述如何執行此操作。更多關於here。另外，請查看Mark Rajcok的答案。

如何以不同方式構建和設計客戶端Web應用程序？

AngularJS是一個使用MVC模式的完整客戶端框架（查看其圖形表示）。它非常注重關注點的分離。

最大的區別是什麼？我應該停止做什麼/使用什麼; 我應該開始做什麼/使用呢？

jQuery是一個庫

AngularJS是一個漂亮的客戶端框架，高度可測試，它結合了許多很酷的東西，如MVC，依賴注入，數據綁定等等。

它側重於關注點和測試（單元測試和端到端測試）的分離，這有助於測試驅動的開發。

最好的方法是通過他們的精彩教程。你可以在幾個小時內完成這些步驟; 但是，如果你想掌握幕後的概念，它們包含了無數的參考資料以供進一步閱讀。

有任何服務器端考慮因素/限制嗎？

您可以在已經使用純jQuery的現有應用程序上使用它。但是，如果您想充分利用AngularJS功能，可以考慮使用RESTful方法對服務器端進行編碼。

這樣做將允許您利用他們的資源工廠，它創建服務器端RESTful API的抽象，並使服務器端調用（獲取，保存，刪除等）非常容易。

他們是蘋果和橘子。你不想比較它們。他們是兩件不同的事。AngularJs已經內置了jQuery lite，它允許你執行基本的DOM操作，甚至不包括完整的jQuery版本。

jQuery是關於DOM操作的。它解決了所有跨瀏覽器的痛苦，否則你將不得不處理，但它不是一個允許你將你的應用程序劃分為AngularJS等組件的框架。

AngularJs的一個好處是它允許您在指令中分離/隔離DOM操作。有內置指令可供您使用，例如ng-click。您可以創建自己的自定義指令，其中包含所有視圖邏輯或DOM操作，因此您最終不會將DOM操作代碼混合在應該處理業務邏輯的控制器或服務中。

Angular將您的應用分解為 - 控制器 - 服務 - 視圖 - 等

還有一件事，就是指令。它是一個可以附加到任何DOM元素的屬性，你可以在其中使用jQuery，而不必擔心你的jQuery會與AngularJs組件發生衝突或者與它的架構混淆。

我從參加過的聚會中聽到，Angular的一位創始人表示他們非常努力地將DOM操作分開，所以不要試圖將它們包括在內。

勢在必行→陳述性

在jQuery中， 選擇器用於查找DOM元素，然後將事件處理程序綁定/註冊到它們。當事件觸發時，執行（命令性）代碼以更新/更改DOM。

在AngularJS中，您需要考慮視圖而不是DOM元素。視圖是包含AngularJS 指令的 （聲明性）HTML。指令為我們幕後設置了事件處理程序，並為我們提供了動態數據綁定。選擇器很少使用，因此對ID（以及某些類型的類）的需求大大減少。視圖與模型相關 （通過範圍）。視圖是模型的投影。事件更改模型（即數據，範圍屬性）以及投影這些模型的視圖會“自動”更新。

在AngularJS中，考慮模型，而不是jQuery選擇的DOM元素來保存您的數據。將視圖視為這些模型的投影，而不是註冊回調來操縱用戶看到的內容。

關注點分離

jQuery使用不引人注目的JavaScript - 行為（JavaScript）與結構（HTML）分離。

AngularJS使用控制器和指令（每個控制器和指令可以有自己的控制器和/或編譯和鏈接函數）來從視圖/結構（HTML）中刪除行為。 Angular還提供服務和過濾器，以幫助分離/組織您的應用程序。

另請參見https://.com/a/14346528/215945

應用設計

設計AngularJS應用程序的一種方法：

想想你的模特。為這些模型創建服務或您自己的JavaScript對象。
想想你想要如何展示你的模特 - 你的觀點。為每個視圖創建HTML模板，使用必要的指令來獲取動態數據綁定。
將控制器連接到每個視圖（使用ng-view和routing，或ng-controller）。讓控制器只查找/獲取視圖完成其工作所需的任何模型數據。使控制器盡可能薄。

原型繼承

你可以在不知道JavaScript原型繼承如何工作的情況下使用jQuery做很多事情。在開發AngularJS應用程序時，如果您對JavaScript繼承有很好的理解，就可以避免一些常見的陷阱。推薦閱讀： AngularJS中範圍原型/原型繼承的細微差別是什麼？

1.不要設計頁面，然後使用DOM操作進行更改

在jQuery中，您設計了一個頁面，然後將其設置為動態。這是因為jQuery是為增強而設計的，並且從這個簡單的前提中獲得了令人難以置信的增長。

但是在AngularJS中，您必須從頭開始考慮您的架構。而不是首先考慮“我有這塊DOM，我想讓它做X”，你必須從你想要完成的事情開始，然後去設計你的應用程序，然後最後去設計你的視圖。

2.不要使用AngularJS擴充jQuery

同樣，不要從jQuery做X，Y和Z的想法開始，所以我只是在模型和控制器的基礎上添加AngularJS。當你剛剛開始時，這真的很誘人，這就是為什麼我總是建議新的AngularJS開發人員根本不使用jQuery，至少在他們習慣於“Angular Way”做事之前。

我在這里和郵件列表上看到很多開發人員使用150或200行代碼的jQuery插件創建這些精心設計的解決方案，然後他們將這些代碼粘合到AngularJS中，其中包含一系列令人困惑和錯綜複雜的回調和$apply ; 但他們最終讓它發揮作用！問題在於，在大多數情況下，jQuery插件可以在AngularJS中以一小部分代碼重寫，突然間一切都變得易於理解和直接。

最重要的是：在解決問題時，首先要“在AngularJS中思考”; 如果你想不出解決方案，請問社區; 如果完全沒有簡單的解決方案，那麼隨時可以找到jQuery。但是不要讓jQuery成為拐杖或者你永遠不會掌握AngularJS。

3.始終從架構的角度思考

首先要知道單頁應用程序是應用程序 。他們不是網頁。因此，我們需要像服務器端開發人員一樣思考，而不是像客戶端開發人員那樣思考。我們必須考慮如何將我們的應用程序劃分為單獨的，可擴展的，可測試的組件。

那你怎麼做的呢？你如何“在AngularJS中思考”？以下是一些與jQuery形成對比的一般原則。

該觀點是“官方記錄”

在jQuery中，我們以編程方式更改視圖。我們可以將下拉菜單定義為ul如下所示：

<ul class="main-menu">
    <li class="active">
        <a href="#/home">Home</a>
    </li>
    <li>
        <a href="#/menu1">Menu 1</a>
        <ul>
            <li><a href="#/sm1">Submenu 1</a></li>
            <li><a href="#/sm2">Submenu 2</a></li>
            <li><a href="#/sm3">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#/home">Menu 2</a>
    </li>
</ul>

在jQuery中，在我們的應用程序邏輯中，我們將使用以下內容激活它：

$('.main-menu').dropdownMenu();

當我們只看這個視圖時，並不是很明顯這裡有任何功能。對於小型應用，這很好。但對於非平凡的應用程序，事情很快就會變得混亂和難以維護。

但是，在AngularJS中，視圖是基於視圖的功能的官方記錄。我們的ul聲明將是這樣的：

<ul class="main-menu" dropdown-menu>
    ...
</ul>

這兩個做同樣的事情，但在AngularJS版本中，任何看模板的人都知道應該發生什麼。每當開發團隊的新成員加入時，她都可以查看這個，然後知道有一個名為dropdownMenu的指令在其上運行; 她不需要直截了當地回答正確的答案或篩選任何代碼。該觀點告訴我們應該發生什麼。更清潔。

AngularJS的新手開發人員經常會問一個問題：如何查找特定類型的所有鏈接並在其上添加指令。當我們回复時，開發人員總是大吃一驚：你沒有。但你不這樣做的原因是這就像是半jQuery，半AngularJS，並沒有好處。這裡的問題是開發人員試圖在AngularJS的上下文中“執行jQuery”。那永遠不會好起來的。該觀點是官方記錄。在指令之外（以下更多內容），您永遠不會永遠不會更改DOM。並且指令在視圖中應用，因此意圖很明確。

記住：不要設計，然後標記。你必須設計，然後設計。

數據綁定

這是迄今為止AngularJS最強大的功能之一，並且我在上一節中提到了很多需要進行各種DOM操作。 AngularJS會自動更新您的視圖，所以您不必！在jQuery中，我們響應事件然後更新內容。就像是：

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});

對於看起來像這樣的視圖：

<ul class="messages" id="log">
</ul>

除了混合問題，我們也有同樣的問題，表明我之前提到的意圖。但更重要的是，我們必須手動引用和更新DOM節點。如果我們想要刪除日誌條目，我們也必須針對DOM進行編碼。我們如何測試除DOM之外的邏輯？如果我們想改變演示文稿怎麼辦？

這有點凌亂，有點脆弱。但是在AngularJS中，我們可以這樣做：

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

我們的觀點可能如下所示：

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

但就此而言，我們的觀點可能如下所示：

<div class="messages">
    <div class="alert" ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

而現在我們使用的是Bootstrap警報框，而不是使用無序列表。我們永遠不必更改控制器代碼！但更重要的是，無論日誌在何處或如何更新，視圖也會發生變化。自動。整齊！

雖然我沒有在這裡顯示，但數據綁定是雙向的。因此，只需執行以下操作，即可在視圖中編輯這些日誌消息： <input ng-model="entry.msg" /> 。有很多的欣喜。

不同的模型層

在jQuery中，DOM有點像模型。但是在AngularJS中，我們有一個單獨的模型層，我們可以以任何方式管理，完全獨立於視圖。這有助於上述數據綁定，保持關注點的分離，並引入更大的可測試性。其他答案提到了這一點，所以我就把它留在那裡。

關注點分離

以上所有內容都與這個主題相關：將您的擔憂分開。你的觀點作為應該發生的事情的官方記錄（大部分）; 你的模型代表你的數據; 你有一個服務層來執行可重用的任務; 你做DOM操作並用指令擴充你的視圖; 然後將它們與控制器粘合在一起。在其他答案中也提到了這一點，我將添加的唯一內容涉及可測試性，我將在下面的另一部分中討論。

依賴注入

為了幫助我們分離關注點，依賴注入（DI）。如果你來自服務器端語言（從Java到PHP ），你可能已經熟悉了這個概念，但如果你是一個來自jQuery的客戶端人，那麼這個概念可能看起來從愚蠢到多餘到時髦。但事實並非如此。 :-)

從廣義的角度來看，DI意味著您可以非常自由地聲明組件，然後從任何其他組件聲明組件，只需要詢問它的實例，它就會被授予。您無需了解加載順序，文件位置或類似內容。電源可能不會立即可見，但我只提供一個（常見）示例：測試。

讓我們說在我們的應用程序中，我們需要一個通過REST API實現服務器端存儲的服務，並且根據應用程序狀態，還需要本地存儲。在我們的控制器上運行測試時，我們不希望與服務器通信 - 畢竟我們正在測試控制器 。我們可以添加一個與原始組件同名的模擬服務，注入器將確保我們的控制器自動獲取假的 - 我們的控制器不會，也不需要知道差異。

說到測試......

4.測試驅動的開發 - 永遠

這實際上是關於體系結構的第3部分的一部分，但它非常重要，我將它作為自己的頂級部分。

在您看過，使用過或編寫的所有jQuery插件中，有多少有一個附帶的測試套件？不是很多，因為jQuery不太適合。但AngularJS是。

在jQuery中，唯一的測試方法通常是使用示例/演示頁面獨立創建組件，我們的測試可以對其執行DOM操作。那麼我們必須單獨開發一個組件，然後將其集成到我們的應用程序中。多麼不方便！很多時候，在使用jQuery開發時，我們選擇迭代而不是測試驅動開發。誰可以怪我們？

但是因為我們有關注點分離，我們可以在AngularJS中迭代地進行測試驅動開發！例如，假設我們想要一個超級簡單的指令在我們的菜單中指出我們當前的路線是什麼。我們可以在應用程序視圖中聲明我們想要的內容：

<a href="/hello" when-active>Hello</a>

好的，現在我們可以為不存在的when-active指令編寫一個測試：

it( 'should add "active" when the route changes', inject(function() {
    var elm = $compile( '<a href="/hello" when-active>Hello</a>' )( $scope );

    $location.path('/not-matching');
    expect( elm.hasClass('active') ).toBeFalsey();

    $location.path( '/hello' );
    expect( elm.hasClass('active') ).toBeTruthy();
}));

當我們運行測試時，我們可以確認它失敗了。只有現在我們才能創建我們的指令：

.directive( 'whenActive', function ( $location ) {
    return {
        scope: true,
        link: function ( scope, element, attrs ) {
            scope.$on( '$routeChangeSuccess', function () {
                if ( $location.path() == element.attr( 'href' ) ) {
                    element.addClass( 'active' );
                }
                else {
                    element.removeClass( 'active' );
                }
            });
        }
    };
});

我們的測試現在通過，我們的菜單按要求執行。我們的開發既是迭代的，也是測試驅動的。妖獸爽。

從概念上講，指令不是打包的jQuery

您經常會聽到“只在指令中執行DOM操作”。 這是必要的。 善意對待它！

但是讓我們深入一點......

一些指令只是裝飾視圖中的內容（想想ngClass ），因此有時會直接進行DOM操作，然後基本完成。但是如果指令就像一個“小部件”並且有一個模板，那麼它也應該尊重關注點的分離。也就是說，模板也應該在很大程度上獨立於鏈接和控制器功能中的實現。

AngularJS附帶了一整套工具，可以輕鬆實現這一目標。使用ngClass我們可以動態更新類; ngModel允許雙向數據綁定; ngShow和ngHide編程方式顯示或隱藏元素; 還有更多 - 包括我們自己寫的那些。換句話說，我們可以在沒有 DOM操作的情況下做各種各樣的超棒。 DOM操作越少，測試指令就越容易，它們的樣式就越容易，將來它們就越容易改變，它們的可重用性和可分發性就越高。

我看到許多開發人員對AngularJS很新，使用指令作為拋出一堆jQuery的地方。換句話說，他們認為“因為我不能在控制器中進行DOM操作，所以我會把代碼放在指令中”。雖然這當然要好得多，但它通常仍然是錯誤的 。

想想我們在第3節中編寫的記錄器。即使我們把它放在一個指令中，我們仍然希望用“Angular Way”來做。它仍然不需要任何DOM操作！很多時候DOM操作是必要的，但它比你想像的要少得多！在應用程序中的任何位置進行DOM操作之前，請先問問自己是否真的需要。可能有更好的方法。

這是一個快速示例，顯示了我最常見的模式。我們想要一個可切換的按鈕。（注意：這個例子有點人為，並且表示更複雜的情況，以完全相同的方式解決。）

.directive( 'myDirective', function () {
    return {
        template: '<a class="btn">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            var on = false;

            $(element).click( function () {
                on = !on;
                $(element).toggleClass('active', on);
            });
        }
    };
});

這有一些問題：

首先，jQuery從來都不是必需的。我們在這裡做的一切都不需要jQuery！
其次，即使我們的頁面上已經有jQuery，也沒有理由在這裡使用它; 我們可以簡單地使用angular.element ，當我們放入沒有jQuery的項目時，我們的組件仍然可以工作。
第三，即使假設此指令需要jQuery才能工作，jqLite（ angular.element ）將始終使用jQuery（如果已加載）！所以我們不需要使用$ - 我們可以使用angular.element 。
第四，與第三個密切相關的是，jqLite元素不需要包裝在$ - 傳遞給link函數的元素已經是 jQuery元素！
第五，我們在前面的章節中提到過，為什麼我們將模板內容混合到邏輯中？

這個指令可以重寫（即使對於非常複雜的情況！）更簡單如下：

.directive( 'myDirective', function () {
    return {
        scope: true,
        template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            scope.on = false;

            scope.toggle = function () {
                scope.on = !scope.on;
            };
        }
    };
});

同樣，模板內容在模板中，因此您（或您的用戶）可以輕鬆地將其交換為滿足任何必要樣式的模板，並且不必觸及邏輯。可重用性 - 熱潮！

還有所有其他好處，比如測試 - 這很容易！無論模板中有什麼內容，指令的內部API都不會被觸及，因此重構很容易。您可以根據需要更改模板，而無需觸及指令。無論你改變什麼，你的測試仍然通過。

w00t！

因此，如果指令不僅僅是類jQuery函數的集合，它們是什麼？指令實際上是HTML的擴展 。如果HTML不需要它做某事，你可以編寫一個指令來為你做，然後就像使用它一樣使用它。

換句話說，如果AngularJS沒有開箱即用，請考慮團隊如何完成它以適應ngClick ， ngClass等。

摘要

甚至不使用jQuery。甚至不包括它。它會阻止你。當你遇到一個問題，你認為你已經知道如何在jQuery中解決，在你達到$ ，試著考慮如何在AngularJS的範圍內做到這一點。如果你不知道，請問！ 20次中有19次，最好的方法是不需要jQuery並嘗試使用jQuery解決它，為您提供更多的工作。

這些是一些非常好的，但冗長的答案。

總結一下我的經歷：

控制器和提供者（服務，工廠等）用於修改數據模型，而不是HTML。
HTML和指令定義佈局和與模型的綁定。
如果您需要在控制器之間共享數據，請創建服務或工廠 - 它們是在應用程序中共享的單例。
如果需要HTML小部件，請創建指令。
如果您有一些數據，現在正在嘗試更新HTML ...停止！更新模型，並確保您的HTML綁定到模型。

為了描述“範式轉換”，我認為一個簡短的回答就足夠了。

AngularJS改變了你找到元素的方式

在jQuery中，您通常使用選擇器來查找元素，然後將它們連接起來：
$('#id .class').click(doStuff);

在AngularJS中，您可以使用指令直接標記元素，以便將它們連接起來：
<a ng-click="doStuff()">

AngularJS並不需要（或希望）你找到使用選擇元素- AngularJS的之間的主要區別jqLite與全面的jQuery的是jqLite不支持選擇。

所以當人們說“根本不包含jQuery”時，主要是因為他們不希望你使用選擇器; 他們希望你學習使用指令。直接，不選擇！

jQuery是一個DOM操作庫。

AngularJS是一個MV *框架。

事實上，AngularJS是為數不多的JavaScript MV *框架之一（許多JavaScript MVC工具仍屬於類別庫）。

作為一個框架，它託管您的代碼，並擁有決定調用什麼以及何時調用的所有權！

AngularJS本身包含一個jQuery-lite版本。因此，對於一些基本的DOM選擇/操作，您實際上不必包含jQuery庫（它可以節省許多字節以在網絡上運行。）

AngularJS具有用於DOM操作和設計可重用UI組件的“指令”概念，因此您應該在需要執行與DOM操作相關的東西時使用它（指令只是在使用AngularJS時應該編寫jQuery代碼的地方）。

AngularJS涉及一些學習曲線（超過jQuery :-)。

- >對於任何來自jQuery背景的開發人員，我的第一個建議是“在開始使用像AngularJS這樣的豐富框架之前，將JavaScript作為一流語言學習！” 我用艱難的方式了解了上述事實。

祝好運。

如果你用過

jQuery.fn.exists = function(){return ($(this).length > 0);}
if ($(selector).exists()) { }

你會暗示鏈接是可能的，但事實並非如此。

這會更好：

jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }

或者，從FAQ ：

if ( $('#myDiv').length ) { /* Do something */ }

您還可以使用以下內容。如果jQuery對像數組中沒有值，那麼獲取數組中的第一個項將返回undefined。

if ( $('#myDiv')[0] ) { /* Do something */ }