AngularjsでHelloWorid


JavascriptのMVCのフレームワークといえばBackbone.jsとAngularjsですが、今回はAngularjsを取り上げていきたいと思います。

まずは以下からAngularjsをダウンロードしてください。

https://angularjs.org/

2016年8月現在の最新バージョンは1系で1.5.8です。

そしてHTMLの内に以下を追加します。(HTMLファイルから相対的にlibraries/angularjs/内に保存した場合)

<script src='libraries/angularjs/angular.min.js'></script>

HTML

以下のようにコントローラーを追加します。


<html ng-app = 'myApp'>
<head>
<script src='libraries/angularjs/angular.min.js'></script>
  <script src='js/myApp/myApp.js'></script>
</head>
<body ng-controller='myController as myCtrl'>
<p>{{myCtrl.hello}}</p>
</body>
</html>

ngとは、Angularの2文字目と3文字目をとったものです

Javascript

ファイル名my


var app = angular.module('myApp', []);
app.controller('myAppController', function(){
this.hello = 'Hello World';
});

これでHello Wolidは終了です。

次回はモデルをビューにバインドしてみましょう

 

Angularjsモデルバインド>>

Please follow and like us:
20

andy

プログラマ、ソフトウエアアーキテクトです。 Webアプリを始め、Windowsアプリ、Macアプリ、サーバサイドAWS Lambda、機械学習、AI(自然言語処理)Javascript,TypeScript,Angular,Node.js、Pythonなど。 ご相談お待ちしております。 GitHub github.com/kotaroyamame

3 thoughts to “AngularjsでHelloWorid”

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください