Angularのアプリケーション技術のまとめ

Angularの核となる考え方はデータ駆動型で、他のすべてはデータの延長であることです。

JavaScriptのすべてがオブジェクトであるという考え方を套用して、Angularではすべてがデータであると言えます。

　 プロジェクトのビルドについて　　　

　　　 (1) requirejsおよびYeoman

　　　 Angularに初めて触れたり使用し始めたとき、常に疑問を持つことがあります。私の実践的な答えは、requirejsやYeomanは必要ないということです。前者は、Angular自体がmoduleの実装を持っているため使用しません。後者は、Angularの構造やプロジェクトのビルドが非常に複雑になる必要がないため、手書きまたはGitHubからseedプロジェクトをpullすることをお勧めします。

　　　 (2) プロジェクトの構造の組織方法

　　　 この問題は、人やプロジェクトによって異なるため、非常に困難です。個人的には、2つの構造を推奨します。1つはコード機能に基づいており、コントローラーは同じフォルダーに配置され、サービスも同じフォルダーに配置されます。もう1つは実現される機能に基づいており、例えばUserの場合、対応するtemplate、services、controllerがUserフォルダーに配置されます。

　　　 どちらもできますが、メンテナンスの観点からは、後者のほうが良いでしょう。

　　　 (3) コントローラーおよびサービスの分類

　　　 ここでは、コントローラーは通常、1つのページごとに1つです。1つのページに共有部分がある場合、共有部分は常に1つのコントローラーを使用します。サービスは2つの部分に分けられます。1つはサーバーとデータの交換を行うサービスで、もう1つは機能的な一般的な内容で、自分で作成した再利用可能なサービス（例えば、notifyなど）が含まれます。

　　　 サービスが機能とモジュールにさらに細分化されるべきかどうかは、プロジェクトによって異なります。

　　　 (4) Angularプラグインおよびライブラリの使用

　　　 プロジェクトのすべてをオンラインから手に入れることは現実的ではありませんが、すべてを自分で書くことは実際的ではありません。Angularの多くのプラグインはAngularチームによって開発されたか、またはjQueryプラグインが包装されたものです。私はプラグインに対する意見がシンプルで、必要に応じて使えばよく、満足できない場合は自分で作成したり、既存のプラグインを改良することをお勧めします。

　　　 数時間かけても直せないプラグインがあれば、私のアドバイスに従って、それを放棄してください。多くのプラグインはUIプラグインであり、複雑さを追求する必要はありません。時にはシンプルなHTMLコントロールも独自の簡潔な美があります。

　　　 Angularのプラグインが衝突するとき、特にUIプラグインの場合、多くの場合、そのうちの1つを放棄する必要があります。例えば、angular。-uiとangular-strap.　　　

　 技術の使用

　　　 本文の本文に入りましょう。Angularを使用する際に使ったいくつかの技術を一つずつシチュエーションごとに挙げます。Angularの基本的な概念については説明しません。これは技術的なものであり、基本的なチュートリアルではありません。

　　　 (1) angularの「{{}}」はPythonのflaskと衝突します

　　　 Pythonのflaskで使用されるテンプレートでは、データバインドも二つの「{」大括号で行われます。これがangularのデータバインドと衝突します。この問題に対して、二つの解決策があります。一つはangularのバインドマークを変更すること、もう一つはflaskのバインドマークを変更することです。ここでは、二つの方法をすべて示します。

　　　 angularを変更する

$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
// この一文をconfigに追加して、routeのmoduleに配置します。ここでは、元のangularの{{ }}バインドを、{[{ }]}バインドに変更します。　　　

　　　 flaskを変更する

class CustomFlask(Flask):
  jinja_options = Flask.jinja_options.copy()
  jinja_options.update(dict(
    block_start_string='{%',
    block_end_string='%}',
    variable_start_string='{#',
    variable_end_string='#}',
    comment_start_string='<#',
    comment_end_string='#>',
  ))
app = CustomFlask(__name__, instance_path='/web')

　　　 ここでは、angularを使った後、前後端が分離されるため、flaskを変更することをお勧めします。flaskのjinjiaテンプレートは必要なくなります。また、Angularのバインドマークを変更すると、他のコントロールやライブラリに問題が発生する可能性があります。

　　　 (2) URLから常にデフォルトで「#」が含まれることを削除します

　　　 routeの設定時にHTMLを有効にする5モード.

angular.module('router', ['ngRoute'])
.config(['$routeProvider', '$locationProvider',
 function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);  // 
 }
]
  

