AngularJSで開発する際のトップ10の間違い

AngularJSは現在、最も人気のあるJavaScriptフレームワークの1つです。 その使用により開発プロセスが簡素化され、AngularJSは小さなWebアプリケーションを作成するための優れたツールになりますが、フレームワークの機能はこれに限定されず、さまざまな機能に満ちた大規模アプリケーションを開発できます。 開発の容易さと多数の機能の組み合わせにより、広範な配布が行われ、配布とともに一般的な一般的なエラーが発生しました。 このトピックでは、AngularJSで大規模プロジェクトを開発するときに発生する最も一般的なエラーについて説明します。

1. MVCアプリケーションに対応するフォルダー構造

AngularJSはMVCフレームワークです。 その中のモデルは、backbone.jsの場合のように明示的に定義されていないという事実にもかかわらず、全体的なアーキテクチャスタイルは同じままです。 MVCフレームワークを使用する際の一般的な方法は、次のパターンに従ってファイルをグループ化することです。

templates/ _login.html _feed.html app/ app.js controllers/ LoginController.js FeedController.js directives/ FeedEntryDirective.js services/ LoginService.js FeedService.js filters/ CapatalizeFilter.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

特にRoRでの作業経験のある開発者の間では、同様のアプローチが一般的です。 それでも、アプリケーションの成長に伴い、このようなフォルダー構造を使用すると、各時点でいくつかのフォルダーを開いたままにする必要があります。 Sublime、Visual Studio、VimとNerdTreeのいずれを使用する場合でも、ディレクトリツリー内を移動するときは、常にスクロールに時間を費やします。 これを避けるために、タイプではなく機能ごとにファイルをグループ化できます。

 app/ app.js Feed/ _feed.html FeedController.js FeedEntryDirective.js FeedService.js Login/ _login.html LoginController.js LoginService.js Shared/ CapatalizeFilter.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このフォルダー構造により、同じ機能に関連する関連ファイルを簡単に見つけることができ、開発プロセスをスピードアップできます。 はい、htmlファイルをjsで1つのフォルダーに保存することは議論の余地がありますが、時間を節約する効果はより重要です。

2.モジュール（またはその欠如）

