javascript - " AngularJS"怎麼樣? 如果我有jQuery的知識背景.

  显示原文与译文双语对照的内容
0 0

假設我在 jQuery熟悉開發客戶端應用程序,但是現在我希望開始使用 AngularJS 。 你能描述一下必要的模式變化? 這裡有一些問題,可能會幫你得到一個答案:

  • 設計客戶端web應用程序架構如何不一樣? 最大的不同是什麼?
  • 我應該停止做/使用,我可以開始做/使用來代替?
  • 有沒有伺服器端考慮/限制?

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

时间:原作者:19个回答

0 0

1 。 不設計頁面,將其修改為 DOM 操縱

你在JQuery,你先設計頁面,然後讓它變成動態的。 這是因為JQuery設計成擴展和擴展極為簡單。

但是在AngularJS,你的架構必須從最基礎的開始。 而不是從一個角度去想" 我以前那個DOM, 然後我想讓它做X ",你可以從你想實現的目標開始,然後開始幹活,究竟應該設計系統,最後一個是設計視圖。

2 。 AngularJS不是增強版的JQuery

這是真誘人的,當你開始時,所以我總是建議新AngularJS開發者根本不使用JQuery,至少直至習慣採用" Angular Way " 。

我見過許多開發人員來創建這些精美的解決方案,然後在郵件列表JQuery插件150 - 200行代碼,然後然後粘附到AngularJS拿到一組回調和 $applys 的混亂和繁複的成功,卻最終明白了 ! 問題就出在 大多數情況下,它可以重寫成JQuery插件AngularJS用比代碼,其中突然一切都變得更易懂和簡潔的。

基本原則是: 在解決問題時,先"思考",如果想不出一個解決方案,問社區, 如果整個社區的所有內容都沒有簡單的辦法,然後隨時使用JQuery 。 但不要讓JQuery成為阻礙,否則你再也別想成為AngularJS高手 。

3 。 總在體系結構方面思考

首先知道單頁程序應用程序。 他們不是網頁。 這樣我們就需要像一個伺服器端開發者思考, 除了思考像一個客戶端開發者。 我們不得不思考如何將我們的應用程序分解為獨立的,可擴展,可測試的組件。

於是 你是怎麼辦到的? 你怎麼在AngularJS " 思考"? 以下是相比JQuery的一些一般原則

視圖是" official record "

在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經常問的一個問題是這樣的: 如何找到一種特定類型的所有鏈接並將指令添加到它們。 開發人員總是flabbergasted當我們回復: 你最好別關。 但是你不這樣做的原因是,它就變成一半JQuery,一半AngularJS,不行。 其問題在於,開發者正試圖" 做JQuery " AngularJS的上下文中。 那是永遠都不可能正常工作。 是官方記錄的視圖。 外部的指令( 下面是詳細信息),則大到從不更改DOM 。 和指令在視圖中應用,所以目的很明確。

請記住: 不要設計,然後標記。 必須架構,然後設計。

數據綁定

這是到目前為止最棒的功能之一AngularJS熄火了創造出更多的人來做這一類的DOM操縱以上一節所述。 AngularJS會自動更新view,不必吧 ! 在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!' } );
});

我們的view可以如下所示:

<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" />. 然後大受鼓舞,天降神牛。

不同的model層

在JQuery,DOM有點像模型。 但我們期望AngularJS,我們有一個單獨的model層,我們可以以任何方式管理,完全獨立於視圖。 對上面的數據綁定,這有助於維護的分離,並引入了更強的可測試性。 其他答案提到了這一點,所以我就不要再討論這個問題。

關注分離

及其所有上面的綁定事情給拱著背⣺數據 你所關心的問題保持獨立。 view作為正式記錄的情況到底是什麼( 在大多數情況下),模型代表了你的數據,你有一個服務層執行的可重用任務,你Dom操作並增加你的視圖和控制器的指令,並且將其粘附到一起。 這也是其他答案中提到的,我唯一要添加和可測試性有關,它下面的另一節中討論。

依賴注入

