20140228-fff-angular-01

<!DOCTYPE html>
<html ng-app="app" lang="ja" >
  <head>
    <meta charset="UTF-8">
    <link data-require="bootstrap-css@3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <section ng-controller="AgemonPageCtr" class="page">
      <h1 class="selected-label-hader" >
        I love {{agemonoName}}.
      </h1>
      <div class="btn-group" ng-repeat="agemon in agemonList" >
        <button class="btn btn-default" ng-click="onSelect(agemon)" >
          {{agemon.name}}
        </button>
      </div>
    </section>
  </body>
</html>

// app というmodule名前空間を作成
angular.module("app", []);

// app moduleにcontrollerを追加
angular.module("app").
  controller("AgemonPageCtr",function($scope){
    $scope.agemonoName = "none..";
    $scope.agemonList = [
      { "name":"くしかつ" },
      { "name":"とんかつ" },
      { "name":"からあげ" },
      ];
    $scope.onSelect = function(agemon){
      $scope.agemonoName = agemon.name;
    }
  });

/* Styles go here */
body{
  font-size:14px;
  background-color: rgb( 248, 250, 244);
}
.page{
  padding:16px;
}

.selected-label-hader{
  margin: 24px 0;
  padding: 4px 8px;
  border-bottom: solid 1px rgba( 0, 0, 0, 0.2);
}