LoginSignup
10
6

More than 3 years have passed since last update.

ニジボックスAdvent Calendar 2015Day 7
@nbtakusaitoin株式会社ニジボックス

Angular JS 1.4系 基本的な使い方

Last updated at Posted at 2015-12-06

はじめに

AngularJS(1.4系)を使い始めて、すごいなーと思ったので(小並感)
簡単なところを共有して感動できたらいいなーと思います。
この記事はAngularJS触ったことない人・一応聞いたことあるよ
みたいな人向けの記事です。
公式ドキュメントがしっかりしてるので、それ読むのがいいと思うんですが
実際に感動してもらえたら、それが一番いいと思ってるので
それを目当てに書きます。

下準備

マイナーverが違うとここら辺が違うので注意が必要。
今回は1.4系を想定してます。

1.html
<html ng-app="MyApp"><!--このタグの中でangularJS使うよっていう感じ -->
<head>
  <meta charset="utf-8"><!--いつも通りの文字コード -->
  <script src="js/lib/angular.min.js"></script><!--Angular使うよ-->
  <script src="js/myapp1.js"></script><!-- JSのソース -->
</head>
<body>
  <div ng-controller="MyAppCtrl as app">
    <h2>app.message : {{app.message}}</h2>
  </div>
</body>
</html>

AngularJSのソースを落としてないなら↓

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

でももちろん可。
で、自分の作るJSはというと。

js/myapp1.js
angular.module('MyApp', []).
  controller('MyAppCtrl', function() {
    var self = this;
    self.message = 'hello world';
  });

いきなり訳わからんすね。
１行目：Angularに'MyApp'というモジュールを作って
２行目：そのモジュールはコントローラーなんだよ。
３行目以下：
そのコントローラーオブジェクトのmessageっていうのは、'hello world'さ！

っていう感じ。まずは進みます。

そんなわけで、一旦サンプルを見ましょう
サンプルページ

1.htmlの{{app.message}}の部分がhello worldになりました。

htmlのほうを解説していきます。

1.html
<html ng-app="MyApp">

これはMyAppていうモジュール使いますっていう定義。おまじない。

1.html
  <div ng-controller="MyAppCtrl as app">
    <h2>app.Message : {{app.message}}</h2>
  </div>

ここのdiv要素内で'MyAppCtrl'というコントローラを、appという名前で使いますと宣言。
'{{}}'は中のものを表示するって感じです。

これでもうAngularJSが完全に使えます。いきましょーー！

ng-model

まずはサンプルをば。
サンプル

僕はこの時点ですでに感動しました。素のJSで書けって言われたら、ちょっともうしんどいです。
ソースを見てみましょう。

myapp2.js
angular.module('MyApp', []).
  controller('MyAppCtrl', function() {
    var self = this;
    self.user_input = '';
  });

user_input を空文字で用意しておきます。(用意しなくても動く)
(user_inputっていう名前使ってるからね！っていう自分へのメモも込めて書いてます)

2.html
<body>
  <div ng-controller="MyAppCtrl as app">
    <input type="text" ng-model="app.user_input"><br>
    you input : {{app.user_input}}
  </div>
</body>

ここのinputの要素にng-modelが、jsとviewを繋いでいます。

input要素に入力された文字はapp.user_input
つまり、MyAppCtrl.user_inputに値を入れてくれます。

2.html
    you input : {{app.user_input}}

なので、ここの{{app.user_input}}に値が入るわけです。

jsとviewを繋いでます。すごいっすね。

ng-show, ng-hide

ng-show:ある値が真なら表示　、偽なら非表示
ng-hide:ある値が真なら非表示、偽なら表示
っていう想像通りのものです。

これはあんまり感動しないかもですが...
サンプル

3.html
<div ng-controller="MyAppCtrl as app">
  <p ng-show="true">見える</p>
  <p ng-show="false">見えない</p>
  <p ng-hide="true">見えない</p>
  <p ng-hide="false">見える</p>
</div>

これでは使いどころ無さすぎですが
もちろんコントローラの値によって出しわけができます。

myapp3.js
angular.module('MyApp', []).
  controller('MyAppCtrl', function() {
    var self = this;
    self.show_1 = true;
    self.show_2 = false;
    self.obj = {};
  });
3.html
  <table border="1">
    <tr>
      <td></td>
      <td>真</td>
      <td>偽</td>
    </tr>
    <tr>
      <td>ng-show</td>
      <td><span ng-show="app.show_1">○</span></td>
      <td><span ng-show="app.show_2">×</span></td>
    </tr>
    <tr>
      <td>ng-hide</td>
      <td><span ng-hide="app.show_1">×</span></td>
      <td><span ng-hide="app.show_2">○</span></td>
    </tr>
  </table>
3.html
<p ng-show="app.obj">objectあるよ</p>
<p ng-show="app.show_2 ? false: true">3項演算子</p>

っていうようなことも可能。
3項演算子は悪だ！なんて思ってた時期もありましたが、結構使ってます。

ng-click

素のjsでいうonclick属性ですね。
onclickとは何が違うのかは、またいつか。

サンプル

4.html
<div ng-controller="MyAppCtrl as app">
  <button ng-click="app.click_func()">Click Me</button>
  <p ng-show="app.after_click">Clickしました</p>
</div>

Click Meボタンを押すとMyAppCtrl.click_funcが発火します。
で、それは何かって言うと