幫我們跟關注分離他會依賴注入 ( DI ) 。 如果是從伺服器端語言( 從 JavaPHP ) 中你可能已經熟悉這個概念,但是如果你是一個客戶端的人來自JQuery,這個概念可以從愚蠢到什麼多餘的感覺- 時髦。 可是沒辦法 = = = = =

從廣泛的角度來看,di意味著你可以非常自由地聲明組件然後從其他組件,只不過想討回它的示例,它將被拒絕。 你不必知道載入順序,或者文件位置,或者其他類似的。 可以自由選擇可能無法立即可見,但是我只提供一個( 一般) 例如: 測試。

假設在我們的應用程序中,我們需要一個服務,以實現伺服器端存儲通過 REST APi多少,也應用程序狀態,本地存儲。 我們不想在我們的控制器,當運行測試和伺服器通信我們測試畢竟 控制器。 我們可以加在名稱和我們最初組件相同的mock服務,並自動注入器能夠確保我們的controller獲得一個假冒我們的controller時,不會也沒必要知道子彈是假的

說到測試的- -

4 。 測試驅動開發(TDD)總是

這其實就是以上節3 體系結構的一部分,但是它很重要,我會把它作為自己的頂級節。

在眾多的眾多JQuery插件或者編寫的,你所看到的,使用了多少台機器有了對應測試套件? 不是太多,因為JQuery不是很樂意接受的。 但AngularJS是。

在JQuery,唯一的方式就是經常創建使用針對這我們的測試可以執行Dom操作sample/demo頁單獨的組件。 所以我們需要單獨開發一個組件,然後 將它集成到我們的應用程序了。 多不方便啊 ! 你太多的時間,使用JQuery進行開發時,我們傾向於採用迭代而不是測試驅動開發(TDD)。 誰能怪我們?

而是因為我們關注分離,我們才能夠在AngularJS測試驅動開發(TDD)反覆 ! 例如,假設我們想要一個超級簡單的指令以指示我們的菜單了解企業當前路由。 我們可以聲明我們想要在我們的應用程序的視圖:

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

我們的測試現在通過菜單執行的要求。 我們的發展是 迭代測試驅動。 邪惡的酷。

5 。 從概念以上講,指令是封裝的JQuery

我們經常會聽到" 只在指令操作Dom" 。 這很有必要。

但我們下潛深一點吧。

某些指令只修飾已位於該視圖( 覺得 ngClass),因此有時Dom操作全部都得離開,然後就是基本完成了。 但是如果指令類似於一個" widget ",有一個模板,它還應該 關注分離應有的尊重 即在link和controller模板應保持很大程度以上獨立於其實現的功能。

AngularJS附帶了一個完整的工具集,使疾病這個非常方便, ngClass我們可以動態地更新class : ngModel支持雙向數據綁定, ngShowngHide以編程方式顯示或者隱藏一個元素,更多的人,包括那些我們自己寫。 換句話說,我們可以做各種各樣的有多厲害沒有 Dom操作。 Dom操作較少,較簡單的指令來測試,而是如何樣式,則它們在將來更改起來越容易,越re可用和可分配它們。

我看到很多開發者第一次AngularJS使用指令設定成throw一群JQuery 。 換句話說,他們認為" 因為我做不到Dom操作在控制器中,我把你的代碼放進一個指令" 。 雖然這確實好多了,經常犯錯

我們把記錄器第3 節的編程。 即使我們把它寫到一個指令,我們仍然 要做到" Angular Way " 。 它仍然 不帶任何Dom操作 ! 有許多有時候Dom操作是必要的,而且這是一個 極少數比你想得還 ! 在執行Dom操作 在應用程序中任何地方,問問自己是否真的需要。 可能會有一個更好的方法。

這裡是一個簡單的示例來說明我看得最頻繁的模式。 我們想要一個toggleable按鈕。 ( note: 本示例實現的功能是有點勉強和skosh詳細表示更複雜的情況,問題還沒使用同樣的方法) 。

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

