AngularJS seed: การใส่ JavaScript ลงในไฟล์แยกกัน (app.js, controllers.js, directives.js, filters.js, services.js)

ฉันใช้แม่แบบเมล็ดเชิงมุมเพื่อจัดโครงสร้างแอปพลิเคชันของฉัน เริ่มแรกฉันใส่โค้ด JavaScript ทั้งหมดลงในไฟล์เดียว, main.js. ไฟล์นี้มีการประกาศโมดูลตัวควบคุมคำสั่งตัวกรองและบริการของฉัน แอปพลิเคชันทำงานได้ดีเช่นนี้ แต่ฉันกังวลเกี่ยวกับความสามารถในการปรับขนาดและการบำรุงรักษาเนื่องจากแอปพลิเคชันของฉันมีความซับซ้อนมากขึ้น ฉันสังเกตเห็นว่าเทมเพลต angular-seed มีไฟล์แยกกันสำหรับแต่ละไฟล์ดังนั้นฉันจึงพยายามกระจายรหัสของฉันจากmain.jsไฟล์เดียวไปยังไฟล์อื่น ๆ ที่กล่าวถึงในชื่อสำหรับคำถามนี้และพบในapp/jsไดเร็กทอรีของangularแม่แบบเมล็ด

คำถามของฉันคือฉันจะจัดการการอ้างอิงเพื่อให้แอปพลิเคชันทำงานได้อย่างไร เอกสารที่มีอยู่ที่พบที่นี่ไม่ชัดเจนในเรื่องนี้เนื่องจากแต่ละตัวอย่างที่ให้มาแสดงไฟล์ต้นฉบับ JavaScript ไฟล์เดียว

ตัวอย่างของสิ่งที่ฉันมีคือ:

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
}

ฉันจะจัดการการอ้างอิงได้อย่างไร

ขอบคุณล่วงหน้า.

ปัญหาเกิดจากคุณ "ประกาศใหม่" โมดูลแอปพลิเคชันของคุณในไฟล์ที่แยกจากกันทั้งหมด

นี่คือลักษณะการประกาศโมดูลแอป (ไม่แน่ใจว่าการประกาศเป็นคำที่ถูกต้อง) มีลักษณะดังนี้:

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

นี่คือสิ่งที่มอบหมาย (ไม่แน่ใจว่าการมอบหมายเป็นคำที่ถูกต้องหรือไม่) ให้กับโมดูลแอปพลิเคชันของคุณมีลักษณะดังนี้:

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

สังเกตว่าไม่มีวงเล็บเหลี่ยม

ดังนั้นรุ่นอดีตหนึ่งที่มีวงเล็บที่ควรจะใช้เพียงครั้งเดียวมักจะอยู่ในของคุณหรือapp.js main.jsไฟล์อื่น ๆ ที่เกี่ยวข้องทั้งหมดไม่ว่าจะเป็นตัวควบคุมคำสั่งตัวกรอง ... - ควรใช้เวอร์ชันหลังซึ่งเป็นไฟล์ที่ไม่มีวงเล็บเหลี่ยม

ฉันหวังว่ามันจะสมเหตุสมผล ไชโย!

หากคุณต้องการใส่ส่วนต่างๆของแอปพลิเคชันของคุณ ( filters, services, controllers) ไว้ในไฟล์ทางกายภาพที่แตกต่างกันคุณต้องทำสองสิ่ง:

1. ประกาศเนมสเปซเหล่านั้น (เนื่องจากไม่มีคำที่ดีกว่า) ในapp.jsไฟล์ของคุณหรือในแต่ละไฟล์
2. อ้างถึงเนมสเปซเหล่านั้นในแต่ละไฟล์

ดังนั้นคุณapp.jsจะมีลักษณะดังนี้:

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

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

และในแต่ละไฟล์:

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

ทั้งหมดนี้สามารถรวมกันเป็นสายเดียว:

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

ส่วนที่สำคัญคือการที่คุณไม่ควร redefine angular.module('myApp'); ซึ่งจะทำให้ถูกเขียนทับเมื่อคุณสร้างอินสแตนซ์คอนโทรลเลอร์ของคุณอาจไม่ใช่สิ่งที่คุณต้องการ

คุณจะได้รับข้อผิดพลาดเพราะคุณไม่ได้กำหนดmyApp.servicesเลย สิ่งที่ฉันทำจนถึงตอนนี้คือการใส่คำจำกัดความเริ่มต้นทั้งหมดไว้ในไฟล์เดียวแล้วใช้ในอีกไฟล์หนึ่ง เช่นเดียวกับตัวอย่างของคุณฉันจะใส่:

app.js

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

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

นั่นควรกำจัดข้อผิดพลาดแม้ว่าฉันคิดว่าคุณควรอ่านบทความEduard Gamonal ที่กล่าวถึงในหนึ่งในความคิดเห็น