Laddy in

Programming & Technology!!

NEW ARTICLE
windows11拡張機能で画像文字読み込み

angular.jsをチュートリアルから学ぶ step2 Angular Templates




前回のstep0からいきなりstep2へ飛んでいます。
というのもstep1ではhtmlの準備をしますよーの回でしたのでとばしています。

前回 step0

目次

チュートリアルstep2(Angular Templates)

定義したオブジェクトのデータをng-repeatを利用してリスト表示しています。
変数に入ったオブジェクトをinでオブジェクト数だけ出力することができます。
その他には{{}}で変数に直接.で関数をつなげてその結果を出力するjavascriptな書き方もここで行っています。


<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>

<div ng-app="phonecatApp">
<div ng-controller="PhoneListCtrl">

<p>totalphone: {{phones.length}}</p>
<ul>
  <li ng-repeat="phone in phones">{{phone.name}}
    <p>{{phone.snippet}}</p>
  </li>
</ul>

<ul>
  <li ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
    {{i + 1}}
  </li>
</ul>

</div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script>
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
    $scope.phones = [
        {'name': 'Nexus S', 'snippet': 'Fast just got faster with Nexus S.'},
        {'name': 'Motorola XOOM with WiFi', 'snippet': 'The Next, Next Generation tablet.'},
        {'name': 'Motorola XOOM', 'snippet': 'The Next, Next Generation tablet.'}
    ];
});
</script>

</body>
</html>




実行結果

output

気になったところ

前回と異なったところはhtmlを定義している場所のng-appに文字列が入っているここ
チュートリアルではhtmlの中に記述していましたがこちらに移動しています。


<div ng-app="phonecatApp">
<div ng-controller="PhoneListCtrl">

ng-appはここからangularjsが始まりますで、
ng-appの中身を指定することによってアプリの指定ごとにjavascriptのソースを変えたりすることができるようです。
html全体にangularjsを適応させる場合には


<html ng-app>


でokのようです。

テスト系のコードもチュートリアルにありますが、後回しで紹介していきたいと思います。

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js