有些問題是這個問題:

  1. 首先,JQuery從來不是必要的。 我們在這做的沒有什麼東西需要JQuery吧 !
  2. 其次,即使我們已經有了我們在這裡頁面,則沒有必要使用它,我們可以簡單地使用JQuery On angular.element我們的組件放入一個項目,沒有JQuery時仍然有效。
  3. 再次,即使假設JQuery 這裡指令生效,jqLite ( hadoop angular.element) 將使用JQuery 總是,如果載入了 ! 這樣我們就沒有必要使用 $我們可以直接使用 angular.element.
  4. 四是密切相關的第三個,就是jqLite元素不必是包裝在 $element傳遞給 link函數將已經 JQuery元素 !
  5. 和第五點我們以上一節中提到的,我們為什麼要合成模板的東西進入我們的邏輯?

此指令可被改寫( 即使是非常複雜的情況下,) 變得更加簡單的如下所示:

.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不做了就需要它們來達到這裡目的,你需要編寫一個指令,然後再用它就好像它是HTML的一部分。

換句話說,如果AngularJS不進行一些mac,想根據你的意見想實現可以被很容易的, ngClick, ngClass,et al 。

摘要

甚至不使用JQuery 。 甚至不包括該數據類型。 抓著你的人們。 當你們來到JQuery已經中而你所知道的問題如何解決,才能尋求相應的 $在保護區內過著,努力地想如何做到AngularJS 。 如果你不知道,你問 ! 十九/ 20,最好的解決的辦法不需要使用JQuery JQuery並試圖解決這一問題將導致更多的工作給你

原作者:
0 0

命令性→聲明性

在JQuery,選擇器用於尋找 DOM 元素然後對其bind/register事件處理函數。 當事件觸發時,( 命令性) 代碼執行到update/change DOM 。

在AngularJS,從這件事情 視圖而不是DOM元素。 視圖( 聲明式) 的html包含AngularJS 指令。 我們告訴我們的指令在後台設置了事件處理程序的動態數據綁定。 選擇器是很少使用,因此無需( 和某些類型的類) 的ID是太重了。 視圖是模型綁定到 ( 使用範圍) 。 視圖是模型的投影。 事件模型( 即數據發生變化,作用域屬性),這些模型的視圖項目更新" 自動"

在AngularJS,千萬不要思考,而不是選擇JQuery DOM模型元素的數據。 想想那些視圖作為預測模型,而不是註冊回調來處理向用戶顯示的內容。

關注分離

jquery採用了低調 Javascript 行為( Javascript ) 分開結構( HTML ) 。

AngularJS使用控制器 ( 其中每一個都可以有自己的控制器和指令,編譯和鏈接的函數) 來刪除行為和/ 或者view/structure ( HTML ) 。 Angular還有服務separate/organize 過濾器,以幫助你的應用程序。

另請參見 http://stackoverflow .com/a/14346528/215945

應用程序設計

一個方法設計一個AngularJS應用程序:

  1. 考慮你的模型。 創建服務或者自有Javascript對象用於這些模型。
  2. 想想你要展示你的模型視圖。 為每個視圖創建HTML模板,使用必要的指令,以獲得動態數據綁定。
  3. 一個控制器連接到每個view ( 視圖和路由,或者使用ng ng控制器) 。 有隻find/get隨模型數據的視圖的控制器需要完成它的工作。 使控制器盡可能精簡。

原型繼承

你可以做大量使用JQuery而不知道如何Javascript原型繼承工作。 在開發AngularJS Javascript的程序,你將會避免一些常見的問題如果你能很好地理解繼承。 推薦閱讀: AngularJS中埋藏的細微/ 原型繼承的scope原型是什麼

原作者:
0 0

AngularJS vs 。 JQuery

AngularJS和JQuery採取截然不同的意識形態。 如果你是來自JQuery你可能會發現一些令人驚訝的差異。 Angular可能會讓你生氣

這是正常的,你要通過部署。 Angular都是有必要的

最大的差別( TLDR )

jquery提供了一個工具箱,選擇任意位DOM並對其進行特殊更改。 一點點地可以執行幾乎任何你想要的操作。

使你能夠以編譯器 AngularJS相反。

