Angularjs入門!今すぐAngularjsを動かす必要のある人へ

js

今回は今すぐにどうしてもAngularjsを動かしたい!という方を対象に、Angularjsの超シンプルなひな形を紹介します。

ロジック数も30行以下のすごく短いソースとなっています。

[スポンサーリンク]

Angularjsをダウンロードする

Angularjsを取得します。
今回は、version 1.4を使っています。

angularjs-beginner1

Angularjsを使ったサンプルソース

HTMLソースを紹介します。
まず1行目の ng-appへapp.jsのangular.moduleで定義している名前を入れてください。
こちらのHTMLはapp.jsで値をセットして、15~17行のところでループして表示するソースです。

<!DOCTYPE html>
<html lang="ja" ng-app="app">
<head>
    <meta charset="utf-8">
    <title>AngularJS サンプル</title>
    <script src="lib/angular.min.js"></script>
    <script src="app.js"></script>
</head>

<body bgcolor="#e2e2e2">
<div ng-controller="testCtrl">
    <input type="search" placeholder="検索できます。" ng-model="searchText">

    <!-- $scopeの値をループで表示します。 -->
    <ul ng-repeat="food in foodlist | filter:searchText">
        <li>{{food.name}}</li>
    </ul>
  
</div>
</body>
</html>

JavaScriptのサンプルです。
こちらでfoodlistに値を設定しています。

angular.module("app", [])
    .controller("testCtrl", function($scope) {
        $scope.foodlist = [
            { name: 'からあげ' },
            { name: '焼肉' },
            { name: 'ラーメン' },
            { name: 'ハンバーガー' },
            { name: 'おでん' },
        ];
    });

デモ

実際に動かすことが出来ます

さいごに

MVCを理解してから作るより簡単なサンプルを動かしてから理解するほうが早いって人も多いとおもいます。
現役のプログラマだったらこれくらいのソースは簡単!なはずです。

このソースがみなさんのお役にたてれば嬉しい限りです。
それでは!