Angular.js coffeescriptで学ぶ 基礎まとめ

2014年11月12日更新 view: 291 view
http://www.wingo.com/demos/AngularShieldLogo.png

angular.js の基本をまとめます

・index.html
・angular.js (coffee)

テキストをただ、表示させる

hello.message に angtest.js の panel が表示される。
テキストフィールドの値を変更すると {{hello.message}} も変わる

html

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
<div ng-app="">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="hello.message">
        <div class="{{hello.message}}">ここが装飾される</div>
    </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script src="/js/angtest.js"></script>

angtest.js

  @FirstCtrl = ($scope) ->
    $scope.hello = message: "panel"

コントローラーを2つに

コントローラーを2つにする。
それぞれ異なる data.message になる

html

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
<div ng-app="">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="data.message">
        <div class="{{data.message}}">装飾1</div>
    </div>

    <div ng-controller="SecondCtrl">
        <input type="text" ng-model="data.message">
        <div class="{{data.message}}">装飾2</div>
    </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script src="/js/angtest.js"></script>

angtest.js

  @FirstCtrl = ($scope) ->
    $scope.data = message: "panel"
    return
  @SecondCtrl = ($scope) ->

コントローラーの継承

bodyCtrl を ch2Ctrl に継承
html

<body ng-controller="bodyCtrl">
    <div ng-controller="ch2Ctrl">

    </div>
</body>

bodyCtrlで、$scopeの中に関数を入れることによって、
ch2Ctrlでも同じ関数を利用できる。
js

myApp = angular.module('myApp',['ngProgress'])
  myApp.factory "Data", ->
  @bodyCtrl = ($scope,ngProgress, Data) ->
    $scope.hoge = "tarou"
    $scope.start = ->
      ngProgress.reset()
      ngProgress.start()

  @ch2Ctrl = ($scope,ngProgress, Data) ->
    $scope.d = Data
    $scope.click = ->
      $scope.start()

モデルでデータ共有

html

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="data.message">
        <div>{{data.message}}</div>
    </div>

    <div ng-controller="SecondCtrl">
        <input type="text" ng-model="data.message">
        <div>{{data.message}}</div>
    </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script src="/js/angtest.js"></script>

angtest.js

  myApp = angular.module("myApp", [])
  myApp.factory "Data", ->
    message: "共有されるメッセージ"

  @FirstCtrl = ($scope, Data) ->
    $scope.data = Data

  @SecondCtrl = ($scope, Data) ->
    $scope.data = Data

コントローラーでデータを処理

data.message を逆さまにして返す

html

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="data.message">
        <div>{{data.message}}</div>
    </div>

    <div ng-controller="SecondCtrl">
        <input type="text" ng-model="data.message">
        <div>{{reversedMessage(data.message)}}</div>
    </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script src="/js/angtest.js"></script>

angtest.js

  myApp = angular.module("myApp", [])
  myApp.factory "Data", ->
    message: "共有されるメッセージ"

  @FirstCtrl = ($scope, Data) ->
    $scope.data = Data

  @SecondCtrl = ($scope, Data) ->
    $scope.data = Data
    $scope.reversedMessage = ->
      $scope.data.message.split("").reverse().join ""

データの繰り返し処理と検索

データを繰り返し表示します

html

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
<div ng-app="myApp">
    <div ng-controller="AvengersCtrl">

        <!--
            名前だけ検索
            <input type="text" ng-model="searchText.name">
        -->
        <input type="text" ng-model="searchText">
        <table>

            <!--
                表示
                <tr ng-repeat="actor in avengers.cast">

                名前で並び替え
                    -name name の - 有りなしで、逆順
                <tr ng-repeat="actor in avengers.cast | orderBy: '-name'">

                表示数制限 -ありで最後から 2 件表示
                <tr ng-repeat="actor in avengers.cast | limitTo: -2">

                連結もできるよ
                <tr ng-repeat="actor in avengers.cast | orderBy: 'name' | limitTo : -5">

            -->

            <tr ng-repeat="actor in avengers.cast | filter:searchText">
                <td>{{actor.name}}</td>
                <td>{{actor.character}}</td>
            </tr>
        </table>


    </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script src="/js/angtest.js"></script>

