AngularJS seed: đưa JavaScript vào các tệp riêng biệt (app.js, controllers.js, directives.js, filter.js, services.js)

Tôi đang sử dụng mẫu hạt giống góc để cấu trúc ứng dụng của mình. Ban đầu, tôi đặt tất cả mã JavaScript của mình vào một tệp duy nhất main.js,. Tệp này chứa khai báo mô-đun, bộ điều khiển, chỉ thị, bộ lọc và dịch vụ của tôi. Ứng dụng hoạt động tốt như thế này, nhưng tôi lo lắng về khả năng mở rộng và khả năng bảo trì khi ứng dụng của tôi trở nên phức tạp hơn. Tôi nhận thấy rằng mẫu angle-seed có các tệp riêng biệt cho từng tệp này, vì vậy tôi đã cố gắng phân phối mã của mình từ main.jstệp đơn vào từng tệp khác được đề cập trong tiêu đề cho câu hỏi này và được tìm thấy trong app/jsthư mục của góc -seed mẫu.

Câu hỏi của tôi là: làm cách nào để quản lý các phần phụ thuộc để ứng dụng hoạt động? Tài liệu hiện có được tìm thấy ở đây không rõ ràng lắm về vấn đề này vì mỗi ví dụ được đưa ra hiển thị một tệp nguồn JavaScript duy nhất.

Một ví dụ về những gì tôi có là:

app.js

angular.module('myApp', 
    ['myApp.filters',
     'myApp.services',
     'myApp.controllers']);

controllers.js

angular.module('myApp.controllers', []).
    controller('AppCtrl', [function ($scope, $http, $filter, MyService) {

        $scope.myService = MyService; // found in services.js

        // other functions...
    }
]);

filter.js

angular.module('myApp.filters', []).
    filter('myFilter', [function (MyService) {
        return function(value) {
            if (MyService.data) { // test to ensure service is loaded
                for (var i = 0; i < MyService.data.length; i++) {
                    // code to return appropriate value from MyService
                }
            }
        }
    }]
);

services.js

angular.module('myApp.services', []).
    factory('MyService', function($http) {
        var MyService = {};
        $http.get('resources/data.json').success(function(response) {
            MyService.data = response;
        });
        return MyService;
    }
);

main.js

/* This is the single file I want to separate into the others */
var myApp = angular.module('myApp'), []);

myApp.factory('MyService', function($http) {
    // same code as in services.js
}

myApp.filter('myFilter', function(MyService) {
    // same code as in filters.js
}

function AppCtrl ($scope, $http, $filter, MyService) {
    // same code as in app.js
}

Làm cách nào để quản lý các phần phụ thuộc?

Cảm ơn trước.

Vấn đề là do bạn "khai báo lại" mô-đun ứng dụng của mình trong tất cả các tệp riêng biệt của bạn.

Đây là khai báo mô-đun ứng dụng (không chắc chắn khai báo là thuật ngữ phù hợp) trông như thế nào:

angular.module('myApp', []).controller( //...

Đây là những gì nhiệm vụ (không chắc chắn liệu nhiệm vụ có phải là thuật ngữ phù hợp hay không) cho mô-đun ứng dụng của bạn trông như thế nào:

angular.module('myApp').controller( //...

Chú ý thiếu dấu ngoặc vuông.

Vì vậy, phiên bản cũ, một phiên bản có dấu ngoặc vuông, chỉ nên được sử dụng một lần, thường là trong app.jshoặc của bạn main.js. Tất cả các tệp được liên kết khác - bộ điều khiển, chỉ thị, bộ lọc … - nên sử dụng phiên bản thứ hai, phiên bản không có dấu ngoặc vuông.

Tôi hy vọng điều đó đúng. Chúc mừng!

Nếu bạn muốn đặt các phần khác nhau của ứng dụng ( filters, services, controllers) vào các tệp vật lý khác nhau, có hai điều bạn phải làm:

1. Khai báo các không gian tên đó (thiếu thuật ngữ tốt hơn) trong của bạn app.jshoặc trong mỗi tệp;
2. Tham khảo các không gian tên đó trong mỗi tệp.

Vì vậy, của bạn app.jssẽ trông như thế này:

angular.module('myApp', ['external-dependency-1', 'myApp.services', 'myApp.controllers'])
.run(function() {
   //...

})
.config(function() {
  //...
});

Và trong mỗi tệp riêng lẻ:

services.js

angular.module('myApp.services', []); //instantiates
angular.module('myApp.services') //gets
.factory('MyService', function() { 
  return {};
});

controllers.js

angular.module('myApp.controllers', []); //instantiates
angular.module('myApp.controllers')      //gets
.controller('MyCtrl', function($scope) {
  //snip...
})
.controller('AccountCtrl', function($scope) {
  //snip...
});

Tất cả điều này có thể được kết hợp thành một lệnh gọi:

angular.module('myApp.controllers', []) 
.controller('MyCtrl', function($scope) {
 //snip...
});    

Phần quan trọng là bạn không nên xác định lại angular.module('myApp'); điều đó sẽ khiến nó bị ghi đè khi bạn khởi tạo bộ điều khiển của mình, có thể không phải những gì bạn muốn.

Bạn gặp lỗi vì bạn chưa xác định myApp.services. Những gì tôi đã làm cho đến nay là đặt tất cả các định nghĩa ban đầu vào một tệp và sau đó sử dụng chúng trong một tệp khác. Giống như ví dụ của bạn, tôi sẽ đưa vào:

app.js

angular.module('myApp.services', []);

angular.module('myApp', 
    ['myApp.services',
      ...]);

Điều đó sẽ loại bỏ được lỗi, mặc dù tôi nghĩ bạn nên đọc bài báo mà Eduard Gamonal đã đề cập trong một trong các nhận xét.