m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

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で画面の切り替えの制御を行う

動作確認

初回

f:id:m_shige1979:20140628220823p:plain

page1のリンクをクリック

f:id:m_shige1979:20140628220830p:plain

page2のリンクをクリック

f:id:m_shige1979:20140628220838p:plain

page1などをリダイレクト

f:id:m_shige1979:20140628220844p:plain

まとめ

一応、jqueryとの相性は悪そうだけどなんか動いている感じ、アニメーションはちょっと今回は外したけど、画面切り替えはなんとかできた。
画面をリロードした際は、トップページへ遷移するような挙動が必要ですね。

クライアントサイドでの開発だけには慣れていないので環境を用意するのにちょっと手間取りそうだけど少しずつ慣らしていく

そろそろfactoryあたりも触ってみるかな…