andreyctkn/angular-domcomponent

simple angular dom component

Angular DOM component

Installation

npm i -save angular-domcomponent

Why?

For angular.js 1.x projects which use ES2015 or class-based definition model. You can use babel or coffeescript or typescript.

if you declare angular service with class definition maybe it looks like this:

export class ServerService {

  static $inject = ['$http'];

  private BASE_URL = '';

  constructor(private $http: angular.IHttpService) { }

  public get(path, id?) {
    return this.$http.get(this.BASE_URL + path)
      .then(response => response.data);
  }
}

angular.module("app", []).service("ServerService", ServerService)

It looks very clear) but if we try to declare in similar way angular directive:

import {IHelloScope} from './hello.model';
import IDirectiveFactory = ng.IDirectiveFactory;

export class HelloComponent {
    displayName: String;
    static selector = 'hello';
    static directiveFactory: IDirectiveFactory = () => {
        return {
            restrict: 'E',
            link: (scope: IHelloScope) => new HelloComponent(scope),
            template: require('./hello.html')
        };
    };

    constructor(scope: IHelloScope) {
        scope.displayName = 'firstName';
    }
}

angular.module("app", []).directive(HelloComponent.selector, HelloComponent.directiveFactory)

and inject some services..

import {IHelloScope} from './hello.model';
import IDirectiveFactory = ng.IDirectiveFactory;

export class HelloComponent {
    static selector = 'hello';
    static directiveFactory = (): ng.IDirectiveFactory => {
         let directive = ($animate, $q, $timeout): ng.IDirective => {
            return {
                restrict: "E",
                template: require('./hello.html'),
                link: (
                    scope: IModalScope,
                    element: ng.IAugmentedJQuery,
                    attrs: ng.IAugmentedJQuery,
                    controller: any,
                ) => new HelloComponent(scope, $animate, $q, $timeout)
            };
        };

        directive.$inject = ["animate", "$q", "$timeout"];

        return directive;
    };

    constructor(scope: IHelloScope, $animate, $q, $timeout) {
        scope.displayName = 'firstName';
    }
}

angular.module("app", []).directive(HelloComponent.selector, HelloComponent.directiveFactory())

It looks very bulky..

In angular 1.5 appears the component - great, but it is a simple wrapper over the classic Directive, without possible to inject services (you can do this only from controller) and link function.

Angular DOM component - it's also a wrapper of Directive but with:

• possible to inject services
• link function will call constructor of the component. For getting any parameters from link - $scope, $element, $attrs, $controller, $transclude you need to inject them in di property:

static $inject = ["$scope", "$element", "$attrs", "$controller", "$transclude", "$http"] 

$scope, $element, $attrs, $controller, $transclude - all these parameters takes from link function and manually inject:

function link(scope, element, attrs, controller, transclude) {
    $injector.instantiate(instance, {
                            $scope: scope,
                            $element: el,
                            $attrs: attrs,
                            $controller: controller,
                            $transclude: transclude
    });
}

• all setting must be a static fields

Finally:

import {IHelloScope} from './hello.model';

export class HelloComponent {
    static selector = 'hello';
    static restrict = "E";
    static template = require('./hello.html');
    static $inject = ["$scope", "$element", "$attrs", "$controller", "$transclude", "animate", "$q", "$timeout"];

    constructor(
        $scope: IHelloScope,
        $element: ng.IAugmentedJQuery,
        $attrs: ng.IAugmentedJQuery,
        $controller: any,
        $transclude: ng.ITranscludeFunction,
        $animate: ng.IAnimateService, 
        $q: ng.IQService, 
        $timeout: ng.ITimeoutService) {
        scope.displayName = 'firstName';
    }
}

angular.module("app", []).domComponent(HelloComponent)

If you have any idea or issue please welcome.