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

저는 Angular.js의 초보자이며 Backbone.js와 어떻게 다른지 이해하려고 노력했습니다 ... Backbone을 사용하는 동안 Require.js로 패키지 종속성을 관리했습니다. Angular.js와 동일한 작업을 수행하는 것이 이치에 맞습니까?

예, 구성 요소를 모듈화 하는 데 사용할 수있는 곳 angular.js과 함께 사용하는 것이 좋습니다 .require.jsrequire.js

를 사용 하는 seed 프로젝트 가 both angular.js and 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 장면에 따라 반복적으로 업데이트됩니다.)

그렇습니다.

각도 모듈은 스크립트로드 순서 또는 게으른 스크립트 페치 문제를 해결하려고 시도하지 않습니다. 이러한 목표는 직교하며 두 모듈 시스템은 나란히 살면서 목표를 달성 할 수 있습니다.

출처 : Angular JS 공식 웹 사이트

이것은 주관적인 질문이라고 생각하므로 주관적인 의견을 제시 할 것입니다.

Angular에는 모듈화 메커니즘이 내장되어 있습니다. 앱을 만들 때 가장 먼저해야 할 일은

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

그리고

app.directive(...);

app.controller(...);

app.service(...);

각도에 대한 깔끔한 스타터 앱 인 앵귤러 시드를 보면 지시어, 서비스, 컨트롤러 등을 다른 모듈로 분리 한 다음 해당 모듈을 기본 앱에 대한 의존성으로로드했습니다.

같은 것 :

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

또한 Angular는 스크립트 파일이 아닌 이러한 모듈을 메모리에로드합니다.

스크립트 파일의 지연 로딩 측면에서, 매우 큰 것을 쓰지 않는 한 솔직히 말하면 각도가 그 특성상 작성하는 코드의 양이 줄어들 기 때문에 과잉이 될 것입니다. 대부분의 다른 프레임 워크로 작성된 일반적인 앱은 각도로 작성된 경우 LOC가 약 30-50 % 감소 할 것으로 예상 할 수 있습니다.

AngularJS와 함께 RequireJS를 사용하는 것은 의미가 있지만 의존성 주입 과 관련하여 각각이 작동하는 방식을 이해하는 경우에만 두 가지가 모두 의존성을 주입 하지만 매우 다른 것을 주입합니다.

AngularJS에는 구현을 재사용하기 위해 AngularJS 모듈을 새로 작성된 모듈에 주입 할 수있는 자체 종속성 시스템이 있습니다. AngularJS 필터 "greet"를 구현하는 "first"모듈을 만들었다 고 가정 해 보겠습니다.

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

이제 "goodbye"필터를 구현하는 "second"라는 다른 모듈에서 "greet"필터를 사용하려고한다고 가정하겠습니다. "first"모듈을 "second"모듈에 주입하면됩니다 :

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

문제는 RequireJS없이이 작업을 올바르게 수행하려면 "두 번째"AngularJS 모듈을 작성하기 전에 "첫 번째"AngularJS 모듈이 페이지에로드되어 있는지 확인해야한다는 것입니다. 인용 문서 :

모듈에 따라 필요한 모듈을로드하기 전에 필요한 모듈을로드해야합니다.

그런 의미에서 RequireJS가 페이지에 스크립트를 삽입하는 깔끔한 방법을 제공하므로 서로간에 스크립트 종속성을 구성 할 수 있으므로 RequireJS가 도움을 줄 수 있습니다.

"첫 번째"및 "두 번째"AngularJS 모듈로 돌아가서 다음은 스크립트 종속성로드를 활용하기 위해 다른 파일에서 모듈을 분리하는 RequireJS를 사용하여 수행하는 방법입니다.

// 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 + '!';
      }
    });
});

"first"AngularJS 모듈을 생성하기 위해 "첫 번째"AngularJS 모듈을로드해야하는 RequireJS 콜백의 컨텐츠를 실행하기 전에 삽입 할 "firstModule"파일에 의존하고 있음을 알 수 있습니다.

참고 : RequireJS 콜백 함수 내에서 AngularJS를 사용하려면 종속성으로 "firstModule"및 "secondModule"파일에 "angular"를 삽입해야하며, "angular"를 라이브러리 코드에 맵핑하려면 RequireJS 구성에서 구성해야합니다. RequireJS 혜택을 상실하더라도 AngularJS가 전통적인 방식으로 페이지에로드 될 수도 있습니다 (스크립트 태그).

내 블로그 게시물에서 2.0 버전의 AngularJS 코어에서 RequireJS 지원에 대한 자세한 내용.

내 블로그 게시물 "AngularJS와 RequireJS의 이해"를 기반으로 한 링크 는 다음과 같습니다 .

