angular.js - How to convert ng1 directive to ng2?

Question

Recently the project team needs to transfer the project from ng1 to ng2. I read the relevant ng2 documentation on instructions, but I’m totally confused. I know that $element corresponds to ng2 ElementRef, but I’m still at a loss for details. Please give me some advice!

Ng1 Directive

.directive("Touchmove", function () {
    return {
        controller: ["$scope", "$element", function ($scope, $element) {

            $element.bind("touchstart", onTouchStart);
            function onTouchStart(event) {
                event.preventDefault();
                $element.bind("touchmove", onTouchMove);
                $element.bind("touchend", onTouchEnd);
            }
            function onTouchMove(event) {
                var method = $element.attr("ng-touchmove");
                $scope.$event = event;
                $scope.$apply(method);
            }
            function onTouchEnd(event) {
                event.preventDefault();
                $element.unbind("touchmove", onTouchMove);
                $element.unbind("touchend", onTouchEnd);
            }

        }]
    }
});

.directive("Touchend", function () {
    return {
        controller: ["$scope", "$element", function ($scope, $element) {

            $element.bind("touchend", onTouchEnd);
            function onTouchEnd(event) {
                var method = $element.attr("ng-touchend");
                $scope.$event = event;
                $scope.$apply(method);
            }

        }]
    }
})     

HTML

<p touchend="mRelease()" touchmove="mTouch($event)" ng-click="mTouch($event)" >
        <p ng-repeat="c in indexs" style="width:100%;height:{{hIndex}}px;">
            {{c}}
        </p>
</p>

Ng2 ??

Answer 1

Thanks for the invitation!
Instructions in Angular 2 are divided into the following three types:

• Component (Component directive): used to build UI components, inherited from the Directive class. Defined through @Component() decorator

• Attribute directive: used to change the appearance or behavior of a component. Defined via @Directive() decorator

• Structural directive: used to dynamically add or delete DOM elements to change the DOM layout. Such as ngIf, ngFor. The characteristic is the instructions starting with . is syntactic sugar, which means using HTML 5 template syntax <template>

In addition, you can take a look at the two chapters in Angular 2 The Road to Immortality - Table of Contents
:

• Angular 2 vs Angular 1 (The following two articles introduce the differences between Ng1 and Ng2 instructions. The Chinese version has not been sorted out yet, sorry)

  • Component Property Binding with @Input() in Angular 2

  • Component Event Binding with @Output() in Angular 2

• Angular 2 component learning route (for reference only)

  • This is a relatively complete component learning route. You can first get a general understanding based on the article description. The main contents are input properties, output properties, host property binding and event binding.

Answer 2

I also changed from ng1 to ng2. The approaches of the two frameworks are completely different. Even the ElementRef you mentioned does not get the DOM but uses render instead. So if the project is not very small, consider refactoring it

Answer 3

Give up and upgrade item from 1 to 2!