Difference between AngularJS(1.x) and Angular (2/4) Decorator

Question

I am getting started with Angular version 2 and came across @Component Decorator. I could recall that AngularJS(1.x) also had a concept of Decorator where it was used extend/change the default implementation of any service.

It seems like in Angular 2, rather than changing/extending the default functionality, they add metadata to something ranging from Class(using @Component) to a property(using Input()/Output() decorators) and the list goes on for Pipes and services etc.

Could someone provide the differences, if any, between the two in terms of concept/actual working.

Thanks. Deepak

Answer 1

AngularJS

AngularJS decorator is an OOP pattern.

It is rarely used in AngularJS to extend behavior of the built-in objects. For example, the following implementation uses $provider.decorator() to intercept $log.debug() calls and dynamically prepend timestamp information.

$provide.decorator('$log', [
    "$delegate", function ($delegate) {
        // Save the original $log.debug()
        var debugFn = $delegate.debug;

        $delegate.debug = function () {
            var args = [].slice.call(arguments),
                now = DateTime.formattedNow();

            // Prepend timestamp
            args[0] = supplant("{0} - {1}", [now, args[0]]);

            // Call the original with the output prepended with formatted timestamp
            debugFn.apply(null, args)
        };

        return $delegate;
    }
]);

Angular

Angular decorators is a language-feature that:

offers a convenient declarative syntax to modify the shape of class declarations. This capability can be used for myriad purposes including modifying the descriptor of the declared member (@nonconfigurable/@enumerable), adding metadata (as used by Angular), and more. It allows attaching accessing

Angular uses it to attach metadata to a class, class member (property) and method parameters. To see how Angular does this read Implementing custom component decorator in Angular.

In the versions greater than 4 Angular will be moving away from dynamic evaluation of decorators during runtime and will be using static code analysis to extract metadata specified in the decorator descriptors.