2

それで、私はAngular 2.0への移行について読んで、ディレクティブ/コンポーネントが互いに通信できるより良い方法を理解しようとしていました.

ここでは、ディレクティブ間で情報を共有するために名前空間ベースの継承を利用することを提案するいくつかのガイドラインに従いました。( this )

$scope.someFunction() の代わりに、$scope.container.someFunction() を使用することをお勧めします。変数についても同様です。$scope.variable の代わりに、$scope.container.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"/>

バインドする必要がある変数がたくさんあるので、それらすべての変数をコンテナーに移動して、コンテナー全体をバインドするのは良いことですか? 何かのようなもの：

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

またはそれらを個別にバインドしますか？

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

また、リンクを使用してバインドすることもできると読みましたが、これは私をさらに混乱させます。以下のリンクを使用する必要がありますか？または上記のようにbindToControllerでコンテナ全体をバインドしますか?

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

適切な設計手法はありますか? 賛否両論、Angular2.0 への移行の容易さはありますか?

これは少し自由回答の質問であることは理解していますが、いくつかのガイダンス、一般的な慣行は本当に役に立ちます。

4

1 に答える 1

1

次のプロセスを使用します。

  • $scopeAngular 1.xに依存するメソッドを TypeScript Angular 1.xcontrollerAsメソッドに変換する
  • 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);
            });
        });
    });
}

参考文献

于 2016-01-26T05:21:52.813 に答える