ng-japanで新しいRouterの話がありました。新しいRouterはAngular 1系、今週リリースされるであろうAngular 1.4と新しいAngularでもあるAngular 2をサポートしているということです。かつ、使いやすさも整理(?)されています。期待していてくださいというところだと思います。
New Angular Routerの情報はgithubにもありますが、読むだけではつまらないので実際に触ってみます。
「Getting Started」がありますがそのままコピー&ペーストすると動かないのでgithubのサンプルを見つつ使ってみるのが良いかと思います。
インストールと簡単なデモ
実際にインストールしてみました。プロジェクトディレクトリを作成するところから始めます
$ mkdir NewRouter && cd $_ $ npm init $ npm install angular angular-new-router
これで環境は出来上がりです。これにアプリケーションファイルを生成します(このインストールではAngular 1.3を使っています)。
$ touch index.html $ touch app.js
index.html の中身をコーティングします。「Getting Started」とは「router.es5.js」のディレクトリが違うと思います。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <base href="/"> <title>My app</title> </head> <body ng-app="app" ng-controller="AppController as app"> <div ng-viewport></div> <script src="node_modules/angular/angular.js"></script> <script src="node_modules/angular-new-router/dist/router.es5.js"></script> <script src="app.js"></script> <script src="components/home/home.js"></script> </body> </html>
次にapp.jsです
'use strict'; angular.module('app', [ 'app.home', 'ngNewRouter' ]) .controller('AppController', ['$router', AppController]); function AppController ($router) { $router.config([ { path: '/', component: 'home' } ]); }
$router.configの中にコンポーネント定義があります。次のように定義します。まずはファイルの作成から。
$ mkdir -p components/home $ touch components/home/home.html $ touch components/home/home.js
それぞれ次のようにファイルの中身を定義します
<h1>Hello {{home.name}}!</h1>
home.jsは
angular.module('app.home', []) .controller('HomeController', HomeController); function HomeController() { this.name = 'Friend'; }
そうすると次の画面が表示されます。起動にはhttp-serverを利用しています。
ng-viewportの書き方は2つ
ng-viewportは
<div ng-viewport></div>
でも
<ng-viewport></ng-viewport>
どちらでも書けます。
別のページを追加
別のページを追加してみます。detailというコンポーネントを追加します。ブログ中にページとかコンポーネントとか書いてますが、新しいRouterはコンポーネントに紐付きますので表現としてはコンポーネントと言った方が正しいです。
$ mkdir components/detail $ touch components/detail/detail.html components/detail/detail.js
app.jsにコンポーネントを追加します
'use strict'; angular.module('app', [ 'app.home', 'app.detail', 'ngNewRouter' ]) .controller('AppController', ['$router', AppController]); function AppController ($router) { $router.config([ { path: '/', component: 'home' }, { path: '/detail/:id', component: 'detail' } ]); }
detail.htmlは
<p>detail #{{detail.id}}</p>
detail.jsは
angular.module('app.detail', []) .controller('DetailController', DetailController); function DetailController ($routeParams) { this.id = $routeParams.id; }
index.htmlでdetail.jsを読み込ませることを忘れずに.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <base href="/"> <title>My app</title> </head> <body ng-app="app" ng-controller="AppController as app"> <div ng-viewport></div> <script src="node_modules/angular/angular.js"></script> <script src="node_modules/angular-new-router/dist/router.es5.js"></script> <script src="app.js"></script> <script src="components/home/home.js"></script> <script src="components/detail/detail.js"></script> </body> </html>
これで例えばurlを「http://localhost:8000/#/detail/aaa」としたときは
リダイレクト
リダイレクトを定義します
function AppController ($router) { $router.config([ { path: '/', redirectTo: '/home' }, { path: '/home', component: 'home' }, { path: '/detail/:id', component: 'detail' } ]); }
これで「/」リクエストが来たときは「/home」にリダイレクトされます。
リンク
リンクには ng-link を使います。
<ul> <li><a ng-link="home">home</a></li> <li><a ng-link="detail({id: 5})">detail</a></li> </ul>
結果としては、homeをクリックすると
detailをクリックすると
最後に
だいぶ見通しの良いルーターではないかと思います。githubのサイトに色々サンプルがありますので、これから触ってみたいです。一つ不満というか。「ngNewRouter」ですがNewという文字をこういうところに入れるのは如何なものかと。。NewRouterの次はNewNewRouterですか?と言いたくなる。ちょっと残念な名前だなと思ってます。リリースされるときには別の名前になっていることを期待します。
HTML5 Expertsで ng-japan 特集もやってたり
そのスポンサーであるCode IQで問題があったりしてますのでよろしくです。