仕事の都合もあり、AngularJSを使える様になろうと思います。自分の場合ですが、何か新しいフレームワークなどを使おうとするときは、以下の要領で理解していきます。
下の質問に自分なりに応えていきます。
- 早い話が何なのよ？ -> 大雑把な概要
- これは一体何なのよ？ -> 大まかな各部品の概要
- どう使うのか？
インストールに関して
こちらのサイトにダウンロードなどインストール方法(URL etc...)が記載されています。
そして、Bootstrapのダウンロードはこちらです。
この本を参考に記載します。
|
|
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/18ff7e3e.9e81c26d.18ff7e3f.8be5cf26/?me_id=1213310&item_id=16758971&m=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F8081%2F9784777518081.jpg%3F_ex%3D80x80&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F8081%2F9784777518081.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
1.早い話が何なのよ？
フレームワークです。一定のルールの下に実装してやれば細かいところを実行してくれる…というものです。
AngularJSの概要ですが、使用するために、２つの方法があります。
- HTMLのヘッダーにURLを直接記載して参照する様にする
こちらのサイトも参考にしました。 -
<head>
-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"gt;</scriptgt;
-
</head>
-
HTMLのヘッダーに上の様に記述して参照できる様にします。
-
Node.jsを使用して自分のPCにインストールする
npm install --dev <package-name>
の様にコマンドを叩きます。詳細に関してはこちらのサイトをみました。[AngularJS](npm install --dev)
ハローワールドを作る
とりあえずは、ハローワールドを作成します。作成したものはこちらにあります。
作成したコードは以下に示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("Hello", []);
app.controller("HelloCtrl", function($scope) {
$scope.hello = {
text: "Hello"
};
});
</script>
</head>
<body ng-app="Hello">
<div ng-controller="HelloCtrl">
<p>{{hello.text}}, World!!</p>
</div>
</body>
</html>
これには、HTML部分とJS部分を一緒に記載しています。
しばらくは、一緒に記載していこうと思います。
中身は？
JSの方で、行なっているのは以下の通りです。
- 変数「app」にモジュール「Hello」を作成しています。
- そして「app」にcontroller「"HelloCtrl」を登録しています。JSはオブジェクトに
obj.xxxx = "値";の様な形でプロパティを追加できます。 - コントローラーには「$scope」を渡しています。これはAngularで使用している部品です。これを使用することでHTML側で使用することができます。
具体的に{{hello.text}}の部分が直接バインドした値を使用しているところです。
なので、JS側で作成した$scope.XXXという変数はHTML側で{{XXX.ooo}}の様な形で使用することができます。
ちょっと応用
ここで上に作成したプロパティ「hello」には文字がせってされていますが、下のものは関数を追加してクリックした時に起動する様に実装しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("Hello", []);
app.controller("HelloCtrl", function($scope) {
$scope.hello = {
text: "Hello",
value: 1234,
};
$scope.test = function() {
alert("test");
};
});
</script>
</head>
<body ng-app="Hello">
<div ng-controller="HelloCtrl">
<p>{{hello.text}}, World!!</p>
<button ng-click="test()">test</button>
</div>
</body>
</html>
AngularJSでの、ハローワールドの実装でした。
でわでわ。。。
