Angularの中心的なアイデアは、すべてをデータを介して駆動することであり、他のすべてはデータの拡張です。
すべてがオブジェクトであるという考えを適用するために、Angularですべてがデータであると言うことができます。
プロジェクトの構築について
（1）jsとヨーマンを要求する
Angularに最初に入ったり使用したりすると、常に同様の質問に困惑します。私の実際的な答えは、あなたが必要なものやヨーマンを必要としないということです。 Angular自体にモジュールの実装があるため、前者は使用されません。後者は、角張った組織構造とプロジェクトの構築が非常に複雑になる必要があるためです。 Githubにシードプロジェクトを書くか引っ張ってください。
（2）プロジェクト構造を整理する方法
この問題は、人によって完全に異なるため、少し役に立たない。私は個人的に2つの組織構造をお勧めします。1つはコード関数に従って、つまりコントローラーは1つのフォルダーに配置され、サービスは1つのフォルダーに配置されます。もう1つは、実装された関数に従います。たとえば、ユーザーは、対応するテンプレート、サービス、およびコントローラーをユーザーフォルダーに配置します。
どちらも大丈夫です。メンテナンスの観点から見ると、2番目の観点からは良くなります。
（3）コントローラーとサービスの部門
ここでは、コントローラーは通常、ページ上の1つのコントローラーです。ページに共通の部分がある場合、パブリックパートは常にコントローラーを使用します。サービスは2つの部分に分割する必要があります。1つはサーバーデータと対話するサービスであり、もう1つは、通知などと同様に、自分で書かれたいくつかの再利用可能なサービスを配置する機能的な共通コンテンツです。
サービスを機能とモジュールに従ってさらに分割する必要があるかどうかについては、プロジェクトに依存します。
（4）Angularプラグインとライブラリの使用
プロジェクトが既製のものをオンラインにすることは間違いなく現実的ではありませんが、すべてを自分で書くことはさらに非現実的です。 Angularの多くのプラグインは、AngularチームまたはJQueryプラグインでカプセル化された一部の人々によって開発されています。プラグインに関する私の見解は非常に簡単です。それらを使用する場合は、できるだけ早く使用できます。ニーズを満たすことができない場合は、自分で書くか、既存のプラグインで改善することができます。
数時間のデバッグで処理できないプラグインについては、私のアドバイスを聞いて、それらをあきらめてください。ほとんどのプラグインはUIプラグインであるため、複雑さを追求する必要はありません。シンプルなHTMLコントロールには、独自のシンプルな美しさもあります。
Angularプラグインの競合、特にUIプラグインに遭遇した場合、Angular-UIやAngular-Strapなど、ほとんどの場合、それらのいずれかを放棄する必要があります。
使用のヒント
以下のメインテキストに行きましょう。Angularを使用して使用した手法のいくつかをリストします。これは、シーンの形で1つずつリストされます。ここでは、Angularの基本的な概念を説明しません。この記事は熟練したものであり、基本的なチュートリアルではありません。
（1）AngularとPythonの「{{{}}}」間のフラスコの競合
Pythonのフラスコで使用されるテンプレートでは、データバインディングは2つの「 "ブレースにも渡されます。これは、Angularのデータバインディングと競合します。これには2つの解決策があります。 1つは角度の結合マークを変更することであり、もう1つはフラスコの結合マークを変更することです。両方のソリューションをここに示します。
Angularの変更：
$ interporateProvider.startsymbol（ '{[{'）。endsymbol（ '}]}'）;
//この文を構成に追加して、ルートモジュールに配置するだけです。ここでは、{[{{}]}バインディングにバインディングされた元のAngular {{{}}バインディングを{[{{}]}結合に変更します。
フラスコを変更します：
クラスCustomFlask（Flask）：jinja_options = flask.jinja_options.copy（）jinja_options.update（dict（block_start_string = '{％'、block_end_string = '％}」 comment_start_string = '<＃'、comment_end_string = '＃>'、）app = customflask（__ name__、instance_path = '/web'）Angularを使用した後、フロントエンドとバックエンドが分離されているため、フラスコを変更することをお勧めします。 FlaskのJinjiaテンプレートは不要になりました。同時に、角度結合タグを変更すると、他のコントロールとライブラリに問題があります。
（2）必ずしもURLを「＃」に削除します
ルートを設定するときは、HTML5モードを有効にします。
angular.module（ 'router'、['ngroute']）。
（3）ng-click = "expression"および同様の指示、式に複数の式を書く方法は？
たとえば、ngクリックの2つの変数に値を割り当てたい場合は、「;」から分割できます。セミコロン：
<a ng-click = "obja = 1; objb = 2"> </a>
（4）$ watchには効果がないか、1回しか発効しません
一般的に、この状況は、文字列または番号、$ scopeを聴くときに表示されます。$ watch（ "name"、function（）{}）。それは有効ではないか、一度だけ効果があります。解決策は、$ watchが可能な限りオブジェクトに耳を傾け、オブジェクトで聞きたい値を添付することです。
Angular-UIでモーダルを使用する場合、これはより明白です。具体的な理由は、$スコープの継承のためです。モーダルは現在のページのコントローラーに別のスコープを作成するのと同等であるため、リテラルのプロトタイプチェーンを取得およびトレースすることは不可能です。解決したい場合は、プロトタイプチェーンを介して親子範囲を越えてデータを更新するデータを達成するためのオブジェクトが必要です。
（5）NG-Viewのコンテンツがページ全体に表示されることを願っています
通常、ページには固定されたトップメニューまたはサイドバー、そのような固定部品があり、各ルートがNG-viewのテンプレートを変更します。ページにページ全体が完全に表示されることを望んでいる場合、トップメニューなどの固定部品は含まれません。
通常、index.htmlとng-viewによって表示されるテンプレート.htmlです。トップメニューとサイドバーは、index.htmlにあります。それらのディスプレイは、変数をng-ifに結合することによって隠されています。
ページを単独で完全に表示する必要があり、サイドバーを表示しない場合、メッセージが$ scope。$ emitを介してコントローラーに送信され、インデックスページのコントローラーは$ scope。$ onを介してメッセージに耳を傾けます。メッセージが聞こえると、可視および非表示のサイドバーを制御する変数が変更されます。
また、サービスを使用してグローバル変数を制御することもできますが、個人的な推奨事項はメッセージブロードキャストを介しています。
（6）NG-Showの代わりにNG-IFを使用することを忘れないでください
これは角度の小さな穴であるか、大きくないか小さくないピットと言えます。一部の長いリストデータは、デフォルトで非表示に表示され、クリックして表示される場合があります。目に見えるものと非表示を制御できるコンテンツのこの部分には、多くのデータバインディングも伴います。これは、ページをレンダリングする際のパフォーマンスに大きく影響します。
リストを取ります。たとえば、Angularは通常、ページに2,000を超えるデータバインディングがあることを推奨しています。 2,000個のモデルを直接バインドするページがある場合、それをロードすると、非常に詰まっていることがわかります。 100モデルごとにNG-Showに設定すると、デフォルトでは表示されない場合、まだ非常に詰まっていることがわかります。
次に、すべてのNGショーをNG-IFに置き換えると、パフォーマンスが2つのアプリケーションのように即座に高速であることがわかります。その理由は、NG-Showがまだすべてのバインディングを実行し、NG-IFはTrueに等しい場合にバインディングを実行するためです。つまり、表示されるとバインディングを実行します。これにより、パフォーマンスが大幅に向上します。この単純な変更を以前に使用し、ページは約10倍高速にロードされました。
したがって、NG-IFを使用できる場合は、すべてのNG-ShowとNG-Hideの代わりに使用できます。
（7）ng-bind-htmlについて
通常、データはHTML要素に拘束され、Ng-bindで十分ですが、状況によっては、拘束する必要があるのは通常のデータではなく、HTMLです。その後、Ng-bindで十分ではありません。 NG-Bind-HTMLを使用する必要があります。これにより、コンテンツがHTML形式として出力されます。たとえば、HTMLをクラスに出力する場合は、NG-Bind-HTMLを使用する場合、NGSanitizeの協力が必要であり、対応するファイルを導入する必要があります。
（8）Ng-Reepeatデータフィルターの後に結果を取得します
これは、リストを形成する複数のNGリピートデータなど、検索するときに一般的に使用されます。次に、フィールドをフィルタリングすると、フィルター後に結果を取得する必要があります。2つの方法があります。
1つはこのようなHTML ng-repeatで書かれています：
ng-repeat = "Food in FoodCategory._DisPlayFoods =（FoodCategory.Foods | Filter：{'name'：searchobj.foodfilter} | Orderby：food.sort_order）"
このように、_displayfoodsはフィルター後の最終的な表示結果です。別の方法は、2つのデータを使用することです。1つのセットがコントローラーに記述され、その後、フィルターとOrderbyがコントローラーで操作されます。最終結果は、Ng-Reepeatに使用されます。
最初の方法はより便利ですが、2番目の方法はより優れており、パフォーマンスは良好です。
（9）審査によるngクラスおよびngスタイルの割り当て値
変数の値に基づいて、特定のクラスと異なるスタイルを適用するかどうかを決定します。
ng-class = "{'state-error'：！foodform.foodstock。$ valid}"
ng-style = "{color：i.color == '' || i.name == 'live'？ 'default'： '#ffff'}"
（10）フォーム検証は、例として入力を取ります
角度形式は、入力のHTML5属性を介してチェックできます。ここでは、主にフォームと入力名属性を介してロックされています。 formname.inputname。$ valid inputnameのスペースが独自の属性検証を渡すかどうかを示します。
（11）$ $ resourceと$ httpの約束
$ q.all（[resource.query（）。$ promise、resource2.query（）。$ promise]） foodfactory.food.get（{id：result.id}）。$ promise.then（function（data）{}）;}）;これは説明されていません。直接読んでください。 $ httpの約束は手動で返品する必要があるため、一般に$リソースに合格することに注意してください。
（12）$ watchの1つのプロパティのみが耳を傾けます
$ watchの3番目のパラメーターをTrueに設定します。ただし、コレクションのすべてのプロパティを聴きたい、または聴く必要がない場合があります。それらの1つまたは複数を監視するだけですが、ループをループすることはできますが、それは明らかにイライラしすぎています。
次の執筆方法により、コレクションの単一のオブジェクトプロパティを監視できます。
$scope.people = [ { "groupname": "g1", "persions": [ { "id": 1, "name": "bill" }, { "id": 2, "name": "bill2" } ] }, { "groupname": "g2", "persions": [ { "id": 3, "name": "bill3" }, { "id": 4, "name"： "bill4"}]}] $ scope。$ watch（function（$ scope）{return $ scope.people.map（obj）{return obj.persions.map（function（g）{return g.name}）;}）;}、}、function（newval）{$ scoup.cont.cont.cont.count++; $ scope $ scope.count;}、true）;（13）アンチシェイク治療を撤回します
これは、頻繁に出発処理に非常に役立ち、NG-Changeや$ Watchなどのいくつかのシナリオに適しています。たとえば、キーワード検索が削除されると、$ debounceがサービスとしてカプセル化され、インターフェイスが直接呼び出されます。コード：http：//jsfiddle.net/warspawn/6k7kd/
（14）すぐに場所を見つけます
一般的に言えば、ページをJSコードと組み合わせて、フォーム<a id = "bottom"> </a>を介した迅速な位置決めを実現できます。 Angularでは、同様の原則によっても実装されており、コードは次のとおりです。
var old = $ location.hash（）; $ location.hash（ 'batchmenu-bottom'）; $ anchorscroll（）; $ location.hash（old）;
これは、直接location.hashがURLの変更とページジャンプを引き起こすため、ジャンプを防ぐためのコードが追加されるためです。
私は当分の間、そんなに要約してきました。多くのことが情報を検索され、自分で実践されています。彼らがあなたが必要とするTXに役立つことを願っています。将来的に新しいものがあれば、私はそれを書き続けます。
上記は、角度アプリケーションスキルの要約です。将来、関連する記事を追加および整理し続けます。このサイトへのご支援ありがとうございます！