Tổ chức mã Bộ điều khiển lớn AngularJS

Question

Tôi có bộ điều khiển lớn, tôi đã chia nó thành các bộ điều khiển con, mà tôi đưa vào các tệp khác theo chức năng của chúng.

Mọi thứ hoạt động tốt, nhưng tôi cần một lời khuyên và câu trả lời cho câu hỏi của tôi: tôi đã làm đúng chưa?

đây là một bộ điều khiển lớn:

function controller($scope, $http) { 
    //code 
    someFunction($scope, boolA, function1, function2); 
    //code 
} 

đây là mã của subcontroller của tôi trong tập tin khác, mà tôi tải sau khi front controller:

function someFunction($scope, boolA, function1, function2) { 
    //code where I use all the parametrs of function 
    function someFunctionSubcontoller() { 
    //here is used another function from other subcontroller 
    } 
} 

Is it ok để gửi các chức năng như parametrs? Có ổn không nếu tôi không trả lại bất cứ điều gì từ các điều khoản con, bởi vì $ scope xem mọi thứ? Có ổn không nếu tôi sử dụng một số chức năng của contoller trong một số khác?

Bây giờ tôi thấy đó là không tốt và không đúng, nhưng tôi cần phải chia contoller chính vì có hơn 10k hàng mã trong đó.

cảm ơn lời khuyên và trợ giúp của bạn !!!

Answer 1

Một Controller với 10.000 dòng mã hét lên mà bạn đang phá vỡ Single Responsibility Principle nhiều lần trong mã của bạn.

Thay vì thực hiện "các bộ điều khiển phụ", bạn nên cân nhắc việc sắp xếp lại mã của mình trước và chuyển các đoạn mã có thể sử dụng lại thành Dịch vụ. Sau đó, tìm kiếm các thành phần phổ biến trong giao diện người dùng của bạn mà bạn có thể chuyển đổi thành Chỉ thị và di chuyển một số logic vào Bộ điều khiển cho các Chỉ thị đó bằng cách sử dụng phạm vi cách ly. Bạn sẽ thấy rằng việc kiểm soát và kiểm tra các yếu tố này dễ dàng hơn nhiều khi chúng chịu trách nhiệm cho chính chúng.

Tiếp theo, hãy xem xét sử dụng cú pháp 'Controller As', cho phép bạn phá vỡ quan hệ của mình với $scope. Sử dụng $scope là một anti-pattern, vì rất khó để xác định nơi các mục được đặt trực tiếp trên $scope có nguồn gốc từ, được sử dụng và được sửa đổi. Nó rất dễ dàng để thấy rằng một đối tượng có một giá trị khác với những gì bạn dự định bởi vì nó đã được sửa đổi ở một nơi khác. Từ số Angular Documentation:

• Sử dụng bộ điều khiển làm cho bộ điều khiển bạn truy cập rõ ràng trong mẫu khi nhiều bộ điều khiển áp dụng cho phần tử.

• Nếu bạn đang viết bộ điều khiển của mình làm lớp bạn có quyền truy cập dễ dàng hơn vào thuộc tính và phương thức, sẽ xuất hiện trên phạm vi, từ bên trong mã bộ điều khiển.

• Vì luôn có một . trong các ràng buộc, bạn không phải lo lắng về nguyên mẫu gốc thừa kế prototypal.

Tóm lại, có thể bạn sẽ thấy rằng nếu bạn cấu trúc lại mã thay vì chỉ "chia nhỏ", bạn sẽ có một giải pháp dễ quản lý hơn, có thể kiểm chứng và đáng tin cậy hơn.

Answer 2

Tôi khuyên bạn nên sử dụng angular.module() trong khi viết mã. Tôi sẽ tách mã của bạn thành tốt theo cách 01.theo mô đun.

Bạn có thể tạo bộ điều khiển phụ và bơm bộ điều khiển bên trong bộ điều khiển chính bằng cách sử dụng phụ thuộc $controller.

var app = angular.module('myApp',[]); 

app.controller('subCtrl', function(){ 
    $scope.test3 = function(){ 
    //code 
    }; 
    $scope.test4 = function(){ 
    //code 
    }; 
}); 

app.controller('ParentCtrl', function($scope, $controller){ 
    //injecting subCtrl scope inside ParentCtrl 
    $controller('subCtrl', {$scope: $scope}); 
    //after this line method and $scope variables of subCtrl will be available. 
    $scope.test = function(){ 
    //code 
    }; 
    $scope.test2 = function($scope){ 
    //code 
    }; 
});