angularjs学習(ページ切り替え)
マニュアル見たけどいつの間にか勉強しなくなっていたので再度学習
angularjsはなんかマニュアルが最近増えて来たのでもう一度勉強
実装
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="css/app.css" /> <script type="text/javascript" src="lib/jquery/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="lib/angularjs/angular.min.js"></script> <script type="text/javascript" src="lib/angularjs/angular-resource.min.js"></script> <script type="text/javascript" src="lib/angularjs/angular-route.min.js"></script> <script type="text/javascript" src="lib/angularjs/angular-animate.min.js"></script> <script type="text/javascript" src="js/app.js"></script> <title></title> <base href="/angularjs-sample/" /> </head> <body ng-app="myApp"> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="page1">page1</a></li> <li><a href="page2">page2</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container"> <div id="main" ng-view class="view-demo"></div> </div><!-- /.container --> </body> </html>
※ドキュメントルート直下以外の場合はbaseタグでurlを指定
template/main.htm
<div class="content"> main = {{ data }} </div>
template/page1.htm
<div class="content"> page1 = {{ data }} </div> <div> aaaaaaaaa </div> <div> aaaaaaaaa </div><div> aaaaaaaaa </div><div> aaaaaaaaa </div><div> aaaaaaaaa </div><div> aaaaaaaaa </div><div> aaaaaaaaa </div><div> aaaaaaaaa </div><div> aaaaaaaaa </div><div> aaaaaaaaa </div>
template/page2.htm
<div class="content"> page2 = {{ data }} </div>
js/app.js
/** * Created by matsumotoshigeharu on 2014/06/28. */ (function(){ var app = angular.module('myApp', ['ngRoute', 'ngAnimate']); app.config(function($routeProvider, $locationProvider){ $routeProvider.when('/', { templateUrl: "template/main.htm", controller: MainController }).when('/page1', { templateUrl: "template/page1.htm", controller: Page1Controller }).when('/page2', { templateUrl: "template/page2.htm", controller: Page2Controller }).when('/page2/:name', { templateUrl: "template/page2.htm", controller: Page2Controller }).otherwise({ redirectTo: '/' }); } ); app.config(function($locationProvider){ $locationProvider.html5Mode(true); }); // controller function MainController($scope){ $scope.data = "aaaaaaaa"; } function Page1Controller($scope){ $scope.data = "bbbbbbbb"; } function Page2Controller($scope){ $scope.data = "cccccccc"; } })();
※configで画面の切り替えの制御を行う
動作確認
初回
page1のリンクをクリック
page2のリンクをクリック
page1などをリダイレクト
まとめ
一応、jqueryとの相性は悪そうだけどなんか動いている感じ、アニメーションはちょっと今回は外したけど、画面切り替えはなんとかできた。
画面をリロードした際は、トップページへ遷移するような挙動が必要ですね。
クライアントサイドでの開発だけには慣れていないので環境を用意するのにちょっと手間取りそうだけど少しずつ慣らしていく
そろそろfactoryあたりも触ってみるかな…