[javascript] Angular.js와 함께 Require.js를 사용하는 것이 합리적입니까? [닫은]

OP의 질문이 실제로 생각하는 것을 다시 말하면 다음과 같습니다.

Angular 1.x에서 주로 응용 프로그램을 작성하고 Grunt / Gulp / Broccoli 및 Bower / NPM 시대에 (암시 적으로) 응용 프로그램을 작성하고 몇 가지 라이브러리 종속성이 더있을 수 있습니다. 필요없이 Angular를 사용하여 얻는 것 이상의 가치?

또는 다른 방법으로 넣으십시오.

” 기본 스크립트로드를 처리하는 다른 방법이있는 경우 vanilla Angular에서 기본 Angular 구성 요소로드를 효과적으로 관리해야합니까 ? “

그리고 그에 대한 기본적인 대답은 “다른 일이 없거나 더 새로운 도구를 사용할 수 없다면”이 아니라고 생각합니다.

RequireJS는 매우 중요한 문제를 해결하고 확장 성이 뛰어나고 전문적인 Javascript 응용 프로그램으로 나아 가기 시작한 훌륭한 도구입니다. 중요하게도 많은 사람들이 모듈화 개념을 접하고 세계적 범위를 벗어난 것은 처음이었습니다. 따라서 확장이 필요한 Javascript 응용 프로그램을 구축하려는 경우 Require 및 AMD 패턴은 그렇게하는 데 나쁜 도구가 아닙니다.

그러나 Require / AMD를 특히 적합하게 만드는 Angular에 특별한 것이 있습니까?실제로 Angular는 자체 모듈화 및 캡슐화 패턴을 제공하여 여러 가지 방법으로 AMD의 기본 모듈화 기능을 중복 제공합니다. 그리고 Angular 모듈을 AMD 패턴에 통합하는 것은 불가능하지 않지만 조금 까다 롭습니다. 두 가지 패턴을 훌륭하게 통합하는 데 시간을 소비 할 것입니다.

Angular 팀 자체의 관점에서, Angular Batarang의 저자이자 현재 Angular 핵심 팀의 멤버 인 Brian Ford 의 다음이 있습니다 .

AngularJS와 함께 RequireJS를 사용하지 않는 것이 좋습니다. 확실히 가능하지만 RequireJS가 실제로 유익한 사례는 보지 못했습니다.

따라서 AngularJS의 매우 구체적인 질문에서 Angular와 Require / AMD는 직교하며 중복되는 위치에 있습니다. 당신 은 할 수 있습니다그것들을 함께 사용할 있지만 Angular 자체의 본질 / 패턴과 특별히 관련이있는 이유는 없습니다.

그러나 확장 가능한 Javascript 응용 프로그램에 대한 내부 및 외부 종속성의 기본 관리는 어떻습니까? 저에게 정말 중요한 일이 필요하지 않습니까?

Bower와 NPM, 특히 NPM을 확인하는 것이 좋습니다. 이 도구의 비교 이점에 대해 성스러운 전쟁을 시작하려고하지 않습니다. 그저 고양이에게 피부를 바르는 다른 방법이 있으며, 그 방법 은 AMD / Require보다 훨씬 나을 수 있습니다. (2015 년 말, 특히 NPM, ES6 또는 CommonJS 모듈과 결합 된 인기있는 모멘텀을 가지고 있습니다. 관련 SO 질문 참조 )

게으른 로딩은 어떻습니까?

지연 로딩과 지연 다운로드는 다릅니다. Angular의 게으른 로딩은 서버에서 직접 가져 오는 것을 의미하지 않습니다. 자바 스크립트 자동화 기능이있는 Yeoman 스타일 애플리케이션에서는 전체 shebang을 하나의 파일로 연결하고 축소합니다. 그들은 존재하지만 필요할 때까지 실행 / 인스턴스화되지 않았습니다. 이 작업을 통해 얻을 수있는 속도 및 대역폭 향상은 특정 20 라인 컨트롤러의 지연 다운로드로 인한 개선 기능보다 훨씬 뛰어납니다. 실제로, 해당 컨트롤러의 낭비되는 네트워크 대기 시간 및 전송 오버 헤드는 컨트롤러 자체의 크기보다 훨씬 커집니다.