言下之意,AngularJS讀取整個DOM從上到下的順序並將其視為代碼理論以上講是對編譯器的指令。 隨著遍歷的DOM,尋找特定 指令( 在AngularJS編譯器指令),它告訴編譯器怎樣表現自己的舉止和該做什麼。 指令是充滿Javascript小對象,並且可以滿足屬性,標籤類,甚至註釋。 這些指令可以反過來又請求添加Angular組件。

他拿出底部的編譯器是格式完全Web應用,好了,你可以連接到具有以下

Javascript模板驅動的,而不是相反。 這是一個激進的不同的規則,可能需要一些時間來適應

如果這聽起來像是對規範和限制,任何事情都可能會遠離真相 因為AngularJS對待你的HTML代碼,你會發現HTML粒度級別在你的web應用程序。 一切皆有可能,而最重要的是都出奇地簡單,只要做一些概念以上的飛躍。

我們來看一下如何nitty堅韌不拔。

首先Angular不能代替JQuery

Angular和JQuery是不一樣, AngularJS提供了一組工具來生成web應用程序。 jquery主要是提供了一些工具,用於修改DOM 。 在頁面以上如果有JQuery ),angularjs會自動加以利用。 如果不是,AngularJS隨JQuery Lite后得到減少,但是還完全可用JQuery的事實,

misko喜歡JQuery並不反對你使用它們。 但是你會發現當你切換,可以得到一個幾乎所有的事情都按作用域,在可能時,應首選這裡工作流模板和指令的組合,因為你的代碼將更加離散,更加容易配置,多個Angular 。

如果確實要使用JQuery管子,你不應該噴它到處都是。 為Dom操作AngularJS中處於正確的位置指令。 以後將詳細介紹這些。

低調和Selectors Javascript vs 。 聲明性Templates

jquery一般應用unobtrusively 。 你提到Javascript代碼是連以上了頭,這是僅有的一個是。 我們使用選擇器在頁面中挑選位並編寫插件來修改這些部分。

Javascript位於控制項。 HTML是個完全獨立的存在。 onclick屬性是非常不好的做法。

你可能會注意到的第一個東西的地方是AngularJS自定義屬性無處不在, 你的HTML將隨處可見豐滿的實質onClick ng的屬性( attribute ) 的屬性 這些指令( 編譯器指令) 以及所使用的主要方法之一是模板的掛鉤到模型中。

當你第一次看到這個你可能會嘗試編寫以下發言AngularJS,老方法侵入Javascript ( 就像我一開始) 。 事實上,AngularJS不遵守上述規則。 在AngularJS,Html5是模板匹配。 它是由AngularJS編譯生成web頁。

這是第一個差異非常大。 是DOM JQuery,你的web頁面進行操作。 在HTML AngularJS,要編譯的代碼。 AngularJS逐字讀取你的整個網頁中,並將其編譯到新網頁使用其內置的編譯器。

模板應該是聲明性的,它的意義應該清楚簡單地讀取它。 我們使用自定義屬性使用有意義的名稱。 我們重新組成新的HTML元素,使用有意義的名稱。 設計人員以最小的HTML知識和任何編碼技能可以讀你AngularJS模板並了解發生的事情。 該用戶隨後可以進行修改。 這是Angular路。

The template is in the driving seat.

我問自己的第一個問題AngularJS開始並貫穿教程時 " 我的代碼在哪" 。 我寫不Javascript,可是我都能接觸到這些行為。 答案是顯而易見的。 因為AngularJS DOM,AngularJS一樣對待你的HTML是編譯的代碼。 對於許多簡單情況下,通常足以只寫一個模板給你,讓AngularJS編譯丟到一個應用程序。

模板驅動的應用程序。 則將其視為 DSL 。 在編寫AngularJS組件以及AngularJS人會負責把它們並使之可在正確的時間基於模板的結構。 這將區別于標準 MVC 輸出的模式,這裡的模板是。

它更類似於 XSLT比 Rails以上Ruby 為例:

這是一個激進的Inversion控制項可以接受一些時間來。

Stop試圖從Javascript驅動你的應用程序。 讓模板驅動的應用程序,並讓AngularJS照顧將組件連接在一起。 這也是Angular方式。

語義HTML vs 。 語義Models