myapp4.js
angular.module('MyApp', []).
  controller('MyAppCtrl', function() {
    var self = this;
    self.after_click = false;
    self.click_func = function() {
      alert('クリック');
      self.after_click = true;
    };
  });

クリックとアラートを出して、after_clickをtrueにしています。
それでalertをOKしたときに'Clickしました'が表示されるようになります。
ng-showが生きてきました。

僕はこんなんでも感動しました。

ng-class

表示非表示だけじゃなくて、色変えたり、もうちょい何かないの？
っていうのがこれ。
classの付け替えしちゃいます。
サンプル

クリックすると色が変わります。

5.html
  <style>
    .red {
      color: red;
    }
    .blue {
      color: blue;
    }
  </style>

redクラスとblueクラスを定義

5.hml
<div ng-controller="MyAppCtrl as app">
  <p ng-class="{'red': app.color.is_red}">赤文字</p>
  <button ng-click="app.change_color()">色変えちゃいます！</button>
  <p ng-class="{'red': app.color.is_red, 'blue': app.color.is_blue}">Sample Text 1234 5678</p>
</div>

ng-classの書き方は
ng-class="{'付与するクラス名': 判定式・値}"
もう見るからに

"{'red': app.color.is_red, 'blue': app.color.is_blue}"

こういうことが出来そうですよね。

さて、色変えちゃいますボタンは何をしているかというと

myapp5.js
angular.module('MyApp', []).
  controller('MyAppCtrl', function() {
    var self = this;

    self.color = {
      is_red : true,
      is_blue: false
    };

    self.change_color = function () {
      self.color.is_red  = !self.color.is_red;
      self.color.is_blue = !self.color.is_blue;
    };
  });

is_redとis_blueの真偽値を入れ替えてるだけですね。
上段の赤文字が赤-黒で変化するのは

5.html
<p ng-class="{'red': app.color.is_red}">赤文字</p>

is_redが真の時だけredのクラスを付与するが、偽の時は何もしないので
もともとのデフォルトの色の黒になります。

どうですか？僕は感動しました。

ng-src

<img src="jsの値入れたい">

ここにもjsの値を入れたいとかありますよね。そんな時にng-src

サンプル

5.html
<div ng-controller="MyAppCtrl as app">
  <img ng-src="{{app.image_path}}">
</div>

で、jsにimage_pathが書いてあって

myapp6.js
angular.module('MyApp', []).
  controller('MyAppCtrl', function() {
    var self = this;
    self.image_path = 'images/block.png';
  });

って感じ。
ng-src使わないでそのまま突っ込む形(以下)は

<div ng-controller="MyAppCtrl as app">
  <img src="./{{imagePath}}" /> 
</div>

データバインディング前に( {{ }}に値を入れ込む前に)読み込まれてしまう(?)のか
404エラーが出たりするので、ダメパターン。
詳しくは公式に載ってるんじゃないかな(未調査)

ng-bind

ng-bindは値をviewにデータバインディングする感じです。わけわからんすね。
サンプル

7.html
<div ng-controller="MyAppCtrl as app">
  <p ng-bind="app.bind_message"></p>
</div>
myapp7.js
angular.module('MyApp', []).
  controller('MyAppCtrl', function() {
    var self = this;
    self.bind_message = 'sample text';
  });

{{ }}
とほとんど同じです。

{{ }}で表示すると、一瞬'{{ }}'が見えてしまう問題があるのですが
ng-bind使えば問題ないよ！っていうこと(らしいです。)

また、

<p ng-bind="app.bind_message + '(サンプルテキストです)'"></p>

bindしながら、文字を足すことができます。地味に使えます。

ng-repeat

Ajaxで通信してデータ取得するのはいいんですが、それって何個か決まってないってこと

あると思います。

ng-repeatはそういう時にいいです。
サンプル

myapp8.js
    self.obj.users[0].name = 'tack';
    self.obj.users[0].age  = '23';
    self.obj.users[1].name = 'johnny';
    self.obj.users[1].age  = '27';
    self.obj.users[2].name = 'tanaka';
    self.obj.users[2].age  = '60';
    self.obj.users[3].name = 'takahashi';
    self.obj.users[3].age  = '43';
    self.obj.users[4].name = 'uchida';
    self.obj.users[4].age  = '13';
    self.obj.users[5].name = 'saitoh';
    self.obj.users[5].age  = '37';

こういうデータを用意しておきます(Ajax通信などでデータを取得したとします)
(サンプルでconsole.logでデータを出してます)
これをview上で表示させたい時に

8.html
  <div ng-repeat="(key,val) in app.obj.users">
    <ul>
      <li>
        key=<span ng-bind="key"></span>:
        name=<span ng-bind="val.name"></span>,
        age=<span ng-bind="val.age"></span>
      </li>
    </ul>
  </div>

これでサンプルのように表示されます。

<div ng-repeat="(key,val) in app.obj.users">

ここで、app.obj.usersをクルクル回すよ！
( { key : val } の形で受け取りつつ)
っていう感じですね。

valにはnameとageが入ってるので

  name=<span ng-bind="val.name"></span>,
  age=<span ng-bind="val.age"></span>

みたいにアクセスして値を取得できます。

便利ー。

ng-repeatは他にも色々できて、奥が深いんですが、一旦コレだけ。
(まだ自分が理解しきってない)

おわりに

どーでしょう？
素のJSでもjqueryでも書けるけど
あとで見た時により分かりやすく、より明示的な感じ。
ソースも短くて済む。

なにこれすごいじゃん。革命じゃん。

Angularすごくイイです :laughing:

10
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
6