albatrosary's blog

UI/UXとエンタープライズシステム

結構見通しの良いAngularのNew Routerを触る

ng-japanで新しいRouterの話がありました。新しいRouterはAngular 1系、今週リリースされるであろうAngular 1.4と新しいAngularでもあるAngular 2をサポートしているということです。かつ、使いやすさも整理(?)されています。期待していてくださいというところだと思います。

New Angular Routerの情報はgithubにもありますが、読むだけではつまらないので実際に触ってみます。

f:id:albatrosary:20150329180426p:plain

「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を利用しています。

f:id:albatrosary:20150329181746p:plain

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」としたときは

f:id:albatrosary:20150329185705p:plain

リダイレクト

リダイレクトを定義します

function AppController ($router) {
  $router.config([
    { path: '/', redirectTo: '/home' },
    { path: '/home', component: 'home' },
    { path: '/detail/:id', component: 'detail' }
  ]);
}

これで「/」リクエストが来たときは「/home」にリダイレクトされます。

f:id:albatrosary:20150329190600p:plain

リンク

リンクには ng-link を使います。

  <ul>
    <li><a ng-link="home">home</a></li>
    <li><a ng-link="detail({id: 5})">detail</a></li>
  </ul>

結果としては、homeをクリックすると

f:id:albatrosary:20150329194036p:plain

detailをクリックすると

f:id:albatrosary:20150329194050p:plain

最後に

だいぶ見通しの良いルーターではないかと思います。githubのサイトに色々サンプルがありますので、これから触ってみたいです。一つ不満というか。「ngNewRouter」ですがNewという文字をこういうところに入れるのは如何なものかと。。NewRouterの次はNewNewRouterですか?と言いたくなる。ちょっと残念な名前だなと思ってます。リリースされるときには別の名前になっていることを期待します。

github.com

HTML5 Expertsで ng-japan 特集もやってたり

html5experts.jp

そのスポンサーであるCode IQで問題があったりしてますのでよろしくです。

知ってる?AngularJS雑学 | CodeIQ