).scope() のソースコード実際にはかなり複雑です。それにもかかわらず、陽気な警告がそれを補うので、それは読む価値があります。

よくある間違い#15:自動化に依存していない、または自動化に依存しすぎている

フロントエンド開発のトレンドを追い、私のように少し怠惰な場合は、おそらくすべてを手作業でやろうとはしません。すべての依存関係を追跡し、さまざまな方法でファイルのセットを処理し、ファイルを保存するたびにブラウザーをリロードします。開発には、コーディングだけではありません。

そのため、アプリの提供方法によっては、bowerやnpmを使用している可能性があります。うなり声、一口、またはブランチを使用している可能性があります。またはbash、これもクールです。実際、Yeomanジェネレーターを使用して最新のプロジェクトを開始した可能性があります。

これは質問につながります:あなたはあなたのインフラストラクチャが実際に何をしているのかというプロセス全体を理解していますか?特に、接続Webサーバーのライブリロード機能を修正するために何時間も費やした場合は特に、持っているものが必要ですか?

少し時間を取って、必要なものを評価してください。これらのツールはすべてあなたを助けるためにここにあるだけであり、それらを使用することに対する他の報酬はありません。私が話す経験豊富な開発者は、物事を単純化する傾向があります。

よくある間違い#16:TDDモードでユニットテストを実行しない

テストでは、コードにAngularJSエラーメッセージが含まれることはありません。彼らが行うことは、チームが常にリグレッションの問題に遭遇しないようにすることです。

ここでは、ユニットテストについて具体的に書いています。e2eテストよりもユニットテストの方が重要だと感じているからではなく、実行速度がはるかに速いからです。これから説明するプロセスは非常に楽しいものであることを認めなければなりません。

たとえば、の実装としてのテスト駆動開発。 gulp-karma runnerは、基本的にすべてのファイル保存ですべての単体テストを実行します。テストを書く私のお気に入りの方法は、最初に空の保証を書くことです。

angular.reloadWithDebugInfo()

その後、実際のコードを記述またはリファクタリングしてから、テストに戻り、保証に実際のテストコードを入力します。

ターミナルでTDDタスクを実行すると、プロセスが約100%高速化されます。ユニットテストは、たくさんある場合でも、数秒で実行されます。テストファイルを保存するだけで、ランナーがそれを取得し、テストを評価して、即座にフィードバックを提供します。

e2eテストでは、プロセスははるかに遅くなります。私のアドバイス-e2eテストをテストスイートに分割し、一度に1つずつ実行します。分度器はそれらをサポートしています。以下は、テストタスクに使用するコードです(私はgulpが好きです)。

var injector = $(document.body).injector(); var someService = injector.get('someService');

よくある間違い#17:利用可能なツールを使用しない

A-クロムブレークポイント

Chrome開発ツールを使用すると、ブラウザに読み込まれたファイルの特定の場所をポイントし、その時点でコードの実行を一時停止し、その時点から利用可能なすべての変数を操作できます。それはたくさんです!この機能では、コードを追加する必要はまったくありません。すべてが開発ツールで行われます。

すべての変数にアクセスできるだけでなく、呼び出しスタック、印刷スタックトレースなども表示されます。縮小されたファイルで動作するように構成することもできます。それについて読む ここに

同様のランタイムアクセスを取得する方法は他にもあります。 Ng-initを追加する呼び出します。ただし、ブレークポイントはより高度です。

AngularJSを使用すると、DOM要素を介してスコープにアクセスし(ng-ifが有効になっている場合)、コンソールを介して利用可能なサービスを挿入することもできます。コンソールで次のことを考慮してください。

ng-repeat

または、インスペクターの要素をポイントしてから、次のようにします。

var ngInitDirective = ngDirective({ priority: 450, compile: function() { return { pre: function(scope, element, attrs) { scope.$eval(attrs.ngInit); } }; } });

debugInfoが有効になっていない場合でも、次のことができます。

