#Ionic+Angularjsクイックアプリ作成

Ionic+Angularjsクイックアプリ作成
AngularJSモバイル開発におけるピット要約
DOM操作の問題は、要素ノードを追加したり、要素ノードを削除したり、要素の内容を取得したり、要素を非表示にしたり、表示したりするなど、jQueryを使用してDOMを操作することを避ける.これらの動作を実現するにはdirectivesを使用する必要があります.必要であれば、自分のdirectivesを書く必要があります.ウェブサイトのWebフロントエンド開発で、習慣を変えるのが難しいと感じたら、あなたのページからjQueryを削除することを考えましょう.本当に、AngularJSのhttpサービスは非常に強力で、基本的にjQueryのajax関数に代わることができ、AngularJSにはjQLiteが埋め込まれています.その内部で実現されたjQueryサブセットには、よく使われるjQueryDOM操作方法、イベントバインドなどが含まれています.しかし、これはAngularJSを使えばjQueryが使えないというわけではありません.もしあなたのホームページがjQueryにロードされている場合、AngularJSはあなたのjQueryを優先的に採用します.そうしないと、fallbackはjQLiteに行きます.モバイルAppやモバイルWebの開発の場合はJqueryを導入しないことをお勧めします.jqueryのいくつかの機能が本当に必要な場合はZeptoを導入します.jsでしょう.でも私を信じて、AngularJSを使って、あなたはJqueryを必要としません!directivesを自分で作成する必要がある場合は、通常、サードパーティのjQueryプラグインを使用しています.プラグインはAngularJS以外でフォーム値を変更するため、Modelに即座に反応することはできません.たとえば、jQueryUIdatepickerプラグインを多く使用している場合、日付を選択すると、プラグインは日付文字列をinput入力ボックスに入力します.Viewは変わったが、Modelは更新されなかった.('.datepicker').datepicker(); このコードはAngularJSの管理範囲ではありません.DOMの変更をModelに即時に更新するためにdirectiveを作成する必要があります.

var directives = angular.module('directives', []);

directives.directive('datepicker', function() {
   return function(scope, element, attrs) {
     element.datepicker({
       inline: true,
       dateFormat: 'dd.mm.yy',
       onSelect: function(dateText) {
         var modelPath = $(this).attr('ng-model');
         putObject(modelPath, scope, dateText);
         scope.$apply();
       }
     });
   }
});

そしてHTMLにこのdirective Directiveを導入することは、HTMLにカスタムのラベル属性を書き、プラグインの役割を果たし、HTMLの機能を効果的に補完することです.この宣言式の文法はHTMLを拡張した.プロジェクトで通用する機能とページコンポーネントは、Directiveにカプセル化され、使用とコードメンテナンスが便利であることをお勧めします.
説明する必要があるのは、BootstrapフレームワークのプラグインやjQueryベースの他の人気UIコンポーネントなど、多くのdirectiveを提供してくれたAngularUIプロジェクトです.AngularJSのコミュニティは現在活発で,生態系が健全である.ngOptionのvalueこれは大きな穴です.ngOptionで生成されたオプション値を表示すると(各valueセクション)では、それは絶対に無駄です.ここの値は常にAngularJSの内部要素のインデックスであり、あなたが指定したフォームオプションの値ではありません.やはり、AngularJSはフォームでデータのインタラクションを行うのではなく、Modelを使用します.$httpを使用してModelをコミットし、phpではfile_get_contents('php://input')を使用して、フロントエンドから送信されたデータを取得します.Input type='number'の問題AngularJSのバージョンによっては、入力ボックスをInput type='number'に設定すると、モバイルデバイス上でng-changeメソッドが無効になります.{{}}の問題はページの初期化時にユーザが{{}}を見て点滅してから本格的なコンテンツが現れる可能性がある.解決策:ng-cloak directiveを使用してng-bind代替{}}を使用してインタフェースをビジネスロジックから分離することを隠す
ControllerはDOMを直接参照するのではなく、viewの動作を制御する必要があります.例えば「ユーザがXを操作した場合、何が起こるべきか」、「私はどこからXを得ることができますか?」サービスはほとんどの場合、DOMを直接参照するべきではありません.インタフェースとは独立し、viewの論理とは関係ありません.その役割は「X操作」にすぎません.
DOM操作はdirectivesに入れるべきです.
既存の機能をできるだけ多重化
あなたが書いた機能はAngularJSが実現した可能性が高いです.いくつかのコードは抽象的に多重化され、よりAngularの方法を使用することができます.つまり,多くのjQueryの煩雑なコードが代替される.