angtest.js

  @AvengersCtrl = ($scope, Avengers) ->
    $scope.avengers = Avengers

  myApp = angular.module("myApp", [])
  myApp.factory "Avengers", ->
    Avengers = {}
    Avengers.cast = [
      {
        name: "AKB48"
        character: "ヘビーローテーション"
      }
      {
        name: "安室奈美恵"
        character: "can you celbrate"
      }
      {
        name: "天地真理"
        character: "ぽっちゃり"
      }
    ]
    Avengers
スポンサードリンク

オンマウス

enter と leave を両方指定すれば、マウスが乗った時、マウスが外れた時の両方の処理ができます。

html

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
<div ng-app="myApp">
    <div enter>この上にマウスを乗せてみる。</div>
    <div enter="panel" leave>こっちも</div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script src="/js/angtest.js"></script>

angtest.js

  app = angular.module("myApp", [])

  app.directive "enter", ->
    (scope, element, attrs) ->
      element.bind "mouseenter", ->
        alert "マウスがのったお"
        element.addClass attrs.enter

  app.directive "leave", ->
    (scope, element, attrs) ->
      element.bind "mouseleave", ->
        alert "マウスがでたお"
        element.removeClass "panel"

クロスドメインAJAX

yahooのページを取得します。
クロスドメイン突破のため、jquery使います。

html

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.xdomainajax/0.11/jquery.xdomainajax.js"></script>

<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        <div enter="alertTest()">AJAXでヤフーのページを取得</div>
    </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script src="/js/angtest.js"></script>

coffee

  app = angular.module("myApp", [])

  app.controller "AppCtrl", ($scope,$http) ->
    $scope.alertTest = ->
      $.ajax(
        url: "http://www.yahoo.co.jp"
        type: "GET"
      ).done((data) =>
        console.log data
      ).fail (data) ->
        alert "error!!!"

#$applyというメソッドを用いてattrs.enter = "alertTest()"関数を適用している
#      enter 要素に対し
  app.directive "enter", ->
    (scope, element, attrs) ->
#      クリックされたら
      element.bind "click", ->
        scope.$apply attrs.enter

非同期

settimeoutやajaxなどで非同期処理を使うと $scopeの内容を変更しても反映されない。
そんなときは $apply を使う。
非同期であるCuration.searchThread を実行後 処理した結果を 反映させる。

  @ch2Ctrl = ($scope, Data) ->

    $scope.items = [
      "yume"
      "kibou"
    ]

    $scope.d = Data

    $scope.click = ->

      Curation.searchThread $scope.d.message , (res) ->
        $scope.$apply ->
          $scope.items.push "mirai"


$scope.$apply -> が味噌ですね。

ng-repeat中に エスケープさせない

今回はv.bodyをエスケープさせない
HTMLをエスケープさせない

まずは準備
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular-sanitize.min.js"></script>
myApp = angular.module('myApp',['ngSanitize'])

からの

<dl ng-repeat="(key, v) in body"  id="ch2_{{key}}" class='unkar-div' data-id="ch2sc_{{key}}">

            <dt>{{key}} {{v.name}} {{v.date}}</dt>
            <dd ng-bind-html="v.body"></dd>
        </dl>

ng-if で ng-repeat中に分岐

これで key が 0 じゃない場合のみ表示

<dl ng-repeat="(key, v) in body">
            <dt ng-if="key != 0">{{key}} {{v.name}} {{v.date}}</dt>
            <dd ng-bind-html="v.body"></dd>
        </dl>

クリックされた要素の中身を取得

これでクリックされた a タグの中のテキストを取得できる

    $scope.get2chBody = (index,event) ->
      console.log event.currentTarget.innerHTML

ng-classでクリックした要素にtoggleクラスをつける

これで dl 要素がクリックされるたびに、
クリックされた v.done が false なら true に。 true なら falseになる。

css

<style>
    .red{
        color: red;
    }
</style>

html

<dl ng-repeat="(key, v) in body" class="unkar-div" ng-click="v.done = !v.done" ng-class="{red: v.done}">
<dt ng-if="key != 0">{{key}} {{v.name}} {{v.date}}</dt>
<dd ng-bind-html="v.body"></dd>
</dl>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

10月18日 ( 金 ) にアクセスが多かった記事はこちら!