var ngShowDirective = ['$animate', function($animate) { return { restrict: 'A', multiElement: true, link: function(scope, element, attr) { scope.$watch(attr.ngShow, function ngShowWatchAction(value) { // we're adding a temporary, animation-specific class for ng-hide since this way // we can control when the element is actually displayed on screen without having // to have a global/greedy CSS selector that breaks when other animations are run. // Read: https://github.com/angular/angular.js/issues/9103#issuecomment-58335845 $animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, { tempClasses: NG_HIDE_IN_PROGRESS_CLASS }); }); } }; }];

そして、リロード後に利用できるようにします。

コンソールからサービスを挿入して操作するには、次のことを試してください。

$watch

B-クロームタイムライン

開発ツールに付属するもう1つの優れたツールは、タイムラインです。これにより、使用中のアプリのライブパフォーマンスを記録および分析できます。出力には、特に、メモリ使用量、フレームレート、およびCPUを占有するさまざまなプロセス(ロード、スクリプト、レンダリング、およびペイント)の分析が表示されます。

アプリのパフォーマンスが低下した場合は、[タイムライン]タブでその原因を特定できる可能性があります。パフォーマンスの問題を引き起こしたアクションを記録して、何が起こるかを確認してください。ウォッチャーが多すぎますか?黄色のバーが多くのスペースを占めているのがわかります。メモリリーク?時間の経過とともに消費されたメモリの量をグラフで確認できます。

詳細な説明: https://developer.chrome.com/devtools/docs/timeline

C-iOSおよびAndroidでアプリをリモートで検査する

ハイブリッドアプリまたはレスポンシブウェブアプリを開発している場合は、デバイスのコンソール、DOMツリー、およびChromeまたはSafari開発ツールから利用できる他のすべてのツールにアクセスできます。これには、WebViewとUIWebViewが含まれます。

まず、ホスト0.0.0.0でWebサーバーを起動して、ローカルネットワークからアクセスできるようにします。設定でWebインスペクターを有効にします。次に、デバイスをデスクトップに接続し、通常の「localhost」の代わりにマシンのIPを使用して、ローカル開発ページにアクセスします。これで、デスクトップのブラウザからデバイスを利用できるようになります。

ここに AndroidとiOSの詳細な手順は、Googleから簡単に見つけることができます。

私は最近、いくつかのクールな経験をしました browserSync 。これはlivereloadと同じように機能しますが、browserSyncを介して同じページを表示しているすべてのブラウザーを実際に同期します。これには、スクロール、ボタンのクリックなどのユーザー操作が含まれます。デスクトップからiPadのページを制御しながら、iOSアプリのログ出力を見ていました。それはうまくいきました!

aws認定ソリューションアーキテクト認定

よくある間違い#18:NG-INITの例でソースコードを読み取らない

// when in doubt, comment it out! :) は、その音からすると、

|_+_|
に似ているはずです。と
|_+_|
でしょ?なぜそれを使用すべきではないというコメントがドキュメントにあるのか疑問に思ったことはありますか?意外だった私見!ディレクティブがモデルを初期化することを期待します。それはそれが行うことでもありますが…それは別の方法で実装されます。つまり、属性値を監視しません。 AngularJSのソースコードを閲覧する必要はありません。それをお届けします。

|_+_|

あなたが期待するよりも少ないですか?厄介なディレクティブ構文以外に、かなり読みやすいですね。 6行目はそれがすべてであるものです。

ng-showと比較してください。

|_+_|

繰り返しますが、6行目です。

|_+_|
がありますそこで、それがこのディレクティブを動的にするものです。 AngularJSソースコードでは、すべてのコードの大部分は、最初からほとんど読めるコードを説明するコメントです。 AngularJSについて学ぶのに最適な方法だと思います。

結論

最も一般的なAngularJSの間違いをカバーするこのガイドは、他のガイドのほぼ2倍の長さです。当然そのようになりました。高品質のJavaScriptフロントエンドエンジニアに対する需要は非常に高いです。 AngularJSは 今とても暑い 、そしてそれは数年の間最も人気のある開発ツールの中で安定した位置を保持しています。 AngularJS 2.0が開発中であるため、今後数年間はおそらく支配的になるでしょう。

フロントエンド開発の優れている点は、非常にやりがいがあることです。私たちの仕事は即座に目に見え、人々は私たちが提供する製品と直接対話します。学習に費やした時間 JavaScript 、そしてJavaScript言語に焦点を当てるべきだと私は信じていますが、これは非常に良い投資です。それはインターネットの言語です。競争は超激しいです!私たちの焦点は1つあります。それは、ユーザーエクスペリエンスです。成功するには、すべてをカバーする必要があります。

これらの例で使用されているソースコードは、からダウンロードできます。 GitHub 。気軽にダウンロードして、自分だけのものにしてください。

私に最も影響を与えた4人の出版開発者にクレジットを与えたかった:

また、FreeNode #angularjsおよび#javascriptチャネルのすべての素晴らしい人々に、多くの優れた会話と継続的なサポートに感謝したいと思います。

そして最後に、常に覚えておいてください:

|_+_|