![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2017-05-05T06:27:17+00:00","default:admin","admin") #author("2017-05-05T06:27:29+00:00","default:admin","admin") -[[Angular:https://angular.io]] --[[Augular APIリファレンス:https://angular.io/docs/ts/latest/api/]] --[[LEARNING ANGULAR:https://angular.io/docs/ts/latest/guide/learning-angular.html]] --[[TUTORIAL: TOUR OF HEROES:https://angular.io/docs/ts/latest/tutorial/]] ... まずはこれで学習しよう！ ---[[Angluar2のクイックスタートとチュートリアルを実施 - その1:http://qiita.com/gambare/items/e52b49c09890e1180610]] ---[[Angluar2のクイックスタートとチュートリアルを実施 - その2:http://qiita.com/gambare/items/52ab19f8937ffc228cec]] ---[[Angluar2のクイックスタートとチュートリアルを実施 - その3:http://qiita.com/gambare/items/a9fd17999b9192e99cd7]] ---[[Angluar2のクイックスタートとチュートリアルを実施 - その4:http://qiita.com/gambare/items/bd14e8f36cc40194c5dd]] ---[[Angluar2のクイックスタートとチュートリアルを実施 - その5:http://qiita.com/gambare/items/fa1416cf2d2973cd270e]] ---[[Angluar2のクイックスタートとチュートリアルを実施 - その6:http://qiita.com/gambare/items/3585c57860e9f15120ff]] ---[[Angluar2のクイックスタートとチュートリアルを実施 - その7:http://qiita.com/gambare/items/d35241a7d7fe7b7768ed]] -[[書籍「Angular2によるモダンWeb開発 TypeScriptを使った基本プログラミング」サポートサイト:http://ec.nikkeibp.co.jp/item/books/P96530.html]] -[[Angular2のLifecycle Hooksを理解する:http://blog.yuhiisk.com/archive/2016/05/02/angular2-lifecycle-hooks.html]] -[[Angularの次バージョンは「Angular 4」に、2017年3月リリース。今後は単に「Angular」と呼んでほしいと:http://www.publickey1.jp/blog/16/angularangular_420173angular.html]] -GoogleのAngular チームによって開発が進められているウェブアプリケーションプラットフォーム -プログラミング言語としては、マイクロソフトが設計及び開発した TypeScript を使う -パッチは毎週リリースする予定で、マイナーバージョンは毎月、そして6カ月ごとにメジャーリリースを行う *Angular CLI [#f16e2c7d] -[[Angular CLI:https://cli.angular.io]] *モダンWebとは [#n988ec71] -サーバ集中型の処理をブラウザ側へ分散する -通信待ちのない高速な画面遷移、ネットワーク圏外での利用、サーバやネットワークの不可軽減を実現 -データやプログラムはサーバで集中管理 **メリット [#l2240409] +サーバとの通信頻度が減少 --サーバとネットワークの負荷軽減によるインフラコストの削減 --ユーザ数増加に伴うレスポンス低下の緩和 +ブラウザ内にデータとプログラムを保存できる --ネットワーク圏外での利用が可能 --通信待ちのない高速な画面遷移（例：Googleマップ） --モバイル利用時もストレスなく利用できる +ブラウザ内でデータ処理ができる --容量制限のないデータ表示（無限スクロール） --グラフなどを使ったデータのビジュアル表示 --サーバへ送信する前のデータ縮小処理 --処理結果を即座に返すアプリ *Angularの特長 [#y46ced74] -コンポーネント、DI（依存性の注入）、データバインドを独自の方法で実装 -開発ツールやテストツールを統合し、作業の自動化で開発時間の短縮を図っている **コンポーネント [#id449bae] -一般的に「Web Components」と呼ばれる実装技術 -一画面で使用されるHTML、CSS、TypeScriptを分割してコンポーネント（部品化） -コンポーネント化により大規模開発における開発生産性と保守性の向上を実現 -これにより、同じ表示部分を持つ別画面での再利用や複雑な画面の機能分割が可能に -Angularは、コンポーネントを実現するため、独自の方法でCSSの適用範囲をコンポーネント内に限定するカプセル化機能を実装している **DI（依存性の注入） [#td3496f4] -部品化を進めると面倒になってくる依存クラスの管理を容易にする -依存クラスのインスタンス管理 --初めて呼び出されたときに依存クラスのインスタンス化を行う --コンポーネントの生成・破棄のライフサイクルとは関係なく、依存クラスのインスタンスを保持 --依存クラスが必要なコンポーネントの生成時に、保持したインスタンスを渡す --依存クラス自身も依存クラスをDIできるので、複雑な依存関係にあるクラスのインスタンス化もDIが解決してくれる -[[Angular2のDIを知る:http://qiita.com/laco0416/items/61eed550d1f6070b36ab]] -[[Promises for asynchronous programming page of Exploring ES6.:http://exploringjs.com/es6/ch_promises.html]] -[[Promiseを使おう:http://qiita.com/teyosh/items/d7d3c17f954318c88882]] **データバインド [#u6552ea4] -データの入出力に関連するコードを大幅に減らす -Angular独自の拡張HTMLであるテンプレートシンタックスで定義 -データの出力を行う「片方向データバインド」と、データの入出力両方を行う「双方向データバインド」の2種類がある *Angular開発の作業項目 [#wbc975aa] -Angular CLIを使えば、コマンドで下記の大部分を行ってくれる +開発開始前 --Angular本体と依存モジュールの入手 ... package.jsonの作成、nom install 実行 --プロジェクトの雛形作成 ... 公開されているAngularプロジェクトの雛形をコピーして加工または手作業で新規作成 --開発ツールの準備 ---TypeScriptコンパイラのインストールと設定 ---Webpackモジュールハンドラのインストールと設定 ---Karma単体テストツールの実行環境構築 ---Protractor E2E（End to End）テストツールの実行環境構築 ---開発用Webサーバのインストールと設定 +プログラム実装中 --TypeScriptの文法とコード規約遵守のチェック --TypeScriptからJavaScriptへ変換 --テスト用実行モジュール生成とデバッグ用マップファイルの作成 --index.htmlのscript要素の編集 --開発用Webサーバへコンテンツ転送と起動 +テスト時 --単体テストの実施と結果確認 --E2Eテストの実施と結果確認 +リリース時 --コンポーネントのHTMLテンプレートの事前コンパイル --不要コード、重複コードの削除 --モジュールの圧縮 *推奨UIライブラリ [#g228547c] -[[ANGULAR RESOURCES:https://angular.io/resources/]] ... UI Components の項目を参照 -[[ngx-bootstrap:http://valor-software.com/ngx-bootstrap/#/]] -[[ng-lightning:https://ng-lightning.github.io/ng-lightning/#/]] -[[PrimeNG:https://www.primefaces.org/primeng/#/]] -[[SemanticUI:https://semantic-ui.com]] -[[Vaadin:https://vaadin.com/home]] -[[Wijmo:http://wijmo.c1.grapecity.com]] -[[OnsenUI:https://ja.onsen.io]] ... モバイルアプリ用 *パッケージ管理 [#l68cfb1c] -パッケージ管理ツールとして npm を使用 -依存情報は package.json に記述 -必須ライブラリ（dependencies）と開発時に必要な依存ライブラリ（devDependencies）に分けて定義 --細かなバージョン指定も可能（メジャーまで指定／マイナーまで指定／パッチまで指定） -moduleのローカルインストール時に --save オプションを付けると、そのモジュール情報がアプリケーションのプロジェクトフォルダにある package.json に自動追記される *Angular CLI [#h87f7ff6] -[[Angular CLIによるAngular2入門 / Angular2アプリを爆速開発:http://qiita.com/kitfactory/items/c95ca84371670b21f4ac]] -[[Angular-CLI で Angular 2 環境を構築する:http://smart.ataglance.jp/2016-06-30-build-angular-2-environment-by-angular-cli/]] *Angularの構成 [#h6d96010] **ファイル構成 [#rfec7280] -dist ... ビルド出力先 -e2e ... E2Eテスト -node_modules ... npmモジュール -src ... ソースコード --app ... ソースコード ---app.component.css ... コンポーネントが読み込むCSS ---app.component.html ... コンポーネントが読み込むHTMlテンプレート ---app.component.spec.ts ... 単体テストファイル ---app.component.ts ... コンポーネントファイル ---app.module.ts ... モジュールファイル ---index.ts ... appフォルダ内のインデックス --assets ... ビルド加工なしで出力するファイル --environments ... 開発環境、本番環境の区別 --index.html ... index.html の雛形 --main.ts ... アプリの起動ファイル --styles.css ... アプリ全体に適用するCSS --test.ts ... 単体テスト --tsconfig.json ... TypeScriptのコンパイル条件設定 --typings.d.ts ... TypeScriptのための型情報 -.editconfig ... Editor設定 -.gitignore ... git管理対象外設定 -angular-cli.json ... -karma.code.js ... 単体テスト設定 -package.json ... npmパッケージ設定 -protactor.conf.js ... E2Eテスト設定 -README.md ... Readmeファイル -tslint.json ... コード規約ルール設定 **処理の流れ [#zfab938a] +index.htmlの読み込み +src/main.tsの読み込み +src/app/index.tsの呼び出し +src/app/app.module.tsの呼び出し +src/app/app.component.tsの呼び出し +src/app/app.component.htmlの読み込み +src/app/app.component.cssの読み込み *Angular頻出クラス [#h7d9ba84] **OnInit [#k35a0a50] -データバインドされた入力値を初期化後に実行 **Router [#j3d38c16] **Observable [#x821fe1c] -[[Observable object:https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/observable.md]] -[[Angular2のHttpモジュールを眺めてベストプラクティスを考える:http://qiita.com/laco0416/items/364c5923f77458c468ac]] -[[AngularでAsync pipeを使う:http://christina04.hatenablog.com/entry/2017/03/11/112144]] *統合開発環境 [#db02114e] **Visual Studio Code [#j8b9bb37] -[[Develop Angular2 Application using Visual Studio Code - 1:https://www.codeproject.com/Tips/1155411/Develop-Angular-Application-using-Visual-Studio]] -[[Develop Angular2 Application using Visual Studio Code - 2:https://www.codeproject.com/tips/1155617/develop-angular-application-using-visual-stuido]] -[[Develop Angular2 Application using Visual Studio Code - 3:https://www.codeproject.com/tips/1156418/develop-angular-application-using-visual-studio]] ***プロジェクト作成からVisual Studio Codeで開発を始めるまでの流れ [#j9e074ae] -Visual Studio Code をインストール -Visual Studio Code に拡張機能「Debugger for Chrome」をインストール -プロジェクト群を配置するフォルダで以下を実行 $ ng new [プロジェクト] -以下の内容で、[プロジェクト]/.vscode/launch.json ファイルを作成 { "version": "0.2.0", "configurations": [ { "name": "Launch Chrome against localhost, with sourcemaps", "type": "chrome", "request": "launch", "url": "http://localhost:4200", "sourceMaps": true, "diagnosticLogging": true, "webRoot": "${workspaceRoot}/dist", "sourceMapPathOverrides": { "webpack:///*": "/*" } }, { "name": "Attach to Chrome, with sourcemaps", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, "diagnosticLogging": true, "webRoot": "${workspaceRoot}/src/app", "sourceMapPathOverrides": { "webpack:///*": "/*" } } ] } -Visual Studio Codeで [プロジェクト] のフォルダを指定して開く -[プロジェクト]のフォルダで以下のコマンドを実行 $ npm start -デバッグ実行 -Chromeの「デベロッパーツール」で実行状況がモニタできる **WebStorm [#y94d6f16] -[[WebStromとAngular CLIでAngular2アプリケーションを作ってみよう:http://qiita.com/kawakami-kazuyoshi/items/f08c841f49d05bf735da]] -[[ウェブ制作にはWebStormがお勧め！ 使いこなせば操作が爆速になる機能のまとめ:https://ics.media/entry/11642]] **Chrome Developer Tools [#cca00b36] -[[Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能:http://www.buildinsider.net/web/chromedevtools/01]] -主に使う機能は以下の通り --HTMLのデバッグ --CSSのデバッグ --プログラム（JavaScript, TypeScript）のデバッグ --通信のデバッグ --コンソール表示 --ブラウザ内の保存データ表示 --モバイルデバイスの表示シミュレーション **Angury [#z4260adc] -[[Angury:https://augury.angular.io/]] -Angularのコンポーネントをデバッグするために作られた専用ツール（Cheomeの拡張機能） -コンポーネントのプロパティ表示とプロパティの値を手動で変更して表示の変化をリアルタイムに確認できる -コンポーネントの変更や調整を繰り返すときに役立つ *テスト [#p2ae30c0] **Karma [#fde0d7f3] **E2E [#g2e60f98] *リリース [#r7d1dbb4] -以下のコマンドでビルド => dist フォルダにファイルが作られる $ ng build --prod -bh [Webサーバ上のパス] -- http://hoge.com/app/test01/ 上に配置するなら -bh /app/test01/ ... これを指定しないと正常に動作しない -dist フォルダのファイルをWebサーバにアップロード *モバイルアプリ [#vbe3298e] -[[Angular 2 NativeScript Vs. React Native:http://blog.backand.com/angular-2-nativescript-vs-react-native/]] **Angular + React Native [#r4a471fc] -[[react-native-renderer:http://angular.github.io/react-native-renderer/]] -[[入門3日目の僕が感じたAngular 2のすごいところ:http://blog.teratail.com/entry/angular2_nyumon]] -[[Angular 2とReact Nativeの組み合わせ:https://www.infoq.com/jp/news/2016/04/angular2-react-native]] **Angular + NativeScript [#o40059fd] -[[Native Script:https://www.nativescript.org]] -[[キミはNativeScriptを知っているか？Angular2でネイティブモバイルアプリが書けるぞ！:https://html5experts.jp/albatrosary/20691/]] *Tips [#f97ae414] -[[CORSまとめ:http://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34]] ... CORS (Cross-Origin Resource Sharing) を使うと外部APIにアクセスできる、かも -[[JSON形式のWeb APIにアクセスするには？（$http）:http://www.buildinsider.net/web/angularjstips/0037]] -[[Angular 2アンチパターン集:http://qiita.com/armorik83/items/90b60fae2622f7c1f1a2]] -[[コンポーネント間のデータ授受メモ:http://qiita.com/gambare/items/b75f9c9dc997ae45c092]] -[[AngularでAsync pipeを使う:http://christina04.hatenablog.com/entry/2017/03/11/112144]] *その他 [#q1355dac] -[[Angular2でさくっとMEANスタックをはじめてみる:http://www.techscore.com/blog/2016/12/22/angular2%E3%81%A7%E3%81%95%E3%81%8F%E3%81%A3%E3%81%A8mean%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF%E3%82%92%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%BF%E3%82%8B -[[Angular2でさくっとMEANスタックをはじめてみる:http://www.techscore.com/blog/2016/12/22/angular2%E3%81%A7%E3%81%95%E3%81%8F%E3%81%A3%E3%81%A8mean%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF%E3%82%92%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%BF%E3%82%8B]]