多くの場合、プロジェクト開発の開始時に、すべての機能が単一のモジュールに追加されます。 ある時点まで、このアプローチは機能しますが、プロジェクトの開発に伴い、コードは管理不能になります。

 var app = angular.module('app',[]); app.service('MyService', function(){ //service code }); app.controller('MyCtrl', function($scope, MyService){ //controller code });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次の広範なアプローチは、オブジェクトをタイプごとにグループ化することです。

 var services = angular.module('services',[]); services.service('MyService', function(){ //service code }); var controllers = angular.module('controllers',['services']); controllers.controller('MyCtrl', function($scope, MyService){ //controller code }); var app = angular.module('app',['controllers', 'services']);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このようなアプローチは、ポイント1のディレクトリ構造のように、最適な方法でスケーリングしません。スケーラビリティを向上させるために、コードを機能に分割するという同じ概念に従います。

 var sharedServicesModule = angular.module('sharedServices',[]); sharedServices.service('NetworkService', function($http){}); var loginModule = angular.module('login',['sharedServices']); loginModule.service('loginService', function(NetworkService){}); loginModule.controller('loginCtrl', function($scope, loginService){}); var app = angular.module('app', ['sharedServices', 'login']);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

機能を異なるモジュールに分割すると、さまざまなプロジェクトでコードを再利用することもできます。

3.依存性注入

依存性注入は、AngularJSが提供する最高の機能の1つです。 DIを使用すると、テストが簡単になります。 AngularJSは、依存関係の実装方法に関して非常に柔軟です。 最も簡単な方法は、依存関係をパラメーターとして関数に渡すことです。

 var app = angular.module('app',[]); app.controller('MainCtrl', function($scope, $timeout){ $timeout(function(){ console.log($scope); }, 1000); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コードから、MainCtrlが$スコープと$タイムアウトに依存していることが明らかです。 これは、プロジェクトが本番に移行し、コードを縮小するまで、うまく機能します。 上記のコードにUglifyJSを使用すると、次の結果になります。

 var app=angular.module("app",[]);app.controller("MainCtrl",function(e,t){t(function(){console.log(e)},1e3)})
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現在、AngularJSはMainCtrlが実際に依存するものを認識しません。 これを防ぐには、リストされたすべての依存関係をパラメーターとして受け入れる関数形式の最後の要素を使用して、依存関係を文字列の配列として渡すという非常に簡単な解決策があります。

 app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout){ $timeout(function(){ console.log($scope); }, 1000); }]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記のコードは、Minifierによって、AngularJSがすでに正しく解釈できるコードに変換されます。

 app.controller("MainCtrl",["$scope","$timeout",function(e,t){t(function(){console.log(e)},1e3)}])
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.1。 グローバルな依存関係

多くの場合、AngularJSアプリケーションを開発するときは、アプリケーション内の任意の場所で利用可能なオブジェクトを使用する必要があります。 これは、依存性注入に基づいて細身のモデルを破壊し、バグを引き起こし、テストプロセスを複雑にします。 AngularJSでは、このようなオブジェクトをモジュールにラップして、通常のAngularJSモジュールのように埋め込むことができます。 たとえば、優れたUnderscore.jsライブラリは、次のようにモジュールにラップできます。

 var underscore = angular.module('underscore', []); underscore.factory('_', function() { return window._; //Underscore must already be loaded on the page }); var app = angular.module('app', ['underscore']); app.controller('MainCtrl', ['$scope', '_', function($scope, _) { init = function() { _.keys($scope); } init(); }]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、アプリケーションは、依存関係の必須実装で単一のスタイルを使用でき、依存関係の機能から分離してモジュールをテストすることが可能になります。

4.コントローラーの膨張

コントローラは、AngularJSの基盤です。 そして、多くの場合、特に初心者は、コントローラーにあまりにも多くのロジックを記述します。 コントローラーはDOMを操作したり、DOMセレクターを含めたりしないでください;これにはディレクティブがあります。 同様に、ビジネスロジックはサービス内になければなりません。 サービスはコントローラーとは異なり、ライフタイムがアプリケーション自体のライフタイムと一致するシングルトーンであるため、データもサービスに保存する必要があります（データが$スコープに関連付けられている場合を除く）。また、コントローラーをビューとモデルの間のコーディネーターと見なします。この場合、最小限のロジックが含まれます。

5.サービスvs工場

これらの命名規則により、AngularJSのすべての初心者が恥ずかしい思いをしますが、実際にはほとんど同じです。

 function factory(name, factoryFn) { return provider(name, { $get: factoryFn }); } function service(name, constructor) { return factory(name, ['$injector', function($injector) { return $injector.instantiate(constructor); }]); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サービス関数は、ファクトリー関数を呼び出すだけです。ファクトリー関数では、プロバイダー関数の呼び出しがラップされます。 サービスがファクトリー関数を呼び出すだけの場合、2つの違いは何ですか？ ポイントは$ jector.instantiateで、その中に$ injectorがサービスコンストラクター関数の新しいインスタンスを作成します。 同じアクションを実行するサービスとファクトリーの例：

 var app = angular.module('app',[]); app.service('helloWorldService', function(){ this.hello = function() { return "Hello World"; }; }); app.factory('helloWorldFactory', function(){ return { hello: function() { return "Hello World"; } } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

helloWorldServiceまたはhelloWorldFactoryがコントローラーに挿入されると、どちらにも「Hello World」を返す単一のメソッドが含まれます。 すべてのプロバイダーはシングルトンであるため、サービスのインスタンスとファクトリーのインスタンスは常に1つしかありません。 それでは、同じ機能を実行するのに工場とサービスが同時に存在するのはなぜですか？ ファクトリーは、新しいオブジェクトを作成できる関数を返すことができるため、柔軟性が向上します。 OOPでは、ファクトリは他のオブジェクトを作成するオブジェクトです。

 app.factory('helloFactory', function() { return function(name) { this.name = name; this.hello = function() { return "Hello " + this.name; }; }; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サービスと2つの工場を使用するコントローラーの例を次に示します。

 app.controller('helloCtrl', function($scope, helloWorldService, helloWorldFactory, helloFactory) { init = function() { helloWorldService.hello(); //'Hello World' helloWorldFactory.hello(); //'Hello World' new helloFactory('Readers').hello() //'Hello Readers' } init(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プライベートメソッドを使用してクラスを開発する場合にも、ファクトリは便利です。

 app.factory('privateFactory', function(){ var privateFunc = function(name) { return name.split("").reverse().join(""); //reverses the name }; return { hello: function(name){ return "Hello " + privateFunc(name); } }; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

6. Batarangの使用の失敗

Batarangは、AngularJSアプリケーションを開発およびデバッグするためのChromeブラウザー拡張機能です。 Batarangでは次のことができます。

• スコープに接続されたモデルを表示する
• アプリケーションで依存関係グラフを作成します
• アプリケーションのパフォーマンスを分析する

AngularJSのパフォーマンスは「すぐに」悪くないという事実にもかかわらず、カスタムディレクティブと複雑なロジックが追加されたアプリケーションの成長により、アプリケーションの速度が低下し始める場合があります。 Batarangを使用すると、呼び出されたときにどの関数が多くの時間を費やすかを簡単に把握できます。 Batarangはウォッチツリーも表示します。これは、多数のウォッチャーを使用する場合に役立ちます。

7.オブザーバーが多すぎる

前述のように、AngularJSはすぐに使用できます。 ただし、オブザーバーの数が2000に達すると、データの変更がチェックされる$ダイジェストサイクルがアプリケーションの速度を低下させる可能性があります。 2000年に達することは減速を保証するものではありませんが、心配することから始める良い出発点です。 次のコードを使用して、ページごとのオブザーバーの数を確認できます。

 (function () { var root = $(document.getElementsByTagName('body')); var watchers = []; var f = function (element) { if (element.data().hasOwnProperty('$scope')) { angular.forEach(element.data().$scope.$$watchers, function (watcher) { watchers.push(watcher); }); } angular.forEach(element.children(), function (childElement) { f($(childElement)); }); }; f(root); console.log(watchers.length); })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記のコードとBatarangaオブザーバーツリーを使用して、重複するオブザーバーまたは不変データのオブザーバーがあるかどうかを確認できます。 不変データの場合は、ページ上のオブザーバーの数が増えないようにbindonceディレクティブを使用できます。

8.スコープの継承（$スコープの）

JSプロトタイプベースの継承は、従来のクラス継承とは異なります。 通常、これは問題ではありませんが、これらのニュアンスはスコープを操作するときに発生する可能性があります。 AngularJSでは、通常の（分離されていない）$スコープが親から最も古い祖先$ rootScopeに継承されます。 子と親スコープで共有される一般的なデータモデルは、プロトタイプ継承のおかげで簡単に整理できます。 次の例では、ユーザーが名前を入力した後、ユーザー名が2つのspan要素に同時に表示されるようにします。

 <div ng-controller="navCtrl"> <span>{{user}}</span> <div ng-controller="loginCtrl"> <span>{{user}}</span> <input ng-model="user"></input> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

質問は次のとおりです。ユーザーがテキストボックスに名前を入力すると、navCtrl、loginCtrl、またはその両方の要素が表示されますか？ 答えがloginCtrlの場合、プロトタイプベースの継承がどのように機能するかを理解できます。 文字列フィールド検索では、プロトタイプチェーンは使用されません。 目的の動作を実現するには、オブジェクトを使用して、子および親の$スコープのユーザー名を正しく更新することをお勧めします。 （JSでは、関数と配列もオブジェクトであることを思い出します。）

 <div ng-controller="navCtrl"> <span>{{user.name}}</span> <div ng-controller="loginCtrl"> <span>{{user.name}}</span> <input ng-model="user.name"></input> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、ユーザー変数がオブジェクトであるため、プロトタイプチェーンが機能し、navCtrlのspan要素がloginCtrlと共に正しく更新されます。 これは不自然な例のように思えるかもしれませんが、子スコープ（ngRepeatなど）を作成するディレクティブを使用すると、そのような瞬間が発生します。

9.手動テストの使用

作業でTDDの使用を開始するまで、毎回プロジェクトを実行し、手動テストを実行してコードが機能することを確認する必要があります。 このアプローチをAngularJSで使用する言い訳はありません。 AngularJSは、最初に開発されたコードがテスト可能になるように調整されました。 DI、ngMockは、これに関する最善のヘルパーです。 また、次のレベルに進むためのツールもいくつかあります。

9.1分度器

単体テストは、完全にカバーされたテストアプリケーションを構築するための基盤ですが、プロジェクトの成長に伴い、統合テストの使用は、アプリケーション内のコードの実行可能性を確認するためにより効果的になります。 幸いなことに、AngularJSチームは優れたツールを開発しました-Protractorは、ユーザーの操作をシミュレートできます。 分度器は、テストの作成にJasmineフレームワークを使用し、さまざまな相互作用シナリオを記述するための優れたAPIを備えています。 多くの異なるテストツールの中で、ProtractorにはAngularJSの内部構造を理解できるという利点があります。これは、$ダイジェストループなどを扱う場合に特に便利です。

9.2。 カルマ

AngularJSプロジェクトチームは、テスト開発ツールの作成に限定されませんでした。 テストランナーのKarmaも開発されました。 Karmaでは、ソースファイルを変更するたびにテストを実行できます。 Karmaは、複数のブラウザーで並行してテストを実行できます。 さまざまなデバイスがカルマサーバーをターゲットにして、実際の使用シナリオをより完全にカバーすることもできます。

10. jQueryを使用する

jQueryは素晴らしいライブラリです。 クロスプラットフォーム開発を標準化し、最新のWeb開発の標準になりました。 jQueryには多くの機能があるという事実にもかかわらず、その哲学はAngularJSの哲学とはかけ離れています。 AngularJSはアプリケーションを構築するためのフレームワークであり、jQueryはJavaScriptおよびHTMLとの対話プロセスを単純化するライブラリであり、AJAXを操作するための便利なAPIを提供します。 これが2つの基本的な違いです。 Angularはアプリケーションを構築するためのアプローチであり、ドキュメントのレイアウトを制御する方法ではありません。 AngularJSアプリケーション構築の原則を本当に理解するには、jQueryの使用を停止する必要があります。 jQueryを使用すると、既存のHTML標準に準拠できるようになりますが、angularでは、アプリケーションのニーズに合わせてHTML標準を拡張できます。 AngularJSでのDOM操作はディレクティブで行う必要がありますが、Angularでアナログが見つからない場合は、ディレクティブの既存のjQueryコンポーネントにラッパーを配置することは完全に受け入れられます。

おわりに

AngularJSは、すばらしいコミュニティを備えた、絶えず進化しているすばらしいフレームワークです。 人気のあるエラーのリストがあなたの仕事に役立つことを願っています。