你使用JQueryHtml頁面應包含語義有意義的內容。 如果Javascript處於關閉狀態( 當用戶或者搜索引擎) 你的內容仍然是可以訪問的。

因為你Html頁面AngularJS處理作為模板。 該模板並不應該作為你的內容通常存儲在語義模型,它最終來自於你的API 。 在使用模型以生成語義webDOM AngularJS編譯頁面。

在源不再是語義,而是你APi HTML和DOM編譯是語義。

在HTML AngularJS,這意味著生活中的模型中,只是一個模板,僅用於顯示。

此時你可能會有各種各樣的問題,對 SEO 和可訪問性也有一定道理。 原因是在這裡出現的一些問題。 大多數屏幕閱讀器現在將分析Javascript 。 搜索引擎也可以索引 AJAXed 內容。 然而,你需要確保使用pushstate URL並有一個不錯的站點地圖。 請單擊這裡查閱有關這個問題的討論: http://stackoverflow .com/a/23245379/687677

關注分離( SOC ) vs 。 MVC

Separation顧慮 ( SOC ) 是一種模式,該模式通過多年的成長Web開發由於各種各樣的原因包括SEO,可訪問性和瀏覽器不兼容問題。 它看起來像這樣:

  1. htmL語義意義。 HTML應單獨使用。
  2. css樣式,不使用CSS頁面被讀取。
  3. Javascript行為,但是不包含腳本的內容保留。

同樣,AngularJS不遵守他們的規則 在筆觸,AngularJS "闖了十年的智慧接收,而不是實現一個MVC模式模板不再語義,一點也不在其中。

它看起來像這樣:

  1. 構建你的模型包含在語義數據。 模型通常 JSon 對象。 模式作為對象的元素稱為$scope了。 還可以存儲模板便可訪問所需的便利實用功能$scope以上。
  2. 查看你的視圖將被寫在HTML中。 通常生活在模型中沒有語義,因為你的數據的視圖。
  3. controller控制器是一款Javascript函數,該掛鉤到模型的視圖。 其功能是將initialise $scope 。 根據應用程序的不同,你可能希望或者不需要創建一個控制器。 在頁面以上可以有許多控制器。

mvc和SOC不在相同的端點以上的相對尺度,它們是完全不同的軸。 soc在AngularJS上下文中都沒有意義。 你得忘了一切,繼續生活

就好像,你經歷了瀏覽器大戰,你會對這個主意非常冒犯性。 和好吧,這將值得去做的,我保證

插件vs 。 指令

Plugins擴展JQuery 。 AngularJS Directives擴展瀏覽器的功能。

在JQuery我們來定義插件增加功能到JQuery .prototype 。 然後,我們將這些數字掛鉤DOM通過選擇圖元,並在結果以上調用該插件。 它的目的是擴展JQuery的功能。

例如,如果你希望旋轉木馬放到頁面以上,你可以定義一個數字,比如包裝在nav的無序列表元素。 之後你可能編寫一些JQuery選擇頁面以上的列表和右列它作為庫通過使用配額來做滑動動畫。

在AngularJS中,我們定義的指令。 指令是一個函數,它能返回一個JSON對象。 這個對象告訴AngularJS DOM元素來查找哪些內容,並對其進行哪些更改。 指令就會著迷到模板使用屬性或者元素中的所發明的, 它的目的是擴展的功能和新的HTML屬性和元素。

AngularJS方法是擴展的功能機HTML看。 應編寫類似於HTML的HTML,擴展使用自定義屬性和元素。

如果你想要一個旋轉木馬,只是換了 <carousel />元素,然後定義一個指令來引入一個模板,並使這東西的工作。

有許多小指令vs 。 大的插件,配置開關

要寫入的趨向使用JQuery大大的插件如同收藏夾,然後我們通過傳入多個值和配置選項。

錯了- 在AngularJS 。

把下拉列表的例子。 你也許希望在編寫一個dropdown插件單擊處理程序,配套的功能添加在尖括弧中的代碼可以是上下展開或者更改的類元素,顯示隱藏菜單中所有有用的東西。

除非你想進行一些小改動。

