8

作業中のプロジェクトでAngularJSを使用することに興味があります。私はそれについてたくさん読んだり、ビデオを見たり、いくつかのサンプルアプリを作ったりしました。それはすべて理にかなっています、私は概念に賛成です。

私が行っているプロジェクトでは、いくつかのDOM特殊効果（ページ内で物事を動的に移動するなど）を実行し、D3.jsチャートを組み込む必要があります。

私はjQueryをよく使用しました。私はそれを手に入れて好きです。基本を理解するのに十分なAngularJSを使用しました。$("#my-element").slideUp()Angular内からjQueryのようなものを呼び出す方法を完全に理解していません。例えば：

ページのどこかに次のHTMLがあるとしましょう。

<!-- somewhere in app.html -->
<div id="my-element">
  <p>Here's some data about your stuff...!</p>
  <button id="hider">Hide this (but with a cool transition)</button>
</div>

そしてサイトJSで：

// somewhere in app.js ... pretend it's all nice and DRY.
  function main () {
    $("#my-element button")
      .click(function () { $("#my-element").slideUp()});
  }    
  $(main);

Angularでこれに近い何かを達成する方法について私が言える最善のことは次のとおりです。

HTML

<!-- somewhere in app.html -->
<div ng-controller="Data">
  <p>Here's some data about your stuff...!</p>
  <button ng-click="slideUp()">Hide this (but with a cool transition)</button>
</div>

CSS：

// somewhere in app.css
function Data ($scope) {
  $scope.slideUp = function () {
    $("#my-element").slideUp();
  }
}

どういうわけかそれは正しいアプローチではないように感じますが、私は正しいアプローチが何であるかわかりません。

きちんと見えるAngularUIプロジェクトがあるようですが、「ドキュメント」は、読者が新参者ではなく、Angularにかなり精通していることを前提としています。

私は、htmlのデータバインディングを使用した宣言型構文が進むべき道であるというAngularのアイデアを完全に購入したいと思っています。また、スタイルや規則などを全面的に採用したいと思っています。しかし、私は単純なプレゼンテーション以上のものを始める方法を理解することはできません。

誰かが私に以下を使用する（そしてできればの使用を示す）サンプルプロジェクトを教えてもらえますか？

  • AngularJS
  • jQuery

D3についての言及がある場合のボーナス=）jQuery-UIについては特に気にしませんが、そこにあることは私を傷つけません。

ノート

私はこの質問を見ましたが、Angularの初心者にとっては答えはあまり役に立ちませんでした。

4

2 に答える 2

8

DOM 操作は、ディレクティブで行う必要があります。次のチュートリアルを見ます。彼らは私が概念を理解するのを本当に助けてくれました:

AngularJS ディレクティブ チュートリアル パート 1 - http://www.youtube.com/watch?v=Yg-R1gchccg パート 2 - http://www.youtube.com/watch?v=nKJDHnXaKTY

最終的には、コントローラーとディレクティブがどのように通信できるのか疑問に思うでしょう。これについては、$scope API を調べたいと思います: http://docs.angularjs.org/api/ng .$rootScope.Scope

$scope.$broadcast を使用してイベントを送信し、$scope.on を使用してイベントをリッスンできます。

AngularJS と jQuery は非常にうまく連携します。Angular の前に jQuery スクリプトを含めるだけで、準備完了です。

AngularJS の概念を理解するには時間がかかりますが、非常に包括的で生産的なフレームワークです。それを続けてください。

于 2012-12-07T18:15:00.697 に答える
1

AngularJS では、要素を操作する必要がある場合は、$element を要求します。

function Data ($scope, $element) {
    $scope.slideUp = function () {
        $element.slideUp();
    }
}

$element にはすべての jQuery 機能が必要です。そうでない場合は、$($element).slideUp() のような操作が必要になる場合があります。それは少しずさんに見えますが。

これを行う完全に正しい方法はディレクティブを使用することですが、AngularJS を使用してからしばらく経ちましたが、この方法は正常に機能するはずです。

于 2012-12-07T18:06:52.250 に答える