jQuery，jQueryUI（和插件）和AngularJS - 它們如何融合在一起？

我有這個網站（希伯來語）：http://www.iping.co.il（如果你可以看看它可能與谷歌翻譯，看看它是什麼，它可能是偉大的，但不是必須的）。jQuery，jQueryUI（和插件）和AngularJS - 它們如何融合在一起？

它基本上是一個網站，顯示您的IP，併爲您提供一組工具（如ping，whois檢查，開放端口檢查...）。我已經建立了一段時間，我正在使用jQuery和jQuery UI來完成所有工作（如打開對話框，調用服務器，更改DOM，顯示進度條......）。

現在我正在重建它 - 我正在使用ASP.NET MVC 5，HTML5和Bootstrap3進行重建。我認爲這是一個很棒的小網站，用於測試我最近閱讀的新內容。我想嘗試和實施的其中一件事情（在閱讀完畢後）是AngularJS。

據我所知，AngularJS不是直接改變DOM，而是使用指令和2種方式綁定來做到這一點。

我有很多代碼，我使用的插件使用jQuery和jQuery UI（例如對話框，進度條等等......我還沒有想出如何處理AngularJS）。看來，如果我使用jQueryUI進度條並從AngularJS更新它，我在這裏打破了一些規則，並且它可能很髒，而不是它應該被寫入的方式。

所以我的問題是，什麼是正確的方式來工作時，並使用AngularJS構建豐富的用戶界面？是jQuery和jQueryUI甚至仍然相關？如果是這樣，是否有正確的方式來使用它們（也許DI以某種方式？）？

我搜索並找到了一個名爲AngularJS UI的東西 - 但它不像jQueryUI那麼豐富。

謝謝

來源

2014-01-19 developer82

沒有無恥在這裏跌落我自己的鏈接，我就寫了一個很受歡迎後在一天內學習Angular，我會仔細看看它，並考慮該框架是否適合您：http://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day 。說到jQuery，你可能會使用一兩個插件，你可以將它們轉換爲指令，並在Angular中無縫地使用。至於你的「Angular不打算直接改變DOM」 - 這是非常不正確的，因爲這是爲HTML編譯構建的框架。 –

@ToddMotto - 嘿，我附加了我的鏈接，因爲我認爲它是相關的，看看網站的功能應該是什麼樣子（因爲我猜StackOverflow的好人不是我的目標受衆，因爲它是在希伯來語）。我將如何將jQuery插件轉換爲指令？就改變DOM而言 - 因爲我的理解，爲了分離問題，Angular並不意味着直接操作DOM作爲其MV *原理的一部分。這不正確嗎？ – developer82

你不是要操縱控制器內部的DOM，而是要使用指令。至於控制器是如何工作的，你需要爲'$ scope'提供填充DOM的數據。如果您刪除/更改此數據，angular會自動更新DOM。應該沒有'$（'。myElement'）'樣式選擇器/函數 - 只在需要的時候纔在指令內部。 –

在指令中使用插件在概念上相當簡單。

<div my-directive></div>

下面是一個非常minimialistic指令有足夠的代碼來初始化插件。返回的功能相當於link在一個更明確的指示

angular.module('myApp').directive('myDirective',function(/* dependencies*/){ 
     /* element is a jQuery object when jQuery is included in page before angular.js*/ 
    return function(scope,element,attrs){ 
     /* can use attributes or scope to pass options to plugin if needed*/ 
      element.someJqueryPlugin(); 
    } 
});

這相當於給jQuery中只寫：

$(function(){ 
    $('[my-directive]').someJqueryPlugin(); 
});

來源

2014-01-19 18:07:37 charlietfl

如果你想使用AngularJS和Bootstrap我建議你看一看這些指令：

http://angular-ui.github.io/bootstrap/

一旦你加載的模塊，你可以設置說進度bar這樣：

<progressbar max="max" value="dynamic"> 
      <span style="color:black; white-space:nowrap;">{{dynamic}}/{{max}}</span> 
    </progressbar>

如果你只需要Bootstrap組件，你甚至不需要包含JQuery。

來源

2014-01-19 17:58:48 Kukiwon

嗨，感謝您的回答。我從互聯網上下載的其他jQuery插件呢？以及對尚不支持進度條標籤的舊版瀏覽器的支持情況如何？謝謝。 – developer82

此處記錄了對舊版瀏覽器的支持：http://docs.angularjs.org/guide/ie。基本上，IE8下的瀏覽器未經測試。對於沒有角度指令的插件，您可以爲它們編寫一個插件，或者選擇將jquery包含在您的項目中。以下是我在Angular常見問題解答中找到的內容： ** Angular是否使用jQuery庫？** _Yes，如果應用程序正在引導時Angular存在於您的應用程序中，則可以使用jQuery。如果腳本路徑中不存在jQuery，則Angular會回退到我們稱爲jQLite._的jQuery子集的自身實現 – Kukiwon

jQuery，jQueryUI（和插件）和AngularJS - 它們如何融合在一起？

回答

相關問題