129
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

AngularJS入門

最近AngularJSフレームワークを勉強したので覚書です。
MVCのViewをhtml,CSSファイルのみでModel, ControllerをJavascriptで実現してしまうことができます。

AngularJSフレームワークの準備

まずはAngularJSを使えるようにします。
htmlファイルのheadタグに下記コードを挿入します。

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

そしてモジュール(ng-app)とコントローラ(ng-controller)を定義します。

index.html
<!DOCTYPE html>
<html ng-app = 'App'>
  <head>
...
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
   <script type="text/javascript" src="controller.js"></script>
  </head>
  <body ng-controller="AppController">
...
  </body>
</html>
controller.js
var app = angular.module('App', []);

app.controller('AppController', function($scope){
//ここでModelとのやりとりなど。
});

angular.moduleの最初のパラメータはhtmlで定義したモジュール名、次のパラメータは依存関係(ルーティングやアニメーションを使うとき必要)を示すんですが今は省略します。

これでとりあえずAngularJSの準備ができました。

実際に使ってみる(1)

AngularJSは基本的にディレクティブng-XXXでHTML要素のふるまいを定義して、データバインディング{{}}でControllerから送られた値を表示するということをします。

まずは簡単にボタンが押されたときテキストボックスから入力された文字を読み取ってそれを表示することをしてみましょう。

index.html
<body ng-controller="AppController">
      <input type = "text" ng-model="displayText"> 
      <input type="button" value="Go" ng-click="display()">
      <h1>{{text}}</h1>
</body>

テキストボックスにng-modelでdisplayTextというモデルをつくります。
ボタンにng-clickでクリックされたときの関数display()をつくります。
h1タグにtextという値をバインディングします。

controller.js
app.controller('AppController', function($scope){
  $scope.display = function(){
    var str = $scope.displayText;
      $scope.text = str;
  }
});

AngularJSでは\$scopeを介してViewとのやりとりをします。まず関数display()を定義し、$scopeからdisplayTextの値をtextに代入するといった流れです。

結果はこんな感じです。

Screenshot (7).png

これでjQueryなどでいちいち要素を指定して値を表示しなくてもよくなります。

実際に使ってみる(2)

AngularJSの真骨頂はこれからです。
HTMLファイルでMVCのViewをすべて任せてしまおうということでHTMLでfor文なども使えてしまいます。
例えば、

$scope.comments = [
      {name: "Yamada", text: "Hello!"},
      {name: "Tanaka", text: "Thanks!"},
      {name: "Nakamura", text: "Yeah!"}
  ];

commentsという配列があったとします。これをng-repeatディレクティブをつかってループして表示します。

index.html
<div ng-repeat="comment in comments">
          <h2>{{comment.name}} : {{comment.text}}</h2>
</div>

Screenshot (8).png

結果はこんな感じです。

今回は少しだけAngularJS使い方を紹介しましたがまだまだいろいろなディレクティブがあります。

詳しくは日本語リファレンスなどを参考にしてください。

次はAngularJSでルーティングのやり方をご紹介したいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
129
Help us understand the problem. What are the problem?