說你有要展開菜單懸停時。 好,現在我們有麻煩了 我們可以在插件具有有線的click處理程序,對我們來說,我們需要添加一個配置選項,使其在這裡特定情況下表現不同。

以及小AngularJS我們所寫的指令。 我們拉指令將會越來越小。 它可能保持摺疊狀態,並提供方法來fold( ),unfold( ) 或者toggle( ) 。 這些方法只需更新$scope 。menu .visible這是一個boolean對象中保存了狀態。

現在我們最多可以連接這個 在我們的模板:

<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

需要更新在mouseover?

<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

模板驅動的應用程序,這樣我們得到HTML級別的粒度。 如果我們想讓個案例外,模板使你輕鬆運行。

Closure vs. $scope

JQuery插件都被創建為終結。 隱私的閉包中保持。 那麼就需要由你來維護你的閉包中的作用域鏈。 你只有真正JQuery,以及任何可以訪問DOM節點傳遞給插件的集合的閉包中定義的本地變數以及任何已定義的全局變數。 這意味著,插件是完全自包含的。 這是個好東西,但是也可能會限制在創建一個完整的應用程序。 想在動態頁面的各區域之間數據傳遞變成煩瑣。

AngularJS有$scope對象。 這些是由AngularJS特殊對象的創建和維護,可用於存儲你的模型。 某些指令會產生一個新$scope,預設情況下,從其換行使用Javascript $scope繼承原型繼承。 $scope對象中可訪問的控制器和視圖。

這就是聰明的地方。 因為$scope繼承的結構大致如下所示的結構DOM,元素,最高可無縫訪問包含它們的作用域,以及任何作用域為全局$scope ( 這不同於在全局作用域) 。

這樣可以極大地簡化數據傳遞四周,然後將數據存儲在適當的級別。 如果一個dropdown下拉$scope展開,只需要知道這件事。 如果用戶更新自己的喜好,可能需要更新全局聽取用戶首選項$scope,以及所有嵌套作用域就會自動收到通知。

這可能聽起來很複雜,其實只要放鬆對著電腦就像開飛機。 你不需要創建該對象,並將其配置為你實例化類AngularJS $scope正確且恰當地根據模板分層結構。 然後AngularJS組件使用的魔法使其可供依賴注入( 稍後進一步討論) 。

手動DOM更改vs 。 數據綁定

在你用手工進行所有DOM更改JQuery 。 你通過編程的方式構造新DOM元素。 如果你有一個JSON數組,並且想把它生成HTML和DOM,必須編寫一個函數來將其插入。

在AngularJS也可以執行這裡操作,但是我們建議你利用數據綁定。 更改你的模型,並且因為在DOM DOM綁定到它通過模板會自動更新,無需干預。

因為數據綁定的實現是通過模板,使用屬性或者大括弧語法,則它超級容易做。 幾乎沒有認知的成本與其關聯的所以你會發現自己一直在做這件事。

<input ng-model="user.name" />

將input元素綁定到 $scope.user.name. 更新輸入將更新當前作用域中的值,反之亦然。

與這裡類似:

<p>
  {{user.name}}
</p>

將輸出在段落中的用戶名。 這是個動態綁定,所以如果 $scope.user.name數據更新時,將更新過的模板。

ajax的所有時間。

在JQuery令Ajax調用起來非常簡單,但是它仍有可能換用。 有的複雜性考慮,和一定的腳本塊來維護。

在AngularJS,ajax是默認轉到解決方案,常有的事,幾乎沒有你留意的。 可以用ng括模包括。 可以將一個樣板應用提供最簡單的自定義指令。 你可以包裝一個Ajax中調用服務並自己創建一個 GitHub 服務或者 Flickr 服務,你可以用驚人的方便訪問。

服務Objects vs Helper Functions

在JQuery中,如果我們想實現的一個小的非dom相關的任務,例如提取一個提要從一個API,則可能需要編寫一個簡單的函數完成它在我們的終結。 一個有效的解決方案,但是如果我們需要經常訪問的源? 如果我們要在其他應用程序中重用的代碼?

AngularJS給我們服務對象。

