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をブラウザで表示する
糞ビビってたんですが、やってみたら超簡単でしたね
DRY