ng-repeat ng-repeatが役に立ちます.Ajaxがサーバからデータを取得すると、上記の例のようにjQueryを使用して、いくつかのHTMLコンテナノードにより多くの要素を追加することがよくあります.これはAngularJSではよくありません.ng-repeatがあれば、すべてが簡単になります.あなたの$scopeで配列を定義します.(model)は、サーバから引き出されたデータを保存し、ng-repeatを使用してDOMにバインドすればよい.以下の例では、friendsというmodel

を初期化定義する

<div ng-init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
    I have {{friends.length}} friends. They are:
    <ul>
        <li ng-repeat="friend in friends">
            [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
        li>
    ul>
div>

ng-show

ng-showも役に立ちます.jQueryを使用して、条件に基づいてインタフェース要素の表示非表示を制御するのはよくあります.しかし、Angularにはもっと良い方法があります.ng-show(およびng-hide)は、ブール式に基づいて非表示と表示を決定することができる.
配列や文字列にはstrXXXXXを用いることができる.lengthは表示を制御します.そうしないと、モバイルデバイスで正常ではありません.
同様の内蔵directivesにはng-disabled,ng-switchなどがあり,条件制御に用いられ,文法が簡潔で,いずれも強力である.

ng-class

ng-classは、要素に条件付きでclassを追加するために使用され、以前はjQueryで実装されていました.Angularのng-classはもちろんもっと使いやすいです.例:

"{ errorClass: isError, warningClass: isWarning, okClass: !isError && !isWarning }">...

ここでng-classはobjectオブジェクトを受け入れ、keyはCSS class名、値は$scope変数制御の条件式であり、他の類似の内蔵directivesにはng-class-evenとng-class-oddがあり、実用的である.
ng-showとng-ifの使用シーンの問題
ng-showとng-ifを使用してページ要素の表示を制御する機能を実現しますが、両者は異なり、ng-ifはDOMを動的に作成します.ng-showは既存のDOMの表示を切り替えるだけで、style="display:none"を設定することに相当します.beforeやafterなどのcss擬似クラスを使用して表示効果を制御すると、問題が発生する可能性があります.状況に応じてng-showとng-ifを合理的に使用する必要があります.
watchとapply
AngularJSの双方向データバインドは最も興奮する特性ですが、全能的な魔法ではありません.場合によっては小さな修正が必要です.
ng-model,ng-repeatなどを使用して要素の値をバインドすると、AngularJSはその値にwatchを作成します.この値がAngularJSの範囲内で変更されると、すべての場所が同期して更新されます.カスタムdirectiveを書くときは、この自動同期を実現するために自分のwatchを定義する必要があります.
コードでmodelの値を変更したり、viewが更新されなかったりすることがあります.これはカスタムイベントバインドでよくあります.手動でscopeを呼び出す必要がありますapply()は、インタフェースの更新をトリガーします.上記datepickerの例では、この点を説明しています.サードパーティ製プラグインにはcallbackがあるかもしれませんが、コールバック関数を匿名関数としてapply()にパラメータとして書き込むこともできます.
ng-repeatと他のdirectivesを結合
ng-repeatは役に立ちますが、DOMとバインドされており、同じ要素で他のdirectives(ng-show、ng-controllerなど)を使用するのは難しいです.
ループ全体にdirectiveを使用したい場合は、repeatの外に親要素を包んでdirectiveを書くことができます.ループ内部の各要素にdirectiveを使用する場合は、ng-repeatのサブノードに配置します.
Scopeの質問
Scopeはtemplatesテンプレートではread-onlyであるべきで、controllerではwrite-onlyであるべきである.Scopeの目的はモデルになるのではなく、モデルを参照することです.モデルは私たちが定義したJavaScriptオブジェクトです.
$rootScopeは使えますが、乱用される可能性が高いです.
ScopesはAngularJSにおいて一定の階層関係を形成し,木構造には必ずルートノードがある.ほとんどのviewにはcontrollerと対応する自分のscopeがあるので、通常は使えません.
しかし、たまにapp全体にグローバルに適用したいデータがあります.この場合、rootScopeにデータを注入することができます.他のscopeはrootscopeを継承するため、注入されたデータはng−showのようなdirectiveで使用でき、ローカルscopeの変数のように使用できます.
もちろん、グローバル変数は邪悪で、rootScopeを慎重に使用する必要があります.特にコードではなく、データの注入にのみ使用されます.rootScopeで関数を書くことを望んでいる場合は、サービスに書いたほうがいいです.そうすると、使うときだけ注入され、テストも便利になります.
逆に、関数の機能がデータを格納して返すだけであれば、サービスとして作成しないでください.
サブ役割ドメインのプロトタイプ継承問題
初心者には、これも大きな穴でしょう.役割ドメイン変数の継承はjavascriptプロトタイプ継承メカニズムに基づいており,ng-template,ion-modalなどの役割ドメインに関する命令を使用する際には特に注意が必要であり,関連する検索順序はここでは詳しくは述べない.