그러나 관리 인터페이스와 같이 자주 사용하지 않는 응용 프로그램 조각에 대해 지연 다운로드가 실제로 필요하다고 가정 해 봅시다. 매우 합법적 인 경우입니다. 실제로 당신을 위해 그렇게 할 수 있습니다. 그러나 거기에 또한 많은 다른 , 잠재적으로 더 유연한 옵션 같은 일을 수행. 그리고 Angular 2.0은 라우터 에 내장되어있는 우리를 위해이 문제를 처리 할 것 입니다. ( 세부 사항 )

그러나 로컬 개발 상자에서 개발하는 동안 어떻습니까?

수십 / 수백 개의 스크립트 파일을 모두 index.html에 수동으로 첨부하지 않고로드하려면 어떻게해야합니까?

Yeoman의 생성기 각도에서 하위 생성기를 보거나 generator-gulp-angular로 구현 된 자동화 패턴 또는 React의 표준 Webpack 자동화를 살펴보십시오. 구성 요소를 스캐 폴딩 할 때 파일을 자동으로 첨부하거나 특정 폴더에있는 경우 파일을 자동으로 가져 오거나 특정 글로브 패턴과 일치하는 모든 파일을 자동으로 가져 오는 깨끗하고 확장 가능한 방법을 제공합니다. 후자의 옵션을 얻은 후에는 다시 자신의 스크립트 로딩에 대해 생각할 필요가 없습니다.

결론?

요구 사항은 특정 상황에서 훌륭한 도구입니다. 그러나 가능할 때마다 곡식을 가지고 가급적 걱정을 분리하십시오. Angular는 Angular의 자체 모듈화 패턴에 대해 걱정하고 ES6 모듈 또는 CommonJS를 일반 모듈화 패턴으로 사용하는 것을 고려하십시오. 최신 자동화 도구가 스크립트로드 및 종속성 관리에 대해 걱정하게하십시오. 그리고 다른 두 가지 문제에 얽매이지 않고 세분화 된 방식으로 비동기 지연 로딩을 처리하십시오.

즉, Angular 앱을 개발하고 있지만 어떤 이유로 Javascript 자동화 도구를 사용하기 위해 컴퓨터에 노드를 설치할 수 없다면 Require가 좋은 대체 솔루션 일 수 있습니다. 그리고 사람들이 각각 자신의 의존성 또는 무언가를 선언하는 Angular 구성 요소를 동적으로로드하려는 정교한 설정을 보았습니다. 그리고 아마도 그 문제를 다른 방법으로 해결하려고 노력할 것이지만, 그 특별한 상황에 대한 아이디어의 장점을 볼 수 있습니다.

그러나 그렇지 않으면 … 새로운 Angular 응용 프로그램으로 시작하여 최신 자동화 환경을 만들 수있는 유연성을 제공 할 때 더 유연하고 현대적인 옵션이 많이 있습니다.

(진화하는 JS 장면에 따라 반복적으로 업데이트됩니다.)

답변

var app = angular.module("myApp");

app.directive(...);

app.controller(...);

app.service(...);

var app = angular.module("myApp",["Directives","Controllers","Services"];

angular
  .module('first', [])
  .filter('greet', function() {
    return function(name) {
      return 'Hello, ' + name + '!';
    }
  });

angular
  .module('second', ['first'])
  .filter('goodbye', function() {
    return function(name) {
      return 'Good bye, ' + name + '!';
    }
  });

// firstModule.js file
define(['angular'], function(angular) {
  angular
    .module('first', [])
    .filter('greet', function() {
      return function(name) {
        return 'Hello, ' + name + '!';
      }
    });
});

// secondModule.js file
define(['angular', 'firstModule'], function(angular) {
  angular
    .module('second', ['first'])
    .filter('goodbye', function() {
      return function(name) {
        return 'Good bye, ' + name + '!';
      }
    });
});