服務是簡單的對象,這些對象包含數據和函數。 他們總是Singleton,這意味著永遠不能有一個以上的人。 假定需要訪問Stack Overflow API,則可能需要編寫一個 StackOverflowService它定義了方法來實現這裡目的。

假設我們有一個購物車。 我們可能會定義一個所維繫ShoppingCartService購物車,包括添加和移除項的方法。 因為服務是一個單例,並且是所有其他組件所共享,任何對象都需要能寫到了購物車,從中取數據。 永遠都是這樣的馬車。

自足AngularJS組件給我們提供我們認為合適的方式使用和重用作為服務對象的。 它們被簡單的包含函數和Data JSON對象。 他們總是Singleton在服務以上,因此如果你將數據存儲在一個地方,可以把這些數據從別的地方只要請求相同的服務。

Dependency注入 ( DI ) vs 。 instatiation又稱de spaghettification

AngularJS替你管理依賴項。 如果你希望一個對象,只需使用ado訪問數據源,AngularJS會拿給你

在開始之前,要使用這裡選項,則很難解釋這個時間正是一個巨大的利好的事情。 一點也不像AngularJS Di JQuery內存在。

di表示,而不是編寫應用程序並將其連接在一起,你只需定義的庫組件,每個部分都由字元串指定。

假設我有一個名為'組件FlickrService'用以定義拉從Flickr JSON訂閱源的方法。 現在,如果我想寫一個控制器,它可以訪問Flickr,我只需參考'FlickrService'時按名稱聲明的控制器。 AngularJS會負責實例化組件並使其可供我控制器。

舉個例子,這裡我定義了一個服務:

