angular.jsをやってみる (1)

2013-10-21T00:00:00+00:00 angular.js JavaScript

以前からちょいちょいネタに出したりしてるけど、angular.jsの公式ドキュメントを読みつつ勉強を進めてみようかと。今回はbootstrap+conceptual overviewなセクションを読みつつ(※directiveな仕様なやつは今回は除外、別途で書く予定)

index.html

<!--
angular.bootstrapはng-appで指定しても可能
<html ng-app="hogeApp">
-->
<html>
  <head>
    <script src="http://code.angularjs.org/1.0.8/angular.js"></script>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
    <!-- ng-initってのを使えば初期処理でごにょごにょする事も可能らしいがそんなんコントローラーでやれやっていうことで無視 -->
    <div ng-controller="sample1">
      <input type="text" ng-model="name" />
      <ul class="entries">
        <!-- ng-cloakに関しては余談参照 -->
        <li class="item" ng-repeat="sample in samples | filter:name" ng-show="sample.text" ng-cloak>
          <!-- ng-bind-templateで指定した値がinnerTextな辺りにぶち込まれる模様 -->
          <span ng-bind-template="text: {% raw %}{{sample.text}}{% endraw %}" ></span>
        </li>
      </ul>
    </div>
    <!-- angular.bootstrap関係を行うスクリプト -->
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

<li ng-repeat="sample in samples|filter:name">な件に関してはAngularJSのkarmaを使ったテストでも書いてるので

main.js

// 接頭辞がNG_DEFER_BOOTSTRAPな場合はbootstrapしても待機待ち状態になるので、大樹町を解除するにはresumeBootstrapする必要あり?
window.name = "NG_DEFER_BOOTSTRAP!_x";

angular.element(document).ready(function() {
  var app = angular.module("hogeApp", []);

  // 以降でやってる$injector.getで使うかコールバック等の引数で同名のパラメーターを指定する事で自動で注入される
  // http://docs.angularjs.org/guide/concepts によると$な接頭辞なfactory定義するなとの事
  app.factory("$date", function() {
    return new Date();
  });

  // injectorを利用して取得する事も可能
  var $injector = angular.injector(["hogeApp"]);
  console.log($injector.get("$date"));

  app.controller("sample1", SampleController);

  // 上記のwindow.nameなコメント参照。
  angular.bootstrap(document, ["hogeApp"]);

  setTimeout(
    function() {
      angular.resumeBootstrap();
    },
    3000
  );
});

sample.js

var SampleController = (function () {
  // $dateはmain.jsで定義したapp.factoryで指定されたスコープ変数名を指定すれば注入される模様
  function SampleController($scope, $date) {
    $scope.samples = [
      { text: "hoge " + $date },
      { text: "fuga " },
      { text: "foobar " }
    ];

    // ng-modelなどで使用しているスコープ変数?を監視して処理を利用する事も可能な模様
    $scope.$watch("name", function(newValue, oldValue) {
      console.log("new: " + newValue);
      console.log("old: " + oldValue);
    });
  }

  return SampleController;
})();

んまぁ$scope.watchに関してはコメントで書いてるし、$scopeな件も特に言う事無いし終わり

余談: ng-cloakに関して

んまぁ公式ドキュメントにもあるのだけど、ng-repeat等で処理されているエレメントとかを処理完了後に表示するような場合にはng-cloakを使えば良いっぽい

angular.js的な所して、angular.resumeBootstrapをしない状態で確認した所だと

[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

っていうようなCSSがぶち込まれている。でこのdirectiveな所としては

var ngCloakDirective = ngDirective({
  compile: function(element, attr) {
    attr.$set("ngCloak", undefined);
    element.removeClass("ng-cloak");
  }
});

んng-cloakな属性とng-cloakなclass属性を消してる模様

angular.jsをやってみる (2) - $interpolateProvider - gradle-android-toolkitでRobolectricを動かす