Clever Geek Handbook

jQuery / JS開発者向けのAngular Light





「クリックしてブロックを非表示にする方法」や「条件で色付けする方法」などのトースターに関する質問が定期的に表示されるので、jQueryコードと開発速度を改善できる4つの「トリック」を紹介します。



最初の例



以下の説明の例： jQueryの例とAngular Lightの例

この例は、2つの「モーメント」で構成されています。1.クリックして「パネル」を選択し、2。選択した「パネル」を表示します。



1. jQueryの例では、 class="button"



ボタンをマークするように強制されているため、コードからそれらを見つけることができます（ただし、クラスは元々作成されていません）。 Angular Lightの例では、これは必要ありません-DOMに変数をもたらします。このボタンをクリックすると、変数が割り当てられることを直接示すことができます： al-click="active='win'"



つまり、 ここでは、クリックするだけでコードが実行されます： active='win'



。



2.選択したパネルをjQueryで表示するには、ブロック（id =“ info_win”）をマークしてコードでブロックを見つけ、コードで表示する必要がある内容に応じて操作を行う必要があります。 上記のように、ALを使用してブロックをマークする必要はありません。ブロックを表示する条件を指定するだけです： al-show="active=='win'"



、つまり 変数active=='win'



場合、現在のブロックが表示されます。



もちろん、このコードブロックをid = "dialog"で "アクティブ化"する必要があります。 

 alight.bootstrap('#dialog', { active: 'win' //       active });
この例では、2つの「コマンド」のみが必要でした： al-clickとal-show （上記のリンクから例を見ることができます）。



ボタンの色を追加



例： jQueryの例とAngular Lightの例

ここで、たとえば、アクティブなボタンを強調表示する必要があります。「アクティブな」クラスを追加しました。おそらくjQueryの例に最適なのは、すべてのボタンのクラスを削除し、目的のボタンに設定することです。 

  dialog.find('.button').removeClass('active'); dialog.find('.button[value=' + code + ']').addClass('active');


OK、ALでやろう。 なぜなら アクティブな変数が使用可能になったら、それを使用します。

ボタンal-class = " active ： active == 'win' "をオンにします。 このコードは、 active == 'win'の条件が満たされると、 アクティブクラスを現在の要素に追加します。つまり、この「効果」のためにコードjsを追加する必要はありません。



例の複雑化



例： jQueryの例とAngular Lightの例

多くのタスクでは、ユーザーデータの入力と出力が必要です。ブロックの表示/非表示を切り替えるテキスト入力、その出力、チェックボックスコントロールの例を作成します。



jQueryのオプション-HTMLのすべての要素（＃name、＃visible、＃box、＃boxtext）をマークアップしてから、イベントにサブスクライブし、変換、テキストの表示、ブロックの非表示の機能を作成します。



ALの場合、2つの変数nameとvisibleが必要です。 input type="text"



からテキストを取得するには、コマンドal-value="name"



を使用し（入力されたすべてのテキストを変数nameに割り当てます）、このテキストを表示するには、 {{name}}



コンストラクトを適切な場所にプッシュします、しかし出力の前にテキストを変換する必要があるので、js- {{ name.toUpperCase() }}



使用します



input type="checkbox"



要素は "command" al-checked="visible"



を使用し、要素の状態に応じてvisible = trueまたはfalseを割り当てます 。 さて、ブロックal-show="visible"



を非表示にする方法は既に知っています。



（jQueryの例では、初期値がjsから設定されると想定されているため、jsの要素が初期化されます）



最も難しい



すべてのAngular.js開発者が恐れているディレクティブについて学ぶ時間です 。 なんで？ たとえば、要素に対して何らかのトリッキーな作業を行うか、jQueryプラグインを「挿入」する必要があります。

最初は、ディレクティブは非常に単純になります。たとえば、テキストを赤で色付けするディレクティブを作成します。

これを行うには、たとえばタグal-redで要素を「マーク」しtext



： text





それでは、ディレクティブ自体を作成しましょう。 関数を同じ場所タグに配置する必要があります。 

 alight.directives.al.red = function(scope, element) { $(element).css('color', 'red') };
この関数は、入力としてマークした要素を受け入れます。 完了、 例はこちらです。 そうすれば、jQueryのALとALのjQueryを使用できます。



2番目の例であるボタンのグループでわかるように、ボタンには同じHTMLコードがあります。 コードとテキストのみが異なります。 そのため、HTMLコードを複製しないようにループで表示できますが、これは既に次の記事で説明しています。



そして最後に、 ToasterからjQueryへの実際の例であり、ALに変換されます （ただし、さらに簡単にすることもできます）。



主なアイデアは、MVC / MVVM（Angular Light）を試したい場合、jQueryを放棄する必要がないということです。 Angular Lightを使用していくつかの要素を実行し、両方を活用できます。 Angular Lightを使用してもプロジェクトは重くなりません。最新バージョンの重量は約17kb （圧縮、gzip圧縮、最小化）です。 Angular Lightは、最速のMVVMライブラリの1つでもあります。



PS：Angular Lightを試してみると、バージョンに注意してください。インターネット上では、古いAngular Lighのほとんどの例がありますが、少し違いがあります。


More articles:


All Articles