　　　 (3) ng-click="expression"および類似の指示、expressionの中で複数の表現をどう書くか63;

　　　 例えば、ng-click中に2変数に値を割り当てる場合、";"（セミコロン）で分割できます：

<a ng-click="obja=1;objb=2></a>

　　　 (4) $watchが効果を発揮しないまたは一度だけ効果を発揮する

　　　 このような場合、文字列や数字を監視する際に発生します。$scope.$watch("name",function(){}).が有効化されないまたは一度だけ有効化される場合、$watchはオブジェクトを監視するようにし、必要な値をObjectに付ける必要があります。

　　　 angularを使用する際に、-uiのmodalでは特に明らかです。具体的には、$scopeの継承の問題です。modalは現在のページのcontroller内で別のscopeを作成するため、文字列や数字を監視する場合、スコープのプロトタイプチェーンを検索することができません。解決策は、スコープのデータの更新バインドを実現するためには、オブジェクトが必要です。

　　　 (5) 希望ng-viewの内容が全ページに表示されます

　　　 通常、ページには固定のtop-menuやsidebarなどの固定部分、そして毎回routeが変わるng-viewのtemplateが、ページがトップを含まないように完全に表示されることを希望する場合、-menuなどの固定部分があります。

　　　 ここには通常index.htmlとng-viewがtemplate.html、top-menuとsidebarはindex.htmlにあります。それらの表示・非表示はng-ifバインド変数制御

　　　 もし、ページが完全に表示され、サイドバーなどの表示をしない必要がある場合、controllerで$scope.$emitを使ってメッセージを送信し、indexページのcontrollerがメッセージを$scope.$onで監視します。一旦そのメッセージを聞くと、サイドバーの表示・非表示を制御する変数を変更します。

　　　 また、serviceを通じてグローバルな変数を制御することもできますが、個人的にはメッセージブロードキャストの方法を推奨します。

　　　 (6) 切勿用ng-if代替ng-show

　　　 これはangularの小さな罠でもありますし、中程度の罠とも言えます。長いリストデータには、デフォルトで隠して、クリックで表示されるようなものがあります。そして、この部分の可制御の表示・非表示には多くのデータバインドが伴います。この部分はページのレンダリング時に非常にパフォーマンスに影響を与えます。

　　　 例えば、通常angularではページのデータバインドは2000個のものがあれば、例えば、2000個modelをロードすると、非常に重くなることに気づくでしょう。もし、ページが直接バインドされている100的model设置为ng-show,默认情况下不显示,你会发现还是很卡.

　　　 然后你将所有的ng-show换成ng-if,你会发现性能瞬间快的像两个应用.原因在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格式输出.比如想输出带有class的html,那么就使用ng-bind-html,而且还需要ngSanitize的配合,需要引入相应的文件.

　　　 (8) 获取ng-repeat数据filter后的结果

　　　 这个一般在搜索的时候需要用到,比如多重ng-repeat数据形成列表.然后filter一个字段,现在要得到filter之后的结果,有2中方式.

　　　 一种是在html的ng-repeat中类似这么写:

ng-repeat="food in foodCategory._displayfoods = (foodCategory.foods | filter: { 'name': searchobj.foodfilter } | orderBy: food.sort_order)"

　　 这样_displayfoods就是filter后的最终显示的结果.另一种方式是通过两套数据,一套写在controller中,然后filter以及orderBy都是在controller中操作,最后操作的结果在用来ng-repeat.

