# 環境初期構築
npm i -g yo bower grunt-cli
# generatorのインストール
npm i -g generator-webapp
# yo コマンドでアプリ開発開始
yo
Created
April 25, 2015 02:48
-
-
Save MSakamaki/b930449d6e9a299f934f to your computer and use it in GitHub Desktop.
Angularハンズオン
bower を用いて angular 1.4 と new routerをインストールしましょう
bower install angular#1.4.0-rc.0 --save
bower install angular-new-router --saveindex.htmlに以下の行を追加
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-new-router/dist/router.es5.js"></script>もう一度grunt serveでアプリケーションを立ち上げて、ブラウザ内で command + option + Iを押し、コンソールを立ち上げる。
angular.versionでangularのバージョンが1.4になってればOK
scripts/main.js
(function(){
'use strict';
function AppController(){}
AppController.$inject = [];
angular.module('app',[
'ngNewRouter'
]).controller('AppController', AppController);
})();
(function(){
'use strict';
function AppController(){
this.hoge = "SAKAMAKI";
}
AppController.$inject = [];
angular.module('app',[
'ngNewRouter'
]).controller('AppController', AppController);
})(); <body ng-app="app">
<div class="container"
ng-controller="AppController as app">
{{app.hoge}}
</div>
view port の設定
<body ng-app="app">
<div class="container"
ng-controller="AppController as app">
<p>ヘッダ
<p><div ng-viewport></div>
<p>フッター
</div>コンポーネント作成
mkdir -p app/components/books
touch app/components/books/books.html app/components/books/books.js
mkdir -p app/components/bookinfo
touch app/components/bookinfo/bookinfo.html app/components/bookinfo/bookinfo.jsindex.htmlに追加
<script src="components/bookinfo/bookinfo.js"></script>
<script src="components/books/books.js"></script>
- main.js
(function(){
'use strict';
function AppController($router){
// $router.config({})
}
AppController.$inject = ['$router'];
AppController.$routeConfig = [{
path: '/', components: 'books'
},{
path: '/info', components: 'bookinfo'
}];
angular.module('app',[
'ngNewRouter'
]).controller('AppController', AppController);
})();- book.js
(function(){
'use strict';
function BooksController(){}
BooksController.$inject = [];
angular.module('app.Books',[
'ngNewRouter'
]).controller('BooksController', BooksController);
})();- bookinfo.js
(function(){
'use strict';
function BookinfoController(){}
BookinfoController.$inject = [];
angular.module('app.bookinfo',[
'ngNewRouter'
]).controller('BookinfoController', BookinfoController);
})();books.htmlとbookinfo.htmlには適当に２つのHTMLが区別できるものを書いてください。
<body ng-app="app">
<div class="container"
ng-controller="AppController as app">
<p>ヘッダ <a ng-link="books">本</a><a ng-link="info">詳細</a>
<p><div ng-viewport></div>
<o>フッター
</div>(function(){
'use strict';
function AppController($router){
// $router.config({})
}
AppController.$inject = ['$router'];
AppController.$routeConfig = [{
path: '/', components: 'books', as: 'books'
},{
path: '/info', components: 'bookinfo', as:'info'
}];
angular.module('app',[
'ngNewRouter',
'app.bookinfo',
'app.Books'
]).controller('AppController', AppController);
})();
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
yo コマンドを打って,Webappを選び、初期構築を行う
注意: yoコマンドを打つディレクトリは注意、そこに大量のファイルができるので、できるだけ空のフォルダの中でやってください
でアプリケーション（Webサイト）が立ち上がります。