前書き

開発を支援するために利用可能な多くのツールを使用 AngularJS 多くの人は、それが非常に複雑なフレームワークであるという印象を持っていますが、そうではありません。これが、このチュートリアルシリーズを始めた主な理由の1つです。

に パート1 AngularJSフレームワークの基本をカバーし、最初のアプリケーションを作成することから始めました。この投稿は初心者向けです。あなたがもっと 経験豊富なAngularJS開発者 、あなたはもっと興味があるかもしれません わかりやすいディレクティブ またはの物語 成長するスタートアップで使用されているAngularJS 。

このチュートリアルでは、アプリケーションロジックレイヤーを脇に置き、スキャフォールディング、依存関係の管理、テスト用の準備（ユニットとエンドツーエンドの両方）など、適切なAngularJSプロジェクトのセットアップを実行する方法を学習します。これは、Yeoman、Grunt、BowerのAngularJSツールを使用して行います。次に、Karmaを使用してJasmineテストを作成および実行するプロセスを確認します。

Karma、Jasmine、Grunt、Bower、Yeoman…これらすべてのツールは何ですか？

JavaScriptを使用している場合は、これらのツールの少なくともいくつかをすでに知っている可能性が高くなります。 Angular 。ただし、共通のベースラインを確保するために、仮定を行うことは避けます。これらの各テクノロジーと、それが何に役立つかを簡単に確認しましょう。

• カルマ （以前はTestacularと呼ばれていました）は、GoogleのJavaScriptテストランナーであり、AngularJSをテストするための自然な選択です。実際のブラウザー（電話/タブレットブラウザーを含む）でテストを実行できるようにするだけでなく、 テストフレームワークにとらわれない ;つまり、と組み合わせて使用​​することができます どれか 選択したテストフレームワーク（Jasmine、 モカ 、または QUnit 、とりわけ）。

• ジャスミン 少なくともこの投稿では、私たちが選択するテストフレームワークになります。その構文はの構文と非常に似ています RSpec 、これまでに作業したことがある場合。 （まだの場合でも、心配しないでください。このチュートリアルの後半で詳しく説明します。）

• 接地 は、次のようないくつかの反復タスクの自動化を支援するタスクランナーです。 縮小化 、コンパイル（またはビルド）、テスト、およびAngularJSアプリケーションのプレビューの設定。

• バウアー は、CSSフレームワーク、JavaScriptライブラリなど、すべてのアプリケーションの依存関係を見つけてインストールするのに役立つパッケージマネージャーです。のように、git上で実行されます Railsバンドラー 、依存関係を手動でダウンロードして更新する必要がなくなります。

• ヨーマン は、Grunt、Bower、およびscaffoldingツールの3つのコアコンポーネントを含むツールセットです。 私 。 Yoは、ジェネレーター（単なるスキャフォールディングテンプレート）を使用してボイラープレートコードを生成し、プロジェクトのGruntとBowerを自動的に構成します。ほぼすべてのJavaScriptフレームワーク（Angular、Backbone、Emberなど）のジェネレーターを見つけることができますが、ここではAngularに焦点を当てているため、ここでは ジェネレーター-角度 事業。

では、どこから始めればよいのでしょうか。

さて、最初に行う必要があるのは、必要なツールをインストールすることです。

c corp vs s corp 2018

お持ちでない場合 行く 、 node.js 、および 海抜 すでにインストールされている場合は、先に進んでインストールしてください。

次に、コマンドラインに移動し、次のコマンドを実行してYeomanのツールをインストールします。

npm install -g yo grunt-cli bower

ああ、忘れないでください。AngularJSジェネレーターを使用するので、それもインストールする必要があります。

npm install -g generator-angular

OK、これで準備が整いました…

AngularJSアプリケーションをスキャフォールド/生成します

前回 、ボイラープレートコードを手動で借用しました 角のある種子 事業。今回は、yoに（generator-angularと組み合わせて）それを実行させます。

新しいプロジェクトフォルダを作成し、そこに移動して実行するだけです。

yo angular

含めるかどうかなど、いくつかのオプションが表示されます ブートストラップ そして 方位磁針 。今のところ、言いましょう 番号 コンパスと はい ブートストラップへ。次に、含めるモジュール（リソース、Cookie、サニタイズ、ルーティング）についてプロンプトが表示されたら、angular-route.jsのみを選択します。

これで、プロジェクトのスキャフォールドが作成され（1分かかる場合があります）、Karmaと統合され、すべてが事前構成されているはずです。

注意： ここでは、モジュールを、組み込みのアプリケーションで使用したモジュールに制限していることに注意してください。 パート1 このチュートリアルの。自分のプロジェクトでこれを行う場合、含める必要のあるモジュールを決定するのはあなた次第です。

ここで、Jasmineを使用するので、karma-jasmineを追加しましょう。私たちのプロジェクトへのアダプター：

npm install karma-jasmine --save-dev

Chromeインスタンスでテストを実行する場合は、karma-chrome-launcherも追加しましょう。

npm install karma-chrome-launcher --save-dev