　　　 第一种方式比较方便,第二种方式更好,性能也好.

　　　 (9) ng-class以及ng-style通过判断赋值

　　　 根据变量的值决定是否应用某种class,以及不同的style样式.

　　　 ng-class="{'state-error':!foodForm.foodstock.$valid}"

　　　 ng-style="{ color: i.color=='' || i.name=='活' ? 'default' : '#fff' }"

　　　 (10) formの検証はinputを例にして説明します。

　　　 angularのformはinputのHTML5属性を検証し、ここではformおよびinputのname属性を利用してロックします。formname.inputname.$validは、inputnameという名前のフォームが自身の属性検証を通過したかどうかを示します。

　　　 (11) $resourceと$httpの$promise

$q.all([
 resource.query().$promise,
 resource2.query().$promise
]).then(functon(success){
 console.log(success);
},functon(error){
 console.log(error);
});
foodFactory.food.save(f).$promise.then(function(result){
 foodFactory.food.get({id:result.id}).$promise.then(function(data){
 });
});

　　　 これは説明を省略し、直接見てください。$httpのpromiseは手動で返す必要があるため、通常は$resourceを使用します。

　　　 (12) コレクションの1つの属性のみを$watchで監視

　　　 $watchの第3引数をtrueに設定することで、deep watchができます。しかし、時にはコレクションのすべての属性を監視したいと思わない場合や必要がない場合があります。その場合、forループで$watchを繰り返すのは明らかに不適切です。

　　　 このように書くことで、コレクションの単一のオブジェクト属性を監視することができます。

$scope.people = [
  {
    "groupname": "g"1", 
    "persions": [
      {
        "id": 1, 
        "name": "bill"
      }, 
      {
        "id": 2, 
        "name": "bill"2"
      }
    ]
  }, 
  {
    "groupname": "g"2", 
    "persions": [
      {
        "id": 3, 
        "name": "bill"3"
      }, 
      {
        "id": 4, 
        "name": "bill"4"
      }
    ]
  }
]
$scope.$watch(function($scope) {
  return $scope.people.map(function(obj) {
    return obj.persions.map(function(g){
      return g.name
    });
  });
}, function (newVal) {
  $scope.count++;
  $scope.msg = 'person name was changed'+ $scope.count;
}, true);

　　　 (13) debounceディバフ処理

　　　 これは頻繁に発生する処理に対して非常に役立ちます。ng-change,$watchのいくつかのシーンで非常に役立ちます。例えば、キーワードに基づく即時検索の場面で、$debounceをサービスとしてパッケージし、直接インターフェースを呼び出します。コード：http://jsfiddle.net/Warspawn/6K7Kd/

　　　 (14) に快速定位できます。

　　　 一般的に、ページ内で<a id="bottom"></a>の形式でjsコードを組み合わせることができます。angularでは同様の原理で実現されています。以下のコードです：　　　　　　

 var old = $location.hash();
     $location.hash('batchmenu-bottom');
     $anchorScroll();
     $location.hash(old);

　　　 これは location.hash が直接 URL を変更し、ページがジャンプするのを防ぐためです。ジャンプ防止のコードが追加されています。

　　　 一時的にこれだけまとめました。多くのものは資料の確認や自分の実践によるものです。必要なTXに少しでも役立つことを願っています。今後も新しいものがあれば、続けて書きます。

　　　　　 これで Angular アプリケーション技術のまとめが完了しました。今後も関連記事を追加して整理します。皆様の本サイトへのサポートに感謝します。

声明：本文の内容はインターネットからネットワークに、著作権者に帰属します。インターネットユーザーが自発的に貢献し、アップロードしました。本サイトは所有権を持ちません。また、人間による編集は行われていません。著作権侵害の内容が見つかった場合は、メールを送信してください：notice#oldtoolbag.com（メール送信時、#を@に変更してください。通報し、関連証拠を提供してください。一旦確認されると、本サイトは侵害される内容をすぐに削除します。）