fun with ui-router part 1

<!doctype html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title>My App</title>

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">

  <link rel="stylesheet" href="style.css">

  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>

  <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>

  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">

  <div class="container">

    <div class="nav-container">
      <ul class="nav nav-tabs">
        <li ng-class="{'active': $state.includes('home')}">
          <a ui-sref="home.pos(0)">首頁</a>
        </li>
        <li ng-class="{'active': $state.includes('about')}">
          <a ui-sref="about()">關於</a>
        </li>
      </ul>
    </div>
    <div ui-view style="min-height: 300px;"></div>

  </div>


</body>
</html>

angular.module('myApp', ['ui.router'])

.config(function ($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/home/0');

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home.html',
      abstract: true
    })

      .state('home.pos', {
        url: '/:pos?animate'
      })

    .state('about', {
      url: '/about',
      templateUrl: 'about.html'
    });

})

.run(function ($rootScope, $state) {
  $rootScope.$state = $state;
})

.controller('MainCtrl', function ($scope, $stateParams, $log) {

  $scope.$stateParams = $stateParams;

});

/** styles here **/

ul.pos {
  list-style-type: none;
  margin: 0;
  padding: 0;

  margin-bottom: 10px;
}
ul.pos li {
  float: left;
  margin-right: 5px;
}
ul.pos li .description {
  line-height: 34px;
}


.output {
  position: relative;
  border: 1px solid #CCC;

  border-radius: 5px;

  width: 100%;
  height: 400px;
}

.output .block {
  position: absolute;
  left: 0;
  top: 0;

  margin-left: 0;
  margin-top: 0;

  width: 40px;
  height: 40px;

  background-color: #ff1d25;

  border-radius: 5px;
}

.output.animate .block {
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
}

.output .block.left-top {
  left: 0; top: 0;
  margin-left: 0;
  margin-top: 0;
}
.output .block.right-top {
  left: 100%; top: 0;
  margin-left: -40px;
  margin-top: 0;
}
.output .block.left-bottom {
  left: 0; top: 100%;
  margin-left: 0;
  margin-top: -40px;
}
.output .block.right-bottom {
  left: 100%; top: 100%;
  margin-left: -40px;
  margin-top: -40px;
}

<ul class="pos clearfix">
  <li><p class="description">無動畫</p></li>
  <li><a ui-sref="home.pos({pos: 0, animate: 0})" class="btn btn-primary">左上</a></li>
  <li><a ui-sref="home.pos({pos: 1, animate: 0})" class="btn btn-primary">右上</a></li>
  <li><a ui-sref="home.pos({pos: 2, animate: 0})" class="btn btn-primary">左下</a></li>
  <li><a ui-sref="home.pos({pos: 3, animate: 0})" class="btn btn-primary">右下</a></li>
</ul>
<ul class="pos clearfix">
  <li><p class="description">有動畫</p></li>
  <li><a ui-sref="home.pos({pos: 0, animate: 1})" class="btn btn-success">左上</a></li>
  <li><a ui-sref="home.pos({pos: 1, animate: 1})" class="btn btn-success">右上</a></li>
  <li><a ui-sref="home.pos({pos: 2, animate: 1})" class="btn btn-success">左下</a></li>
  <li><a ui-sref="home.pos({pos: 3, animate: 1})" class="btn btn-success">右下</a></li>
</ul>

<h3>首頁</h3>

<p>試著按按看下面的按鈕</p>

<p>&nbsp;</p>

<div class="row">

  <div class="col-md-6" ng-include="'btns.html'">
  </div>
  <div class="col-md-6">
    <div class="output" ng-class="{'animate': $stateParams.animate == 1}">
      <div class="block"
           ng-class="['left-top', 'right-top', 'left-bottom', 'right-bottom'][$stateParams.pos]"
           ng-cloak></div>
    </div>
  </div>

</div>

<h3>關於</h3>

<p>這邊可以直接跳到首頁按鈕的某個狀態</p>

<p>&nbsp;</p>

<div ng-include="'btns.html'"></div>