OK、すべてを正しく実行すると、プロジェクトファイルツリーは次のようになります。

静的アプリケーションコードはapp/に入りますディレクトリとtest/ディレクトリには（うん、あなたはそれを推測した！）私たちのテストが含まれます。ルートに表示されるファイルは、プロジェクト構成ファイルです。それぞれについて学ぶべきことはたくさんありますが、今のところはデフォルトの構成のままにしておきます。それでは、アプリを初めて実行しましょう。これは、次のコマンドで簡単に実行できます。

grunt serve

そして出来上がり！これで、アプリが目の前にポップアップ表示されます。

Bower forAngularJSについて少し

本当に重要な部分（つまり、テスト）に入る前に、もう少し詳しく学びましょう。 バウアー 。前述のように、バウアーは私たちのパッケージマネージャーです。プロジェクトへのlibまたはプラグインの追加は、bower installを使用して簡単に行うことができます。コマンド。たとえば、modernizrを含めるには、次のことを行う必要があります（もちろん、プロジェクトディレクトリ内）。

bower install modernizr

ただし、これによりmodernizrが作成されることに注意してください。プロジェクトの一部（app/bower_componentsディレクトリにあります）、 私たちはまだそれを私たちのアプリケーションに含める責任があります （またはいつ含めるべきかを管理する）手動で追加したlibで行う必要があるため。これを行う1つの方法は、index.htmlに次のタグを追加することです。

bower.json

または、bower.jsonを使用することもできます依存関係を管理するためのファイル。これまでのすべてのステップを注意深く実行した後、{ 'name': 'F1FeederApp', 'version': '0.0.0', 'dependencies': { 'angular': '1.2.15', 'json3': '~3.2.6', 'es5-shim': '~2.1.0', 'jquery': '~1.11.0', 'bootstrap': '~3.0.3', 'angular-route': '1.2.15' }, 'devDependencies': { 'angular-mocks': '1.2.15', 'angular-scenario': '1.2.15' } } ファイルは次のようになります。

bower install

構文はかなり自明ですが、より多くの情報が利用可能です ここに 。

次に、必要な新しい依存関係を追加できます。必要なのは、それらをインストールするための次のコマンドだけです。

app

それでは、いくつかのテストを書いてみましょう。

さて、今度は中断したところから実際に再開する時が来ました パート1 AngularJSアプリのテストをいくつか作成します。

しかし、最初に、対処する必要のある小さな問題があります。 ジェネレーター-角度 プロジェクトテンプレートに基づいて 角のある種子 プロジェクト（公式のAngular定型文）、なぜか私にはよくわかりませんが、彼らはcssを変更することにしました。フォルダーの命名規則（stylesをjsに、scriptsをtests/spec/controllersに変更するなど）。

その結果、最初に作成したアプリのパスが、生成したばかりのスキャフォールドと一致しなくなりました。これを回避するには、からアプリコードをダウンロードしましょう ここに この時点からそのバージョンで動作します（これは、最初に作成したアプリとほとんど同じですが、ジェネレーターの角度の名前に一致するようにパスが更新されています）。

