AngularJSを速攻吸収する方法 #1

maxresdefault
LINEで送る
Share on GREE
Share on LinkedIn

なにやら僕の周りで「AngularJS」が流行っている。
みんなdotinstallみて勉強している。
検索してみると、周囲の会社が結構使い始めている。ていうか、もう使ってる所が多い・・・
もしかしてAngularJSを知らないと遅れているのか?
触ったことが無いと、今どきのプログラマーと言えないのではないか?

・・
・・・
一線の開発員をやっている人ってこんな衝動に押しつぶされそうになる事があるようです。
他人事ではなく、僕も間違いなく、そう考えますがねwww

各種情報

本家サイト
dotinstall「AngulatJS入門」

AngularJSはJSのフレームワーク?

AngularJSの説明を色々なサイトで見てみると、「MVCフレームワーク」という説明がある。
MVCは「Model , View , Controller」というObjective-Cの構造体のプログラム構成なのだが、JSのフレームワークって何?ってずっと思ってました。
ドットインストールを見て、それが何となく理解できましたね。
わからない人はまずはdotinstall見てください。
え?プログラムが分からない?そんな人は、まずはプログラムの基本を学んで欲しいんですが、AngularJSを覚える時もどうやらネイティブJS(またはjQueryの基礎知識)は必要なようです。

基本構成のソース紹介

ドットインストールでも記述されている内容をまとめてみました。

解説

ng-app

冒頭の”ng-app”を忘れないように。
この指定はページ途中でのnamespaceとして利用する事もできるようですが、その説明は以後の記事で行います。

ng-model

inputタグで連動することができるng-model=”name”という書き方
かなりインタラクティブな処理がサクッと作れてしまうので覚えておくと便利でしょう。

ng-controller & ng-repeat

一覧データを表示処理するような場合に有効でしょう。
絞込のフィルター処理を覚えておくと、UIが素敵なサイトを簡単に作れるでしょう。

実行結果のキャプチャ

諸事情により、ページを反映させる事ができないので、実行結果のキャプチャ画像を貼り付けておきます。
是非自分の環境で実行してみてください。
※ちなみに、ローカル環境のfile://ではライブラリの読み込みができないのでWEBサーバで実行してくださいね。

angularjs

Leave a Reply

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


*