@ganaraj가 언급했듯이 AngularJS는 핵심에 의존성 주입이 있습니다. RequireJS를 사용하거나 사용하지 않고 장난감 종자 응용 프로그램을 구축 할 때 필자는 개인적으로 RequireJS가 대부분의 사용 사례에서 과도하다고 생각했습니다.

RequireJS가 스크립트 로딩 기능 및 개발 중에 코드베이스를 깨끗하게 유지하는 데 유용하지 않다는 의미는 아닙니다. r.js 옵티 마이저 ( https://github.com/jrburke/r.js )와 아몬드 ( https://github.com/jrburke/almond )를 결합하면 매우 얇은 스크립트 로딩 스토리를 만들 수 있습니다. 그러나 종속성 관리 기능은 응용 프로그램의 핵심에서 각도별로 중요하지 않기 때문에 다른 클라이언트 측 (HeadJS, LABjs 등) 또는 서버 측 (MVC4 번 들러 ...) 스크립트 로딩 솔루션을 평가할 수도 있습니다 특정 응용 분야에 적합합니다.

예, 특히 매우 큰 SPA에 적합합니다.

일부 시나리오에서 RequireJS는 필수입니다. 예를 들어, Google Map API를 사용하는 AngularJS를 사용하여 PhoneGap 애플리케이션을 개발합니다. RequireJS와 같은 AMD 로더가 없으면 앱은 Google Map API 스크립트를 소스 할 수 없으므로 오프라인 일 때 앱이 시작될 때 충돌이 발생합니다. AMD 로더를 사용하면 사용자에게 오류 메시지를 표시 할 수 있습니다.

그러나 AngularJS와 RequireJS의 통합은 약간 까다 롭습니다. 나는 이것을 덜 고통스러운 과정으로 만들기 위해 angularAMD를 만들었습니다.

http://marcoslin.github.io/angularAMD/

짧은 대답은 말이됩니다. 최근에 이것은 ng-conf 2014에서 논의되었습니다.이 주제에 대한 이야기는 다음과 같습니다.

http://www.youtube.com/watch?v=4yulGISBF8w

게으른 로딩 컨트롤러 및 지시문 등을 계획하는 경우 angularjs와 함께 requirejs를 사용하는 것이 더 빠르고 여러 가지 지연 종속성을 단일 스크립트 파일로 결합하여 훨씬 빠른 지연 로딩을 수행하는 것이 좋습니다. RequireJS에는 쉽게 결합 할 수 있는 최적화 도구 가 있습니다. http://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/를 참조하십시오

예, Angular와 requireJS를 사용하는 것이 합리적입니다. 몇 일 동안 여러 가지 기술적 솔루션을 테스트했습니다.

서버 측에서 RequireJS로 각도 시드를 만들었습니다. 아주 간단한 것입니다. AMD가 아닌 AMD 모듈에는 SHIM 표기법을 사용합니다. 두 가지 다른 의존성 주입 시스템을 다루는 것이 매우 어렵다고 생각하기 때문입니다.

grunt 및 r.js를 사용하여 서버에서 js 파일을 연결하는 것은 SHIM 구성 (종속성) 파일에 따라 다릅니다. 따라서 앱에서 하나의 js 파일 만 참조합니다.

자세한 내용은 내 github Angular Seed로 이동 하십시오 : https://github.com/matohawk/angular-seed-requirejs

Require.js를 사용하지 마십시오. 내가 본 앱은 여러 유형의 모듈 패턴 아키텍처를 혼란스럽게 만듭니다. AMD, 공개, IIFE의 다양한 특징 등로드 온 디맨드 각도 모드 와 같은 온 디맨드 방식으로로드하는 다른 방법이 있습니다 . 다른 것들을 추가하면 코드에 cruft가 가득 차고 신호 대 잡음비 가 낮아 코드를 읽기가 어렵습니다.

여기 내가 사용하는 접근 방식이 있습니다 : http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/

이 페이지는 코드가 기능별로 분할 된 다음 구성 요소 유형으로 구분되는 AngularJS + RequireJS의 가능한 구현을 보여줍니다.

Brian Ford의 답변

AngularJS에는 자체 모듈 시스템이 있으며 일반적으로 RJS와 같은 것이 필요하지 않습니다.

참조 : https://github.com/yeoman/generator-angular/issues/40

각도가 거의 모듈화되어 있기 때문에 프로젝트 복잡성에 달려 있다고 생각합니다. 컨트롤러를 매핑 할 수 있으며 index.html 페이지에서 해당 JavaScript 클래스를 가져올 수 있습니다.

그러나 프로젝트가 커질 경우. 또는 그러한 시나리오가 예상되면 각도와 requirejs를 통합해야합니다. 에서 이 기사는 이러한 통합을위한 데모 응용 프로그램을 볼 수 있습니다.