Yeoman+angularを試してみた

582 views
535 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
582
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Yeoman+angularを試してみた

  1. 1. Yeoman+Angular? Yeoman+Angular 導入記録
  2. 2. Yeomanとは? http://yeoman.io/ からの抜粋 “The web's scaffolding tool for modern webapps” らしい。 yeoman = (名詞)昔、王族貴族に仕えていた従者 scaffold = (動詞)足場を設ける モダンなWebappsのための、Webの足場を設けるツール? 訳わかんねww
  3. 3. モダンなwebappを作る流れ Yeomanの説明抜粋 必要なライブラリを自動で取得して、ビルドま でしてくれる、すばらしい(モダンなWebappでは、CSSをプログラム的に書いてビルド(Sass)やjavascriptモジュールのテストを行う(grunt)がふつうらしい。初めて知った)
  4. 4. 何すれば良い? まずは必要な環境を整備しましょ。 ・npm(node.js)のインストール https://www.npmjs.org/ ・Yeomanのインストール http://yeoman.io/ npm install -g yo (グローバル領域にYeomanのインストール) npm install -g grunt-cli bower (グローバル領域にgrunt/bowerのインストール) npm install -g generator-webapp (グローバル領域にyeoman用ジェネレータをイ ンストール)
  5. 5. 今回はAngularを使うよ Angularとは? https://angularjs.org/ Googleが作っているJavaScriptライブラリ。 ページ切り替えをせずにすべて1つのページとして構築するSPA(Single Page Application)を作るのに向いてるライブラリ。 最近流行のMVCモデルJavaScriptライブラリ(Backbone.jsとか)の1つで勢い があります。
  6. 6. AngularをYeomanで使う angular用ジェネレータをインストール npm install -g generator-agunalr (グローバル領域にangularジェネレータをインストール)
  7. 7. モダンなWebアプリプロジェクトを作る 適当に作ったフォルダでangular-generatorから、プロジェクトを作成する yo angular ※今回、Compass(CSSのビルド)は設定が複雑だったので除外。
  8. 8. プロジェクトを動かす これも、yeoman(grunt)がやってくれます grunt serve =>ビルド&サーバー起動&ブラウザ起動してくれます
  9. 9. アプリの構築はここまで ここからはAngular特有のお話
  10. 10. SPA(SinglePageApplication) 普通のページ GET /index.html リンククリック (information.htmlへ移 動!) GET /information.html ページ取得をブラウザが行い、描画 する。(通常のページ移動) そのため、戻るボタンで前のページ に戻る事ができる。
  11. 11. SAP(Single Page Application) SAPのページ GET /index.html リンククリック (information.htmlを Angularが取得!) GET /information.html ページ取得をライブラリ(AngularJS) が行い、描画する。(具体的には Ajaxを使う)
  12. 12. Angularの作り MVCモデルで具体的には、Template/Model/Viewで構成される。 詳細は今回の対象外ですが、Angular本家にチュートリアルとかあります。
  13. 13. 新規ページを作るには? app.jsの修正ならびに新規ページのテンプレート作ればおk! [app.js] yo angularで作ったディレクトリの/scriptsにあるよ L16で新しいroutProvider(ページ遷移)を指定。 /testにアクセスがあったら、views/test.htmlを 読み込んで、TestCtrlというJavaScriptの関数を ロードしてね♩
  14. 14. 新規ページを作るには? app.jsで指定したテンプレートファイルを作成して実行!
  15. 15. まとめ ・モダンWebアプリを作りには環境構築が大変 ・Yeomanを使って楽をしましょう。 ・環境はnpmを使って一括に入れましょう。 ・最近流行のMVCモデルライブラリにも対応 ・ライブラリ取得/ビルド/テストはYeomanに任 せましょう

×