簡易サーバの準備

簡易サーバを立てるプラグインをインストールする

node.jsのhttpサーバであるconnectモジュールを用いるため、grunt-contrib-connectをインストールする。

grunt-contrib-connectについては http://qiita.com/ginpei/items/6a3f870da2a9ec043627 が詳しい。

そういえば、前回package.jsonを作ってなかったので、この際作ってしまう。開発用ディレクトリで下記のコマンドを実行する。

npm init

質問は全てデフォルトのまま。エンターを何回か押せばpackage.jsonが作られる。

次に、grunt-contrib-connect をインストールする。

npm install grunt-contrib-connect --save-dev

このプラグインを使うために、Gruntタスクを定義することとする。

Gruntタスクを定義する

grunt-contrib-connectを使ってサーバを立ち上げるためのGruntタスクも定義する。

まずはGruntタスクが実行できるよう、grunt-cliをインストール。グローバルインストールで良いと思う。

npm install grunt-cli -g

エディタで、下記の記述をして、開発用ディレクトリにGruntfile.jsという名前で保存する。

'use strict';

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    connect: {
      hoge:{
        options: {
          base:'public',
          keepalive: true,
          port: 8080
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-connect');
}

Gruntfile.jsの書き方は http://js.studio-kingdom.com/grunt/doc/sample_gruntfile が参考になるだろう。

開発用ディレクトリでgrunt connectを実行すると、hogeの設定に従ってconnectモジュールが起動する。サイト名は適当に付けて構わない。

実行するとこんな感じ。

$ grunt connect
Running "connect:hoge" (connect) task
Waiting forever...
Started connect web server on http://localhost:8080

ブラウザで localhost:8080 にアクセスすると、開発用ディレクトリ直下のpublicディレクトリ内のindex.htmlが表示されるはず。これで、サーバが動いていることを確認した。

UI Routerの入手

UI Routerについては、下記が詳しい。
http://qiita.com/sashimizakana/items/0b03131103a5cd01bfb

前回bowerの導入を扱ったが、UI Routerもbowerを用いて簡単にインストールできる。

bower install angular-ui-router --save

UI Routerを使ってみる

とりあえず、開発用ディレクトリの下にviewsというフォルダを作成し、home.htmlとsub.htmlを作成。中身は適当。

また同様に、開発用ディレクトリにapp.jsを作る。中身は次のような感じ。UI Routerを用いる場合のモジュール定義としては、オーソドックスな書き方だと思う。

'use strict';

var myApp = angular.module('MyApp',['ngMaterial','ui.router']);

myApp.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise('/');

  $stateProvider.state('home',{
    url:'/',
    views:{
      panel:{
        templateUrl:'./views/home.html'
      }
    }
  }).state('sub',{
    url:'/sub',
    views:{
      panel:{
        templateUrl:'./views/sub.html'
      }
    }
  });
}]);

index.htmlはこんな感じ。

<html lang="en" ng-app="MyApp">
  <head>
    <link rel="stylesheet" href="./components/angular-material/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <link rel="stylesheet" href="./hello.css">
    <meta name="viewport" content="initial-scale=1" />
  </head>
  <body>
    <h1>Hello</h1>
    <div ui-view="panel"></div>

    <!-- Angular Material Dependencies -->
    <script src="./components/angular/angular.min.js"></script>
    <script src="./components/angular-animate/angular-animate.min.js"></script>
    <script src="./components/angular-aria/angular-aria.min.js"></script>
    <script src="./components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="./components/angular-material/angular-material.min.js"></script>
    <script src="./app.js"></script>
  </body>
</html>

前回Angular Materialを扱ったこともあって、そのあたりのjsファイルの読み込み部分が残っているが、今はあまり気にしなくて良い。また、モジュール名をMyAppとしたので、ng-appの属性値もMyAppにした。bodyのng-controller属性は、使用しないため消しておいた。

ブラウザで localhost:8080 にアクセスすると localhost:8080/#/ にリダイレクトされ、ブラウザ上では、Helloの文字下にhome.htmlで書いた内容が表示される。また、localhost:8080/#/sub にアクセスすると、ブラウザ上では、Helloの文字下にsub.htmlで書いた内容が表示される。

UI Routerは動いているようだ。

まとめ

bowerを使えば、Angular UI RouterというAngularのモジュールもインストールできる。

追記(直しどころ)

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

Gruntで簡易サーバを立て、bowerでAngular UI Routerを導入し、動作を確認する