javascript - 迁移到 Angular 2.0 和 BindToController

Question

因此，我正在阅读有关迁移到 Angular 2.0 的内容，并试图了解指令/组件可以相互通信的更好方式。

我遵循了这里的一些指南，这些指南建议利用基于命名空间的继承在指令之间共享信息。( this )

它建议:使用 $scope.container.someFunction() 而不是 $scope.someFunction()。变量也是如此。 使用 $scope.container.variable 而不是 $scope.variable。

因此，目前在我的项目中，我几乎没有指令(更多的是父子关系)需要相互通信。

因此，我使用 Angular 1.4 之后的 bindToController 将一个容器从父指令传递到它的所有子指令。

directive ('myDirective', function () {
     return {
     restrict: 'E',
     scope: {},
     bindToController: {
       container: '='
     },
     controllerAs: 'ctrl',
     templateUrl: 'components/my-page.html',
     controller: MyController
};

然后从父指令传递它

 <my-directive container="container"/>

由于我有很多变量需要绑定(bind)，将所有这些变量移动到容器中并绑定(bind)整个容器是否好？像这样的东西:

 $scope.container = {
   variable1: ...
   variable2: ...
   function1: ...
   function2: ...
}

还是单独绑定(bind)它们？

 bindToController: {
   variable1: '=',
   variable2: '=',
   ....
 },

此外，我读到我也可以使用链接来绑定(bind)，这让我更加困惑。我应该使用下面的链接吗？或 bindToController 如上所述绑定(bind)整个容器？

 link: function($scope, $element, $attrs, controller) {
   // access controller.container.variable1 here
 }

是否有好的设计实践？迁移到 Angular2.0 有什么优缺点和难易程度？

我知道这是一个有点开放性的问题，但一些指导和常见做法会非常有帮助。

Answer 1

使用以下流程:

• 将 Angular 1.x $scope 相关方法转换为 TypeScript Angular 1.x controllerAs 方法
• 将 TypeScript Angular 1.x 指令转换为 Angular 2.0 指令

例如:

class ToDoListController {
    name: string;
    listItems: any[];

    newItemName: string;

    constructor() {
        this.name = "";
        this.listItems = [];
    }

    save() {
    }

    toggle(listItem: ListItem){
    }
}

无需 $scope 依赖即可测试:

module TypeScriptAndAngular.Controllers.Tests {
    describe("ToDoListController Tests", () => {
        var listScopeMock: Directives.IToDoListScope;

        describe("Constructor Tests", () => {

            it("Constructor sets defaults as expected", () => {
                // Arrange
                var name = "A List Name";
                listScopeMock = {
                    name: name
                }

                // Act
                var ctrl = new Controllers.ToDoListController(listScopeMock);

                // Assert
                expect(ctrl.name).toEqual(name);
                expect(ctrl.listItems).toBeDefined();
                expect(ctrl.newItemName).toBeUndefined();
                expect(ctrl.listItems.length).toBe(0);
            });
        });

        describe("Save Tests", () => {
            it("Save does nothing if no task name has been entered", () => {
                // Arrange
                var ctrl = new Controllers.ToDoListController(listScopeMock);

                // Act
                ctrl.save();

                // Assert
                expect(ctrl.listItems.length).toBe(0);
            });

            it("Save does nothing if task name is empty string", () => {
                // Arrange
                var ctrl = new Controllers.ToDoListController(listScopeMock);
                ctrl.newItemName = "";

                // Act
                ctrl.save();

                // Assert
                expect(ctrl.listItems.length).toBe(0);
            });

            it("Save adds a new item with the specified name", () => {
                // Arrange
                var taskName = "A new task";
                var ctrl = new Controllers.ToDoListController(listScopeMock);
                ctrl.newItemName = taskName;

                // Act
                ctrl.save();

                // Assert
                expect(ctrl.listItems.length).toBe(1);
                expect(ctrl.listItems[0].name).toBe(taskName);
            });
        });

        describe("Toggle Tests", () => {
            it("Toggle sets complete to FALSE if it was originally TRUE", () => {
                // Arrange
                var item = new ListItem("A new item", true);
                var ctrl = new Controllers.ToDoListController(listScopeMock);

                // Act
                ctrl.toggle(item);

                // Assert
                expect(item.isComplete).toBe(false);
            });

            it("Toggle sets complete to TRUE if it was originally FALSE", () => {
                // Arrange
                var item = new ListItem("A new item", false);
                var ctrl = new Controllers.ToDoListController(listScopeMock);

                // Act
                ctrl.toggle(item);

                // Assert
                expect(item.isComplete).toBe(true);
            });
        });
    });
}

引用资料

• Writing Cleaner AngularJS with TypeScript and ControllerAs

• The Many Benefits of AngularJS's controllerAs

• Kicking TypeScript's Tires