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の青い四角が表示される。
さて、明日もやっていきます。しかし、早めにレンタルサーバ借りよう。