AngularJSアプリケーション開発ガイドという本を買って勉強中です。今、全体の20%くらいしか呼んでませんが、だいぶ全体像がつかめてきました。
バージョンが古いのか、Changing Views with Routes and $locationという章のサンプルコードがうまく動かなかったので、動くようにしました。
この章では、ページ遷移なしで、画面を遷移させましょうというのが主題でした。
必要になるファイルは
の三点。
目次
Railsなどのフレームワークを利用している方は、ご存知だと思いますが、URLを解釈して、どのページを表示させるか判断する処理をルーティングといいます。AngularJSにもこの機能が備わっています。
まずは、ルーティングを可能にするangular-route.jsを読み込みます。
<!DOCTYPE html>
<html ng-app="MainApp">
<head>
<meta charset="utf-8">
<title>ほげほげ</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
<!--
ここの１行がなかった！これによってルーティングができるようになります。
-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- ng-viewが指定されたタグの内部がルーティングによって変化する -->
<div ng-view></div>
</body>
</html>次に、このモジュールはルーティングの機能を使います、と宣言します。
// ngRouteがルーティングの機能を司る
const MainApp = angular.module('MainApp', ['ngRoute']);次にルーティングのルールを記述していきます。
URLの文字列と、それに対応するController(mainCtrl)とtemplateUrl(view1.html, view2.html)を指定してあげます。
const MainApp = angular.module('MainApp', ['ngRoute']);
MainApp.config(function($routeProvider){ // ngRouteの$routeProviderが使える。
$routeProvider.
when('/', { // '/'にアクセスされたときは
controller: 'mainsCtrl', // mainsCtrlを使って
templateUrl: 'view1.html', // view1.htmlの中身をng-viewの中に入れる。
}).
when('/view2',{ // 以下同様につなげられる。
controller: 'mainsCtrl',
templateUrl: 'view2.html',
}).
otherwise({ // 上のものに該当しなかった場合は
redirectTo: '/' // '/'にリダイレクト
});
});
MainApp.controller('mainsCtrl', function($http, $scope){
// いい感じの処理。
});あとはview1.htmlとview2.htmlを書いていくだけです。
<h1>view1</h1>
<a ng-href="#/view2">view2へ</a><h1>view2</h1>
<a ng-href="#/view1">view1へ</a>こんなに簡単に画面の再ロードなしの画面遷移ができると楽しいです。
これだけではWebシステムは作れないですが、簡単なスムーズに動く軽いWebサイトを作るのには十分だと思います。
ぜひ、チャレンジしてみてください！