5
5

More than 5 years have passed since last update.

AngularJSのHelloWorldテンプレート

Last updated at Posted at 2014-02-09

[2014/03/10追記] あれからいろいろ勉強して、こっちの方が雛形としてはいいです^^;
- http://qiita.com/hkusu/items/7d748b55ba73cc8a3675


スクリプトを書いてローカルブラウザで挙動を確認するためのテンプレートです。
下記の index.html(名前はなんでもいいけど) をローカルPCに保存して、お使いのブラウザへドラッグすれば動きます。
(外部サイトのJavaScriptライブラリを直接参照してるので、ネットに繋がってる必要はあります。)

index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script type="text/javascript">
    //Controller
    function TestCtrl($scope){
        $scope.sample = "こんにちは世界!";
    }
</script>
</head>
<body>

<div ng-controller="TestCtrl">{{sample}}</div>

</body>
</html>

まだあまり触っていませんが、Knockout.jsと比較して、非JavaScriptプログラマや、例えばPHPのSmarty等のテンプレートエンジンに慣れ親しんでいる方は、AngularJSの方がとっつきやすい印象です。

おまけ:初心者の学習の参考になるサイト

http://js.studio-kingdom.com/angularjs/guide
http://tech.aainc.co.jp/archives/6281

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5