console-angularというnpmのパッケージを作りました

js node angular

console-angular というnpmのパッケージを作りました。

はじめに

作った理由はangularの機能を調べるのがだるいからです。以前から benv を使ってnode.js上でangularを動くようにしていましたがその設定を毎回コピーないしは動く場所で作るというのもだるくなってきたからです。

実装としては benv をラップしているだけですし。 benv は jsdom と rewire をラップしているだけなので。真面目に使いたい場合には必須というわけでもないです。

使い方

インストール

$ npm install console-angular

コンソール上でangularのdirectiveを作ってどのようにレンダリングするか試したい時があると思います。 そのような時に以下の様な感じで使えます。 基本的には、console-angular の setup() に渡すコールバックに実行したい処理を書けば良いです。

var ca = require('console-angular');

ca.setup(function(angular, document){
  function Directive(){
    return {
      retrict: "E",
      scope: {},
      bindToController: {
      },
      controller: function(){
        this.message = "hello world";
      },
      controllerAs: "c",
      template: "<p>{{ c.message }}</p>"
    };
  }
  Directive.$inject = [];

  var app = angular.module("app", []);
  app.directive("hello", Directive);

  document.body.innerHTML = "<div><hello></hello></div>";
  var injector = angular.bootstrap(document, ["app"]);
  var $rootScope = injector.get("$rootScope");
  $rootScope.$apply();

  console.log(angular.element(document.body).html());
});

実行結果

<div><hello class="ng-isolate-scope"><p class="ng-binding">hello world</p></hello></div>

付録: contextを使ってモジュール内に登録されている全てのrestrict Eなdirectiveを探す。

付録としていかのような機能を追加しました。

var ca = require('../');
ca.setup(function(angular){
  var context = ca.context(angular);
  var inj = context.injector(["ng"]);
  var providerCache = context.providerCache;

  var mapping = {"E": [], "A": [], "C": []};

  var rx = new RegExp("");

  for (var k in providerCache){
    if(k.endsWith("DirectiveProvider")) {
      for(var instance of inj.get(k.replace("Provider", ""))) {
        for(var restrict of instance.restrict.split(rx)){
          mapping[restrict].push(instance);
        }
      }
    }
  }

  console.log("restrict E directives.");
  for (var d of mapping.E) {
    console.log("- %s", d.name);
  }
});

結果

restrict E directives.
- a
- input
- textarea
- form
- script
- select
- style
- option
- ngBindTemplate
- form
- ngInclude
- ngPluralize
- ngSwitch
- ngTransclude
- ngPattern
- ngMinlength
- ngMaxlength
- ngMin
- ngMax
- ngSrc
- ngSrcset
- ngHref