だいたいそれでいいんじゃないの

つれつれなるkixixixixiの技術的なストック。http://reload.co.jp

AngularJS触れてみた

AngularJSというさくっと使えるJavaScriptフレームワークがあるときいて初心者の俺が少し触れてみました。

AngularJSとはフラウザ上でMVCを簡単に実現できるフレームワークです。

 

なにができるのかってことの前にMVCについて。

MVCとは

M = Model (データの処理、マッピング)

V = View (表示)

C = Controller (MとVをつなげる)

のことでウェブアプリーケションを開発する上で大切な概念ですね。

 

JavaScriptMVCを実現すると、JavaScriptで生成・処理したデータをAngularJSをつかってかいたhtmlのテンプレートに動的流し込めたりできるのです。

AngularJSはその導入がとても簡単でした。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>

でAngularJSを読み込んで

<html ng-app>

とhtmlタグで定義してやると、AngularJSと認識されます。

下記のコードで簡単にテキストフィールドに入力された文字が{{yourName}}という部分にダイナミックに反映されます。かんたん!!

なんにも考えないでDOMが使えるのは楽ですね。

<!doctype html>

<html ng-app>

  <head>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>

  </head>

  <body>

    <div>

      <label>Name:</label>

      <input type="text" ng-model="yourName" placeholder="Enter a name here">

      <hr>

      <h1>Hello {{yourName}}!</h1>

    </div>

  </body>

</html>

以上。

広告を非表示にする