同僚のエンジニアさんが仕事の合間に AngularJS を教えてくれまして、自分でも調べながら〜なんですが、復習がてらメモメモ。
AngularJS とは
- MVWフレームワーク
- Model-View-Whatever と言われることが多いみたい。
- View はテンプレートだと思ってもいいかも？
とりあえず、一歩目的なhtmlを作ってみる。
AngularJS をダウンロード
AngularJS — Superheroic JavaScript MVW Framework の「Download AngularJS 1」から min.js をダウンロードします
html作る
index.html 作ります。
<!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8"> <script src="js/angular.min.js"></script> <title>test angular</title> </head> <body> hoge </body> </html>
<html ng-app> って書いてあげます。
ng-app 以下で anglar 動かしちゃうわよー…的な。
View で宣言して、どーのこーのすると、 Model に 何か作っちゃう感じなのかなあ…とかとか。 （まだよく分からない）
jsフォルダの中に angular.min.js を入れてあげます。
作ったhtml見てエラー出てないか確認
なんとなくサーバーたちあげます。復習では python でやった。
$ cd project/test-ang/ $ python -m SimpleHTTPServer 8000
URLあくせす。
コンソールにエラー出てないのでOK。
ちょっと計算とかさせてみる
<!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8"> <script src="js/angular.min.js"></script> <title>test angular</title> </head> <body> <p>{{'コーヒー' + '牛乳' }} おいしいです</p> <p>1 + 2 = {{ 1 + 2 }}</p> </body> </html>
ちゃんと
1 + 2 = 3
って表示されました！
今回はここまで。
