AngularJS 시드: JavaScript를 별도의 파일(app.js, controllers.js, directives.js, filters.js, services.js)에 저장합니다.

AngularJS 시드: JavaScript를 별도의 파일(app.js, controllers.js, directives.js, filters.js, services.js)에 저장합니다.

각진 시드 템플릿을 사용하여 응용 프로그램을 구성하고 있습니다.처음에는 모든 JavaScript 코드를 하나의 파일에 저장했습니다.main.js이 파일에는 모듈 선언, 컨트롤러, 디렉티브, 필터 및 서비스가 포함되어 있습니다.이렇게 어플리케이션은 정상적으로 동작하지만 어플리케이션이 복잡해짐에 따라 scalability와 유지보수가 걱정됩니다.앵귤러 시드 템플릿에는 각각 다른 파일이 있는 것을 알게 되었습니다.그래서 싱글에서 코드를 배포하려고 했습니다.main.js이 질문의 제목에 기재되어 있는 다른 각 파일에 파일을 파일화하여app/jsangular-seed 템플릿의 디렉토리.

질문입니다.어플리케이션을 동작시키기 위한 의존관계를 어떻게 관리합니까?여기에 나와 있는 기존 문서는 각각의 예제가 단일 JavaScript 소스 파일을 보여주기 때문에 이 점에 대해 명확하지 않습니다.

예를 들어 다음과 같습니다.

app.module

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

controllers.controllers.displaces

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

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

        // other functions...
    }
]);

filters.filters.displaces

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

서비스를 제공합니다.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.discloss.main.discloss.

/* 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다른 물리 파일에서는, 다음의 2개의 조작을 실행할 필요가 있습니다.

1. 이러한 이름 공간을 선언합니다(더 나은 용어가 없기 때문에).app.js또는 각 파일에 있습니다.
2. 각 파일의 네임스페이스를 참조해 주세요.

그래서, 당신의app.js다음과 같습니다.

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

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

각 파일에는 다음과 같은 것이 있습니다.

서비스를 제공합니다.js

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

controllers.controllers.displaces

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

이 모든 것을 1개의 콜로 조합할 수 있습니다.

controllers.js

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

은 다시 정의하지 한다는 입니다.angular.module('myApp'); 컨트롤러 인스턴스화 시 덮어쓰게 됩니다(원하는 컨트롤러가 아닐 수도 있습니다).

은 에러를입니다.myApp.services아직이요. 지금까지 제가 한 일은 모든 초기 정의를 한 파일에 넣은 다음 다른 파일에 사용한 것입니다.예를 들어 다음과 같이 입력합니다.

app.module

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

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

그러면 에듀아르트 가모날 씨가 댓글에서 언급한 기사를 읽어보셔야 할 것 같습니다.

언급URL : https://stackoverflow.com/questions/16771812/angularjs-seed-putting-javascript-into-separate-files-app-js-controllers-js