Angular
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
-[[Angular:https://angular.io]]
--[[Augular APIリファレンス:https://angular.io/docs/ts/la...
--[[LEARNING ANGULAR:https://angular.io/docs/ts/latest/gu...
--[[TUTORIAL: TOUR OF HEROES:https://angular.io/docs/ts/l...
---[[Angluar2のクイックスタートとチュートリアルを実施 - ...
---[[Angluar2のクイックスタートとチュートリアルを実施 - ...
---[[Angluar2のクイックスタートとチュートリアルを実施 - ...
---[[Angluar2のクイックスタートとチュートリアルを実施 - ...
---[[Angluar2のクイックスタートとチュートリアルを実施 - ...
---[[Angluar2のクイックスタートとチュートリアルを実施 - ...
---[[Angluar2のクイックスタートとチュートリアルを実施 - ...
-[[書籍「Angular2によるモダンWeb開発 TypeScriptを使った基...
-[[Angular2のLifecycle Hooksを理解する:http://blog.yuhiis...
-[[Angularの次バージョンは「Angular 4」に、2017年3月リリ...
-GoogleのAngular チームによって開発が進められているウェブ...
-プログラミング言語としては、マイクロソフトが設計及び開発...
-パッチは毎週リリースする予定で、マイナーバージョンは毎月...
*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できるので、複雑な依存関...
-[[Angular2のDIを知る:http://qiita.com/laco0416/items/61e...
-[[Promises for asynchronous programming page of Explorin...
-[[Promiseを使おう:http://qiita.com/teyosh/items/d7d3c17f...
**データバインド [#u6552ea4]
-データの入出力に関連するコードを大幅に減らす
-Angular独自の拡張HTMLであるテンプレートシンタックスで定義
-データの出力を行う「片方向データバインド」と、データの入...
*Angular開発の作業項目 [#wbc975aa]
-Angular CLIを使えば、コマンドで下記の大部分を行ってくれる
+開発開始前
--Angular本体と依存モジュールの入手 ... package.jsonの作...
--プロジェクトの雛形作成 ... 公開されている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/]] ... ...
-[[ngx-bootstrap:http://valor-software.com/ngx-bootstrap/...
-[[ng-lightning:https://ng-lightning.github.io/ng-lightni...
-[[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）と開発時に必要な依存ライブ...
--細かなバージョン指定も可能（メジャーまで指定／マイナー...
-moduleのローカルインストール時に --save オプションを付け...
*Angular CLI [#h87f7ff6]
-[[Angular CLIによるAngular2入門 / Angular2アプリを爆速開...
-[[Angular-CLI で Angular 2 環境を構築する:http://smart.a...
*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-Extensio...
-[[Angular2のHttpモジュールを眺めてベストプラクティスを考...
-[[AngularでAsync pipeを使う:http://christina04.hatenablo...
*統合開発環境 [#db02114e]
**Visual Studio Code [#j8b9bb37]
-[[Develop Angular2 Application using Visual Studio Code ...
-[[Develop Angular2 Application using Visual Studio Code ...
-[[Develop Angular2 Application using Visual Studio Code ...
***プロジェクト作成からVisual Studio Codeで開発を始めるま...
-Visual Studio Code をインストール
-Visual Studio Code に拡張機能「Debugger for Chrome」をイ...
-プロジェクト群を配置するフォルダで以下を実行
$ ng new [プロジェクト]
-以下の内容で、[プロジェクト]/.vscode/launch.json ファイ...
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, wi...
"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アプリケーションを作っ...
-[[ウェブ制作にはWebStormがお勧め！ 使いこなせば操作が爆...
**Chrome Developer Tools [#cca00b36]
-[[Web開発でよく使う、特に使えるChromeデベロッパー・ツー...
-主に使う機能は以下の通り
--HTMLのデバッグ
--CSSのデバッグ
--プログラム（JavaScript, TypeScript）のデバッグ
--通信のデバッグ
--コンソール表示
--ブラウザ内の保存データ表示
--モバイルデバイスの表示シミュレーション
**Angury [#z4260adc]
-[[Angury:https://augury.angular.io/]]
-Angularのコンポーネントをデバッグするために作られた専用...
-コンポーネントのプロパティ表示とプロパティの値を手動で変...
-コンポーネントの変更や調整を繰り返すときに役立つ
*テスト [#p2ae30c0]
**Karma [#fde0d7f3]
**E2E [#g2e60f98]
*リリース [#r7d1dbb4]
-以下のコマンドでビルド => dist フォルダにファイルが作ら...
$ ng build --prod -bh [Webサーバ上のパス]
-- http://hoge.com/app/test01/ 上に配置するなら -bh /app/...
-dist フォルダのファイルをWebサーバにアップロード
*モバイルアプリ [#vbe3298e]
-[[Angular 2 NativeScript Vs. React Native:http://blog.ba...
**Angular + React Native [#r4a471fc]
-[[react-native-renderer:http://angular.github.io/react-n...
-[[入門3日目の僕が感じたAngular 2のすごいところ:http://bl...
-[[Angular 2とReact Nativeの組み合わせ:https://www.infoq....
**Angular + NativeScript [#o40059fd]
-[[Native Script:https://www.nativescript.org]]
-[[キミはNativeScriptを知っているか？Angular2でネイティブ...
*Tips [#f97ae414]
-[[CORSまとめ:http://qiita.com/tomoyukilabs/items/81698ed...
-[[JSON形式のWeb APIにアクセスするには？（$http）:http://...
-[[Angular 2アンチパターン集:http://qiita.com/armorik83/i...
-[[コンポーネント間のデータ授受メモ:http://qiita.com/gamb...
-[[AngularでAsync pipeを使う:http://christina04.hatenablo...
*その他 [#q1355dac]
-[[Angular2でさくっとMEANスタックをはじめてみる:http://ww...
終了行:
-[[Angular:https://angular.io]]
--[[Augular APIリファレンス:https://angular.io/docs/ts/la...
--[[LEARNING ANGULAR:https://angular.io/docs/ts/latest/gu...
--[[TUTORIAL: TOUR OF HEROES:https://angular.io/docs/ts/l...
---[[Angluar2のクイックスタートとチュートリアルを実施 - ...
---[[Angluar2のクイックスタートとチュートリアルを実施 - ...
---[[Angluar2のクイックスタートとチュートリアルを実施 - ...
---[[Angluar2のクイックスタートとチュートリアルを実施 - ...
---[[Angluar2のクイックスタートとチュートリアルを実施 - ...
---[[Angluar2のクイックスタートとチュートリアルを実施 - ...
---[[Angluar2のクイックスタートとチュートリアルを実施 - ...
-[[書籍「Angular2によるモダンWeb開発 TypeScriptを使った基...
-[[Angular2のLifecycle Hooksを理解する:http://blog.yuhiis...
-[[Angularの次バージョンは「Angular 4」に、2017年3月リリ...
-GoogleのAngular チームによって開発が進められているウェブ...
-プログラミング言語としては、マイクロソフトが設計及び開発...
-パッチは毎週リリースする予定で、マイナーバージョンは毎月...
*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できるので、複雑な依存関...
-[[Angular2のDIを知る:http://qiita.com/laco0416/items/61e...
-[[Promises for asynchronous programming page of Explorin...
-[[Promiseを使おう:http://qiita.com/teyosh/items/d7d3c17f...
**データバインド [#u6552ea4]
-データの入出力に関連するコードを大幅に減らす
-Angular独自の拡張HTMLであるテンプレートシンタックスで定義
-データの出力を行う「片方向データバインド」と、データの入...
*Angular開発の作業項目 [#wbc975aa]
-Angular CLIを使えば、コマンドで下記の大部分を行ってくれる
+開発開始前
--Angular本体と依存モジュールの入手 ... package.jsonの作...
--プロジェクトの雛形作成 ... 公開されている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/]] ... ...
-[[ngx-bootstrap:http://valor-software.com/ngx-bootstrap/...
-[[ng-lightning:https://ng-lightning.github.io/ng-lightni...
-[[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）と開発時に必要な依存ライブ...
--細かなバージョン指定も可能（メジャーまで指定／マイナー...
-moduleのローカルインストール時に --save オプションを付け...
*Angular CLI [#h87f7ff6]
-[[Angular CLIによるAngular2入門 / Angular2アプリを爆速開...
-[[Angular-CLI で Angular 2 環境を構築する:http://smart.a...
*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-Extensio...
-[[Angular2のHttpモジュールを眺めてベストプラクティスを考...
-[[AngularでAsync pipeを使う:http://christina04.hatenablo...
*統合開発環境 [#db02114e]
**Visual Studio Code [#j8b9bb37]
-[[Develop Angular2 Application using Visual Studio Code ...
-[[Develop Angular2 Application using Visual Studio Code ...
-[[Develop Angular2 Application using Visual Studio Code ...
***プロジェクト作成からVisual Studio Codeで開発を始めるま...
-Visual Studio Code をインストール
-Visual Studio Code に拡張機能「Debugger for Chrome」をイ...
-プロジェクト群を配置するフォルダで以下を実行
$ ng new [プロジェクト]
-以下の内容で、[プロジェクト]/.vscode/launch.json ファイ...
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, wi...
"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アプリケーションを作っ...
-[[ウェブ制作にはWebStormがお勧め！ 使いこなせば操作が爆...
**Chrome Developer Tools [#cca00b36]
-[[Web開発でよく使う、特に使えるChromeデベロッパー・ツー...
-主に使う機能は以下の通り
--HTMLのデバッグ
--CSSのデバッグ
--プログラム（JavaScript, TypeScript）のデバッグ
--通信のデバッグ
--コンソール表示
--ブラウザ内の保存データ表示
--モバイルデバイスの表示シミュレーション
**Angury [#z4260adc]
-[[Angury:https://augury.angular.io/]]
-Angularのコンポーネントをデバッグするために作られた専用...
-コンポーネントのプロパティ表示とプロパティの値を手動で変...
-コンポーネントの変更や調整を繰り返すときに役立つ
*テスト [#p2ae30c0]
**Karma [#fde0d7f3]
**E2E [#g2e60f98]
*リリース [#r7d1dbb4]
-以下のコマンドでビルド => dist フォルダにファイルが作ら...
$ ng build --prod -bh [Webサーバ上のパス]
-- http://hoge.com/app/test01/ 上に配置するなら -bh /app/...
-dist フォルダのファイルをWebサーバにアップロード
*モバイルアプリ [#vbe3298e]
-[[Angular 2 NativeScript Vs. React Native:http://blog.ba...
**Angular + React Native [#r4a471fc]
-[[react-native-renderer:http://angular.github.io/react-n...
-[[入門3日目の僕が感じたAngular 2のすごいところ:http://bl...
-[[Angular 2とReact Nativeの組み合わせ:https://www.infoq....
**Angular + NativeScript [#o40059fd]
-[[Native Script:https://www.nativescript.org]]
-[[キミはNativeScriptを知っているか？Angular2でネイティブ...
*Tips [#f97ae414]
-[[CORSまとめ:http://qiita.com/tomoyukilabs/items/81698ed...
-[[JSON形式のWeb APIにアクセスするには？（$http）:http://...
-[[Angular 2アンチパターン集:http://qiita.com/armorik83/i...
-[[コンポーネント間のデータ授受メモ:http://qiita.com/gamb...
-[[AngularでAsync pipeを使う:http://christina04.hatenablo...
*その他 [#q1355dac]
-[[Angular2でさくっとMEANスタックをはじめてみる:http://ww...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
