angular.jsを試してみた

話題のangular.jsを試してみた

Googleからangular.jsを試してみた。
http://angularjs.org/

まだこれで何ができるかわかっていない状況の手探りですががんばっていこうと思います。

基本部分のobject表示をさせるブツを作成してみました。
object操作だけでDOM系が操作できるのはすごいですねー。
table上に要素を表示させる簡単な物を作ってみます。

javascript部分

objectに直接データを入れて、追加して、3番目の要素を削除しています。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript">
angular.module('angular_app', []);
function book_table($scope)
{
    $scope.books = [
        {name: 'angular.jsで学ぶすごいアプリ', price: 1995},
        {name: 'かに漁船', price: 230},
        {name: '島原の乱1', price: 980},
        {name: '島原の乱2', price: 980},
    ];

    $scope.books.push({name: 'うずらくらぶ', price: 2032});
    $scope.books.splice(2, 1);
}
</script>

要素を追加するtable

<div ng-controller="book_table">
<table class="table">
<tr>
  <th>名称</th>
  <th>価格</th>
</tr>
<tr ng-repeat="book in books">
  <td>{{book.name}}</td>
  <td>¥{{book.price}}</td>
</tr>
</table>
</div>

とりあえずできた全体

ブラウザで読み込むと、
テーブル内に定義したオブジェクトを読み込みます。

<!DOCTYPE HTML>
<html lang="ja" ng-app="angular_app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div ng-controller="book_table">
<table class="table">
<tr>
  <th>名称</th>
  <th>価格</th>
</tr>
<tr ng-repeat="book in books">
  <td>{{book.name}}</td>
  <td>¥{{book.price}}</td>
</tr>
</table>
</div>
</div>

<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript">
angular.module('angular_app', []);
function book_table($scope)
{
    $scope.books = [
        {name: 'angular.jsで学ぶすごいアプリ', price: 1995},
        {name: 'かに漁船', price: 230},
        {name: '島原の乱1', price: 980},
        {name: '島原の乱2', price: 980},
    ];

    $scope.books.push({name: 'うずらくらぶ', price: 2032});
    $scope.books.splice(2, 1);
}
</script>

</body>
</html>

最終的に表示されるobjectは
angular.jsで学ぶすごいアプリ ¥1995
かに漁船 ¥230
島原の乱2 ¥980
うずらくらぶ ¥2032

ちょっとまだangularを使ったからなにが便利なのかー?
というのがわからない状態です。



コメントを残す