読者です 読者をやめる 読者になる 読者になる

DRYな備忘録

Don't Repeat Yourself.

たぶん世界一簡単なAngularJSのサンプル

angularjs javascript

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </head>
  <body data-ng-app="foo">
    <div data-ng-controller="BarController">
      <span data-ng-click="hoge()">{{message}}</span>
    </div>
  </body>
</html>

main.js

(function() {
  angular.module("foo", []).controller("BarController",
    function($scope) {
      $scope.message = "こんにちは!こんにちは!";
      // HTML内での`data-ng-click="hoge()"`に対応
      $scope.hoge = function() {
        var msg = window.prompt("なんか入力してみろ");
        // $scope.変数名に何かをぶっこむと、自動的にHTMLの描画も変わる
        $scope.message = msg;
      };
    }
  );
})();

配置

.
├── index.html
└── main.js

で、ファインダー経由かなんかで、このindex.htmlをブラウザで表示する

f:id:otiai10:20150128135802p:plain

糞ビビってたんですが、やってみたら超簡単でしたね

DRY