アプリをダウンロードしたら、drivers.jsに移動しますフォルダを作成し、describe('Controller: driversController', function () { // First, we load the app's module beforeEach(module('F1FeederApp')); // Then we create some variables we're going to use var driversController, scope; beforeEach(inject(function ($controller, $rootScope, $httpBackend) { // Here, we create a mock scope variable, to replace the actual $scope variable // the controller would take as parameter scope = $rootScope.$new(); // Then we create an $httpBackend instance. I'll talk about it below. httpMock = $httpBackend; // Here, we set the httpBackend standard reponse to the URL the controller is // supposed to retrieve from the API httpMock.expectJSONP( 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK').respond( {'MRData': {'StandingsTable': {'StandingsLists' : [{'DriverStandings':[ { 'Driver': { 'givenName': 'Sebastian', 'familyName': 'Vettel' }, 'points': '397', 'nationality': 'German', 'Constructors': [ {'name': 'Red Bull'} ] }, { 'Driver': { 'givenName': 'Fernando', 'familyName': 'Alonso' }, 'points': '242', 'nationality': 'Spanish', 'Constructors': [ {'name': 'Ferrari'} ] }, { 'Driver': { 'givenName': 'Mark', 'familyName': 'Webber' }, 'points': '199', 'nationality': 'Australian', 'Constructors': [ {'name': 'Red Bull'} ] } ]}]}}} ); // Here, we actually initialize our controller, passing our new mock scope as parameter driversController = $controller('driversController', { $scope: scope }); // Then we flush the httpBackend to resolve the fake http call httpMock.flush(); })); // Now, for the actual test, let's check if the driversList is actually retrieving // the mock driver array it('should return a list with three drivers', function () { expect(scope.driversList.length).toBe(3); }); // Let's also make a second test checking if the drivers attributes match against // the expected values it('should retrieve the family names of the drivers', function () { expect(scope.driversList[0].Driver.familyName).toBe('Vettel'); expect(scope.driversList[1].Driver.familyName).toBe('Alonso'); expect(scope.driversList[2].Driver.familyName).toBe('Webber'); }); }); という名前のファイルを作成します以下を含む：

driverscontroller

これは、describe()のテストスイートです。多くのコードのように見えるかもしれませんが、そのほとんどは実際には単なるモックデータ宣言です。本当に重要な要素を簡単に見てみましょう。

• it()メソッドはテストスイートを定義します。
• 各beforeEach()適切なテスト仕様です。
• すべての$httpBackend関数は、各テストの直前に実行されます。

ここで最も重要な（そして混乱を招く可能性のある）要素はhttpMockです。 expectJSONP()でインスタンス化したサービス変数。このサービスは偽のバックエンドとして機能し、実際のサーバーが本番環境で行うのと同じように、テスト実行時にAPI呼び出しに応答します。この場合、expect()を使用します関数では、指定されたURL（サーバーから情報を取得するために使用するものと同じ）へのJSONPリクエストをインターセプトするように設定し、代わりに、実際のサーバーの応答を模倣した3つのドライバーを含む静的リストを返します。これにより、コントローラーから何が返されるかを確実に知ることができます。したがって、grunt test を使用して、結果を期待される結果と比較できます。関数。それらが一致する場合、テストは合格します。

テストの実行は、次のコマンドで簡単に実行できます。

drivercontroller

ドライバー詳細コントローラー（generator-angular）のテストスイートは、今見たものとかなり似ているはずです。演習として自分で理解することをお勧めします（または、単に見てみることができます ここに 、あなたがそれに慣れていない場合）。

エンドツーエンドのAngularJSテストはどうですか？

Angularチームは最近、エンドツーエンドテスト用の新しいランナーを導入しました。 分度器 。それは使用しています webdriver ブラウザで実行されているアプリケーションと対話し、デフォルトでJasmineテストフレームワークも使用するため、構文は単体テストの構文と非常に一貫性があります。

ただし、分度器はかなり新しいツールであるため、Yeomanスタックおよびyoと統合されています。それでもかなりの量の構成作業が必要です。そのことを念頭に置いて、このチュートリアルをできるだけシンプルに保つつもりで、将来の投稿をAngularJSでのエンドツーエンドのテストを徹底的にカバーすることに専念する予定です。

結論

チュートリアルシリーズのこの時点で、Angularアプリをbowerでスキャフォールディングし、karmaで依存関係を管理し、protractorを使用していくつかのテストを作成/実行する方法を学習しました。および

|_+_|

。ただし、このチュートリアルは、これらのAngularJSツールとプラクティスの紹介としてのみ意図されていることに注意してください。ここでは、それらのいずれも詳細に分析しませんでした。

私たちの目標は、単にあなたがこの道を歩み始めるのを助けることでした。ここから先に進んで、このすばらしいフレームワークとツールスイートについてできる限りのことを学ぶのはあなた次第です。

補遺：著者からのいくつかの（重要な）メモ

このチュートリアルを読んだ後、何人かの人々は尋ねるかもしれません、 '待つ。実際にアプリのコーディングを開始する前に、これらすべてのことを行う必要はありませんか？これはこのチュートリアルの一部であるべきではありませんか？」

それに対する私の短い答えは 番号 。パート1で見たように、最初のAngularアプリをコーディングするために、これらすべてを実際に知る必要はありません。むしろ、この投稿で説明したツールのほとんどは、開発ワークフローを最適化し、テスト駆動開発（TDD）を実践するのに役立つように設計されています。

そしてTDDについて言えば、TDDの最も基本的な概念は確かに健全なものです。つまり、コードを作成する前にテストを作成します。しかし、一部の人々はその概念を行き過ぎています。 TDDは開発手法であり、 ない 学習方法。したがって、 書き込み コードを書く前のテストは非常に理にかなっていますが、 方法を学ぶ コーディング方法を学ぶ前にテストを書くことはしません。

個人的には、これが公式のAngularチュートリアルが非常に複雑に感じられ、フロントエンドのMVC / TDDの経験がない人にとっては従うことがほぼ不可能である主な理由だと思います。それが、私がこのチュートリアルシリーズを始めた主な理由の1つです。

AngularJSの世界をナビゲートすることを学んでいる人たちへの私の個人的なアドバイスは、次のとおりです。 すべてを一度に学ぶ必要はありません（他の方法で言われているにもかかわらず）。他のフロントエンド/テストフレームワークでの以前の経験によっては、AngularJSを最初に理解するのはかなり難しい場合があります。したがって、独自のシンプルなアプリを作成できるようになるまで、学ぶ必要のあるすべてのことを学び、フレームワークの基本に慣れたら、に最適な長期的な開発手法を選択して適用することに関心を持つことができます。君は。

もちろん、それは私の謙虚な意見であり、誰もがそのアプローチに同意するわけではありません（そして、Angular開発チームはこれを公開すると私の後に雇われた殺人者を送るかもしれません）、しかしそれは私のビジョンであり、それはたくさんの人々であると確信しています誰が私に同意するでしょう。

関連： Angular 6チュートリアル：新しいパワーを備えた新機能