YasuakiHirano/angularJsTest.html

## angularJsTest.html
<html ng-app="testApp">
    <head>
        <meta charset="utf-8" />
        <script src="angular.min.js"></script>
        <script src="controller.js"></script>
    </head>
    <body>
        <div>
            <a href="https://github.com/YasuakiHirano/pgfun/tree/master/src/angulartest">this source</a>
        </div>
        <div>
            <h3>test01</h3>
             演算子が使えるっぽい<br/>
             <ul>
                 <li>{{'javascript' + '!' }}</li>
                 <li>1 + 2 = {{ 1 + 2 }}</li>
                 <li>1 - 2 = {{ 1 - 2 }}</li>
                 <li>8 / 2 = {{ 8 / 2 }}</li>
                 <li>3 * 2 = {{ 3 * 2 }}</li>
             </ul>
        </div>
        <div>
            <h3>test02</h3>
            <h4>phone</h4>
            <div ng-controller="PhoneListCtrl">
                <ul>
                    <li ng-repeat="phone in phones">
                        <p>{{phone.name}}
                        <span>&nbsp;{{phone.snippet}}</span></p>
                    </li>
                </ul>
            </div>
            <h4>fruit</h4>
            <div ng-controller="FruitListCtrl">
                <ul>
                    <li ng-repeat="fruit in fruits">
                        <p>{{fruit.name}}
                        <span>&nbsp;{{fruit.color}}</span></p>
                    </li>
                </ul>
            </div>
            <h4>number repeat</h4>
            <div>
                <ul>
                    <li ng-repeat="i in [0,1,2,3,4,5,6,7,8]">
                        <p>{{i}}</p>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <h3>test03</h3>
            <h4>フィルタかけれるってさ</h4>
            <div ng-controller="FruitListCtrl">
                検索:<input ng-model="query" />
                <ul>
                    <li ng-repeat="fruit in fruits | filter:query">
                        <p>{{fruit.name}}
                        <span>&nbsp;{{fruit.color}}</span></p>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <h3>test04</h3>
            <h4>並び順決めれるってさ</h4>
            <div ng-controller="FruitListCtrl">
                <ul>
                    <li ng-repeat="fruit in fruits | orderBy:orderProp">
                        <p>{{fruit.name}}
                        <span>&nbsp;{{fruit.color}}</span></p>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <h3>test05</h3>
            <h4>jsonファイルにデータを定義していて呼び出す</h4>
            <div ng-controller="DrinkListCtrl">
                <table style="border:1px solid #000000;">
                    <tr ng-repeat="drink in drinks | orderBy:orderProp">
                        <td style="border:1px solid #000000;padding:8px;">no:{{drink.no}}</td>
                        <td style="border:1px solid #000000;padding:8px;">name:{{drink.name}}</td>
                        <td style="border:1px solid #000000;padding:8px;">company:{{drink.company}}</td>
                        <td style="border:1px solid #000000;padding:8px;">url:<a href="{{drink.url}}">{{drink.url}}</a></td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>
	<html ng-app="testApp">
	<head>
	<meta charset="utf-8" />
	<script src="angular.min.js"></script>
	<script src="controller.js"></script>
	</head>
	<body>
	<div>
	<a href="https://github.com/YasuakiHirano/pgfun/tree/master/src/angulartest">this source</a>
	</div>
	<div>
	<h3>test01</h3>
	演算子が使えるっぽい<br/>
	<ul>
	<li>{{'javascript' + '!' }}</li>
	<li>1 + 2 = {{ 1 + 2 }}</li>
	<li>1 - 2 = {{ 1 - 2 }}</li>
	<li>8 / 2 = {{ 8 / 2 }}</li>
	<li>3 * 2 = {{ 3 * 2 }}</li>
	</ul>
	</div>
	<div>
	<h3>test02</h3>
	<h4>phone</h4>
	<div ng-controller="PhoneListCtrl">
	<ul>
	<li ng-repeat="phone in phones">
	<p>{{phone.name}}
	<span> {{phone.snippet}}</span></p>
	</li>
	</ul>
	</div>
	<h4>fruit</h4>
	<div ng-controller="FruitListCtrl">
	<ul>
	<li ng-repeat="fruit in fruits">
	<p>{{fruit.name}}
	<span> {{fruit.color}}</span></p>
	</li>
	</ul>
	</div>
	<h4>number repeat</h4>
	<div>
	<ul>
	<li ng-repeat="i in [0,1,2,3,4,5,6,7,8]">
	<p>{{i}}</p>
	</li>
	</ul>
	</div>
	</div>
	<div>
	<h3>test03</h3>
	<h4>フィルタかけれるってさ</h4>
	<div ng-controller="FruitListCtrl">
	検索:<input ng-model="query" />
	<ul>
	<li ng-repeat="fruit in fruits \| filter:query">
	<p>{{fruit.name}}
	<span> {{fruit.color}}</span></p>
	</li>
	</ul>
	</div>
	</div>
	<div>
	<h3>test04</h3>
	<h4>並び順決めれるってさ</h4>
	<div ng-controller="FruitListCtrl">
	<ul>
	<li ng-repeat="fruit in fruits \| orderBy:orderProp">
	<p>{{fruit.name}}
	<span> {{fruit.color}}</span></p>
	</li>
	</ul>
	</div>
	</div>
	<div>
	<h3>test05</h3>
	<h4>jsonファイルにデータを定義していて呼び出す</h4>
	<div ng-controller="DrinkListCtrl">
	<table style="border:1px solid #000000;">
	<tr ng-repeat="drink in drinks \| orderBy:orderProp">
	<td style="border:1px solid #000000;padding:8px;">no:{{drink.no}}</td>
	<td style="border:1px solid #000000;padding:8px;">name:{{drink.name}}</td>
	<td style="border:1px solid #000000;padding:8px;">company:{{drink.company}}</td>
	<td style="border:1px solid #000000;padding:8px;">url:<a href="{{drink.url}}">{{drink.url}}</a></td>
	</tr>
	</table>
	</div>
	</div>
	</body>
	</html>