Javascript 迁移到Angular 2.0和BindToController

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

我遵循了这里的一些指导原则，这些指导原则建议利用基于名称空间的继承在指令之间共享信息。（）

它建议：使用$scope.container.someFunction（）代替$scope.someFunction（）。变量也是如此。 使用$scope.container.variable代替$scope.variable

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

因此，我使用bindToController将容器从父指令传递到其所有子指令，遵循Angular 1.4

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

并从父指令传递它，如

 <my-directive container="container"/>

还是单独捆绑

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

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

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

有好的设计实践吗？迁移到Angular2.0有什么好处或坏处吗

---

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

使用以下过程：

• 将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);
            });
        });
    });
}

参考资料

---

似乎与这个问题类似：虽然Angular 2.0并不完全如此，但我在上面的代码中没有看到Angular 2.0特有的内容。上面应该会给你一些链接到一些不错的风格指南看看。

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);
            });
        });
    });
}