【AngularJS】 AngularJS ~コントローラ編~

  ■ サンプル

  例1:コントローラで、Hello World!

<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
angular.module('sampleApp', []);
angular.module('sampleApp').controller('sampleController', function($scope) {
    $scope.msg = 'Hello, World!';
});
</script>
</head>
<body>
<div ng-controller="sampleController">
  {{msg}}
</div>
</body>
</html>

 

  例2:ng-repeat

<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
angular.module('sampleApp', []);
angular.module('sampleApp').controller('sampleController', function($scope) {
    $scope.users = [
       {id:1, name:"Mike"},
       {id:2, name:"Tom"},
       {id:3, name:"Smith"},
       {id:4, name:"Kevin"},
       {id:5, name:"Ken"},
    ];
});
</script>
</head>
<body>
<div ng-controller="sampleController">
  <li ng-repeat="user in users">
  {{user.id}} {{user.name}}
  </li>
</div>
</body>
</html>

 

  参考文献

* コントローラ
http://www.buildinsider.net/web/angularjstips/0003

  動画

* コントローラ
http://dotinstall.com/lessons/basic_angularjs/8203

 

  関連記事

  AngularJS ~入門編~

http://blogs.yahoo.co.jp/dk521123/35935493.html