読者です 読者をやめる 読者になる 読者になる

Uni-Q blog

うにきゅう ぶろぐ

とりあえず AngularJS いっぽめ

AngularJS

同僚のエンジニアさんが仕事の合間に 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 に 何か作っちゃう感じなのかなあ…とかとか。 (まだよく分からない)

AngularJS は VMW だとかメモ

jsフォルダの中に angular.min.js を入れてあげます。

作ったhtml見てエラー出てないか確認

なんとなくサーバーたちあげます。復習では python でやった。

$ cd project/test-ang/
$ python -m SimpleHTTPServer 8000

URLあくせす。

http://127.0.0.1:8000/

コンソールにエラー出てないので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 

って表示されました!

今回はここまで。