0.1.3 • Published 10 years ago

angular-domcomponent v0.1.3

Weekly downloads
3
License
MIT
Repository
github
Last release
10 years ago

Build Status npm version

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

alt tag

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.selector, HelloComponent)

If you have any idea or issue please welcome.

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.9

10 years ago

0.0.8

10 years ago

0.0.7

10 years ago

0.0.5

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago