夜の歌

プログラミング、音楽、本について緩く書いていきます。

AngularJSを使って(7月8日)

AngularJSを使って、非同期で画面遷移する方法(当たってるのか?w)

index.html

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
        <script src="script.js"></script>
        <style>
            #main{
                width:500px;
                margin-left:auto;
                margin-right:auto;
            }
            #main1{
                background-color:red;
                width:500px;
                height:500px;
            }
            #main2{
                background-color:blue;
                width:500px;
                height:500px;
            }
            #main3{
                background-color:black;
                width:500px;
                height:500px;
            }
        </style>
    </head>
    <body>
        <div ng-controller="Controller" id="main">
            <div id="main1" ng-show="change_first"></div>
            <div id="main2" ng-show="change_second"></div>
            <div id="main3" ng-show="change_third"></div>
            <button ng-click="block_change()">{{name}}</button>
        </div>
    </body>
</html>

続いて、script.js

function Controller($scope, $http) {

    $scope.name = "進む";
    
    //各divのng-showの値の設定
    $scope.change_first = true;
    $scope.change_second = false;
    $scope.change_third = true;

    $scope.block_change = function() {

        if ($scope.change_first === true) {
            $scope.name = "戻る";
            $scope.change_first = false;
            $scope.change_second = true;
            $scope.change_third = false;
        } else {
            $scope.name = "進む";
            $scope.change_first = true;
            $scope.change_second = false;
            $scope.change_third = true;
        }
    }
    
}

まあ、こんな感じです。 まず、縦横400pxの赤と黒の四角形が1つずつ表示される。進むボタンを押したら、縦横400pxの青い四角が表示される。

さて、明日もやっていきます。しかし、早めにレンタルサーバ借りよう。