myApp.service('FlickrService', function() {
  return {
    getFeed: function() { // do something here }
  }
});

我要是想使用這項服務,我只按名稱來引用它,如下所示:

myApp.controller('myController', ['FlickrService', function(FlickrService) {
  FlickrService.getFeed()
}]);

AngularJS會將它識別需要FlickrService對象來實例化該控制器,能夠為我們提供一個。

這使得事情連接在一起很輕鬆,幾乎可以消除這些趨勢spagettification 。 我們的簡單列表組件,和AngularJS小手給我們做一個一個將我們需要他們時,

模塊化的服務架構

jquery說根本不了解應該如何組織你的代碼。 AngularJS有意見。

AngularJS使你可以在其中放置代碼的模塊。 如果你在寫一個腳本,例如,你可能要創建一個新的對話,Flickr Flickr模塊所有Flickr相關函數用h 。 模塊可以包含其他模塊( DI ) 。 你的主應用程序通常是一個模塊,它應包含所有應用程序將依賴於其他模塊。

你就簡單的基於Flickr代碼重用,如果需要編寫另一個應用程序,你可以只需包含Flickr模塊和好,就可以訪問所有你Flickr相關的功能在新的應用程序中。

模塊包含AngularJS組件。 當我們以一個簡單的清單包含一個模塊,該模塊中的所有組件即可供我們由其唯一標識字元串。 我們可以把這些組件注射到對方使用AngularJS的依賴注入機制。

總結

AngularJS和JQuery不是敵人。 我們可以只使用JQuery AngularJS中很好地結合起來。 如果你使用的是AngularJS ( 模板,數據綁定,$scope指令等),你會發現你需要一個比你少多 JQuery否則可能要求。

最主要的要知道這是你的模板驅動的應用程序。 打算要寫插件來完成每一件事。 而不是寫小的指令完成一件事,然後編寫一個簡單的模板,將它們連接起來。

低調的報道中認為Javascript恰恰相反,考慮的是HTML擴展。

我的書

就是那種AngularJS感到激動,我編寫了一個簡短的書壓扁了我們非常歡迎你的閱讀在線 http://nicholasjohnson .com/angular book/ 。 我希望是有幫助的。

原作者:
0 0

你能描述一下必要的模式變化?

Imperative vs Declarative

JQuery 你指示DOM需要滿足什麼條件的逐步活性化 與 AngularJS 你介紹什麼是想要的渲染效果而不是如何做。 這裡 是詳細信息。? 時,可查詢Mark Rajcok的回答。

如何構建和設計客戶端web應用不一樣呢?

AngularJS是整個客戶端框架使用的MVC 圖案( 檢出 圖形表示形式) 。 它極大地關注關注分離。

最大的不同是什麼? 我應該停止doing/using,我可以手動啟動doing/using來代替?

JQuery 是庫

AngularJS 是美麗的,高度可測試的客戶端框架,結合了一大堆很酷的工具如MVC,依賴注入數據綁定等等。

它專註于的關注點分離對單元測試和測試( ,以及端到端測試),測試驅動的開發提供了便利。

最好的方法start察看其特效教程 時可能會經歷幾個小時中的步驟,但是在幕後,以防要把握概念,請參見對象存儲和大量的進一步的閱讀參考。

有沒有伺服器端considerations/restrictions?

你可以用它在現有的應用程序中如果已經使用了純JQuery 。 但是,如果想要完全利用AngularJS功能你可以考慮編寫伺服器端使用 RESTful 方法。

這樣做將使你充分利用其資源

原作者:
0 0

來描述" 範式轉換",我覺得一個簡短的答案就足夠了。

AngularJS更改的方式找到元素

JQuery,通常使用選擇器查找元素,然後將它們關聯到一起:
$('#id .class').click(doStuff);

AngularJS 的話你直接用 指令來標記元素,手動關聯它們:
<a ng-click="doStuff()">

所以當人們說" 根本不包括JQuery ",主要是因為他們不想讓你使用選擇器,因為他們想讓你了解如何使用指令來代替。 直接,而不選擇 !

原作者:
0 0

jquery是一個Dom操作庫。

AngularJS是MV*框架。

事實上,angularjs是為數不多的幾個Javascript MV* Javascript MVC的框架( 很多工具仍然屬於類別庫) 。

作為一個框架,它托管代碼和抉擇時需要調用和內容具有所有權的 !

其中包括JQuery lite版AngularJS本身。 因此,對於一些基本的DOM selection/manipulation JQuery,你真的不需要包含的庫( 它的位元組數保存到運行在網路以上)

AngularJS有UiDom操作的" 指令" 的概念和設計重用組件,所以你應該使用什麼時候都覺得有必要做Dom操作相關的東西( 指令僅地方應寫入代碼在使用JQuery AngularJS ) 。

AngularJS涉及一些學習曲線( 多於JQuery :) 。

>for任何開發人員來自JQuery背景,我的第一個建議是" 作為一個一流語言后跳到了一個功能豐富的框架比如AngularJS Javascript那裡了解" 上面的事實來硬的我明白了

好運。

原作者:
0 0

這些都是一些很成功,但是冗長的答案。

總結我的經驗:

  1. 控制器等) 和提供者( 服務,廠商是用於修改數據模型,而不是HTML 。
  2. htmL和指令定義的布局和綁定到模型中。
  3. 美國安邁科技股份有限公司創建服務之間如果需要共享數據,或者
原作者:
0 0

他們是蘋果和橘子。 你不想做比較。 它們完全不是一回事。 AngularJS已經JQuery精簡版JQuery構建,你可以執行基本Dom操作甚至沒有包括在其中完全暴露了。

jquery的所有關於Dom操作。 它解決了所有跨瀏覽器痛苦的話,你將不得不面對,但是它不是一個框架,該框架允許你將你的應用分成多個組件,如AngularJS 。

AngularJS妙處在於它允許你在Dom操作separate/isolate指令。 可以投入使用有內置指令如ng單擊。 你可以創建自己的自定義指令,它將包含所有的視圖邏輯或者Dom操作所以你不需要重複而怯于Dom操作控制器或者服務中的代碼應該能搞定業務邏輯。

Angular分解你的應用到視圖及控制器服務。

還有一件事,就是這個指令。 它是一個屬性可以附加到任何DOM元素,且其中可以使用JQuery發瘋你永遠JQuery AngularJS組件或者有衝突,而不必擔心會打亂及其體系結構。

我收到了我參加個meetup,的創建者之一Angular說他們很努力才分離出"Dom操作別想包括這些文件簽入。

原作者:
...