はじめに
AngularJSを知ったのは、1年ぐらい前でしたが、
なんとなくとっつきにくく、今までほったらかしにしてました。
がんばって勉強しようと自分を奮い立たせるつもりで、
少しずつ書き続けようと思います。
AngularJSをダウンロード
AngularJS
の”ダウンロード”ボタンからダウンロードできます。
なにはともあれHello World!から
どんな言語でも最初はHello World!からですね。
AngularJSでは、Hello XXXX!(XXXXは入力した文字列)とします。
HelloWorld.html
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<title>Hello World!</title>
</head>
<body ng-app>
<div>
<label>Name:</label>
<input type="text" ng-model="name" value=""/>
<h1>Hello {{name}}!</h1>
</div>
</body>
</html>
<body ng-app>のng-appAngularJSのお作法の１つ。
AngularJSアプリケーションを自動で起動させる指定です。
<input type="text" ng-model="name" value=""/>の
ng-modelがディレクティブです。このコードでは、Javascriptを
書いていませんが、Javascript内のモデル・コントローラーとの
橋渡し役になります。
<h1>Hello {{name}}!</h1>が、表示です。mg-Modelに指定した
変数を表示します。ここでは、inputタグに入力した文字列を
Helloの後に表示します。
味気ないのでBootstrapで飾り付け
Bootstrapで飾り付けします。
NewHelloWorld.html
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<title>Hello World!</title>
</head>
<body ng-app>
<div class="container">
<div class="jumbotron">
<label>Name:</label>
<input type="text" ng-model="name" value=""/>
<h1>Hello {{name}}!</h1>
</div>
</div>
</body>
</html>
少しは、よくなりました。
おわりに
まだまだ、これからですが少しずつ勉強していきましょう！