// demo for the angular.component proposal

​

// -- start hack

var origMethod = angular.module;

angular.module = function(name, reqs, configFn) {

  reqs = reqs || [];

  var module = null;

  module = origMethod(name, reqs, configFn);

  module.component = function(name, template, scope, controller, opts){

    //todo: if template ends in '.html', switch to templateUrl

    opts = opts || {};

    module.directive(name, function(){

      return {

        bindToController: true,

        template: template || "",

        scope:scope || {}, //components assume an isolatedScope

        controller: controller || function(){},

​

        //consider .directive() instead if you need these

        controllerAs: opts.controllerAs || name,

        link: opts.link,

        transclude: opts.transclude || false,

        priority: opts.priority || 0,

        require: opts.require,

        restrict: opts.restrict || 'EA',

        compile: opts.compile

      };

    });

  };

  return module;

};

// -- end hack

​

​

​

​

// -- start examples

​

​

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

​

​

// -- example just template

var helloWorldTemplate = "<h2>Hello world</h2>";

app.component("helloWorld", helloWorldTemplate);

​

​

// -- example w/ scope

var personTemplate = "<h2>Hello {{person.name}}</h2>";

var personScope = {name:"@"};

app.component("person", personTemplate, personScope);

​

​

​

// -- example w/ scope and controller

var cardTemplate = "<h1>{{card.message}} {{card.name}}</h1>";

​

var CardCtrl = function(){

  var ctrl = this;

  ctrl.message = "Bonjour";

};

​

var cardScope = {

  name: "@"

};

​

app.component("card", cardTemplate, cardScope, CardCtrl);

​

​