AngularJS(JavaScriptのMVCフレームワーク)

AngularJS

 

AngularJSとは?

– JavaScriptのMVCフレームワーク
– Model View Controller

【sample1】入力した内容をインタラクティブにブラウザに反映(表示)できる

<!--    index.html  -->
<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Angularの練習</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script src="myscript.js"></script>
</head>
<body>
    <h1>AngularJSの練習</h1>
    <input type="text" ng-model="name">
    <p>こんにちは!{{name}}</p>
    <p>こんにちは!{{5 * 3}}</p>
</body>
</html>

【sample2】ループで使えるフィルター

<!--   index.html   -->
<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Angularの練習</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script src="myscript.js"></script>
</head>
<body>
    <h1>AngularJSの練習</h1>
    <div ng-controller="mainCtrl">
        <p><input type="text" ng-model="query.name"></p>
        <ul>
            <li ng-repeat="user in users|filter:query|limitTo:3|orderBy:'-score'">
                {{user.name}} {{user.score}}
            </li>
        </ul>
    </div>
</body>
</html>


/*   myscript.js   */
var mainCtrl = function($scope) {
    $scope.users = [
        {"name":"taguchi", "score":52.22},
        {"name":"tanaka", "score":38.22},
        {"name":"yamada", "score":11.11},
        {"name":"hayashi", "score":5.25},
        {"name":"tanahashi", "score":82.4},
        {"name":"yasuda", "score":55.21},
        {"name":"minami", "score":32.8},
        {"name":"yanagi", "score":72.2}
    ];
}
タイトルとURLをコピーしました