Angular.js와 함께 Require.js를 사용하는 것이 의미가 있습니까?
Angular.js는 처음이라서 Backbone.js와 어떻게 다른지...이전에는 Backbone을 사용하는 동안 Require.js를 사용하여 패키지의 의존관계를 관리했습니다.Angular.js에도 같은 작업을 하는 것이 말이 됩니까?
, ,, 용, 용, 사, 사, 당, 당, 당, 당, 당, yes, yes, yes, yes, yes yes,angular.js require.js할 수 .require.js컴포넌트를 모듈화 합니다.
를 사용하는 시드 프로젝트가 있습니다.both angular.js and require.js
OP의 진짜 질문은 다음과 같습니다.
어플리케이션을 주로 Angulate 1.x에서 빌드하고 Grunt/Gulp/Broccoli 및 Bower/NPM 시대에 (암묵적으로) 빌드하고 있는 경우, 또한 라이브러리 의존성이 몇 가지 더 있는 경우, 필요하지 않은 Angular 사용으로 얻을 수 있는 것보다 명확하고 구체적인 가치를 더해야 합니까?
또는 다른 방법으로 설명하겠습니다.
"기본 스크립트 로딩을 처리하는 다른 방법이 있는 경우 기본 Angular 컴포넌트 로딩을 효과적으로 관리하려면 vanilla Angular가 필요합니까?"
이에 대한 기본적인 대답은 "다른 일이 있거나 더 새롭고 현대적인 도구를 사용할 수 없는 경우"입니다.
처음에 명확히 합시다.요구하다JS는 몇 가지 매우 중요한 문제를 해결하고 확장성과 전문성을 갖춘 Javascript 애플리케이션으로 전환하는 데 도움이 되는 훌륭한 도구입니다.중요한 것은 많은 사람들이 모듈화 개념과 글로벌 범위를 벗어난 개념에 처음 접했다는 점입니다.따라서 확장성이 필요한 Javascript 애플리케이션을 구축하려면 Require와 AMD 패턴을 사용하는 것이 좋습니다.
그러나 Angular에 대해 특별히 Require/AMD에 적합한 것이 있습니까?아니요. 실제로 Angular는 자체 모듈화 및 캡슐화 패턴을 제공합니다.이러한 패턴은 AMD의 기본적인 모듈화 기능을 여러 가지 방법으로 용장화합니다.또, Angular 모듈을 AMD 패턴에 통합하는 것은 불가능하지 않지만, 조금...까다롭다이 두 가지 패턴이 잘 통합되도록 하려면 분명 시간이 걸릴 것입니다.
Angular 팀의 관점에서 보면, Angular Batarang의 저자이자 현재는 Angular 코어 팀의 멤버인 Brian Ford가 다음과 같이 설명합니다.
Require를 사용하는 것은 권장하지 않습니다.JS와 AngularJS.물론 가능하지만, 저는 지금까지 Require가JS는 실제로 유익했다.
그래서 앵글에 대한 아주 구체적인 질문에 대해서JS: 각도와 요구/AMD는 직교이며 겹치는 부분이 있습니다.함께 사용할 수 있지만, Angular 자체의 특성/패턴과 관련된 특별한 이유는 없습니다.
그러나 확장 가능한 Javascript 애플리케이션을 위한 내부 및 외부 종속성의 기본 관리는 어떻습니까?거기서 나한테 정말 중요한 일을 해야 하는 거 아냐?
Bower와 NPM, 특히 NPM을 체크하는 것을 추천합니다.나는 이 도구들의 비교적인 이점에 대해 성전을 시작하려는 것이 아니다.고양이 가죽을 벗기는 다른 방법도 있고, AMD/Require보다 더 좋을지도 모릅니다.(2015년 후반, 특히 NPM은 ES6나 Common과 조합하여 훨씬 더 많은 인기를 끌고 있습니다.JS 모듈관련 SO 질문을 참조하십시오.)
게으름 피우는 건 어때?
lazy-loading과 lazy-downloading은 다릅니다.Angular의 부하가 느리다고 해서 서버에서 직접 꺼내는 건 아니에요javascript 자동화를 갖춘 Yooman 스타일의 어플리케이션에서는 전체 shebang을 하나의 파일로 연결하고 최소화할 수 있습니다.존재하지만 필요할 때까지 실행/인스턴스화되지 않습니다.이를 통해 얻을 수 있는 속도와 대역폭의 향상은 특정 20라인 컨트롤러를 느리게 다운로드함으로써 얻을 수 있는 개선점보다 훨씬 뛰어납니다.실제로 해당 컨트롤러의 낭비되는 네트워크 지연 및 전송 오버헤드는 컨트롤러 자체의 크기보다 훨씬 커집니다.
다만, 관리 인터페이스 등, 애플리케이션의 빈도가 낮은 부분에 대해서는, 정말로 느긋한 다운로드가 필요하다고 가정해 보겠습니다.그것은 매우 정당한 경우입니다.Require는 정말로 당신을 위해 그것을 할 수 있다.그러나 동일한 작업을 수행할 수 있는 더 유연한 옵션도 많이 있습니다.그리고 Angular 2.0이 라우터에 내장되어 있는 것으로 보입니다.(상세)
하지만 내 지역 개발 박스를 개발하는 동안엔?
수동으로 index.html에 첨부할 필요 없이 수십, 수백 개의 스크립트 파일을 모두 로드하려면 어떻게 해야 합니까?
Yeoman's generator-angular의 서브제너레이터, generator-gulp-angular의 오토메이션 패턴, React의 표준 웹팩 오토메이션 등을 살펴보십시오.컴포넌트가 배치될 때 파일을 자동으로 첨부하거나 특정 폴더에 파일이 있거나 특정 글로벌 패턴과 일치하는 경우 파일을 모두 자동으로 캡처하는 등 깔끔하고 확장 가능한 방법을 제공합니다.후자의 옵션을 갖게 되면, 독자적인 스크립트 로딩에 대해 생각할 필요가 없어집니다.
결론은?
요구는 어떤 일에는 훌륭한 도구입니다.하지만 가능하면 곡식을 따르고, 가능하면 여러분의 걱정을 나누세요.Angular가 Angular 자체 모듈화 패턴을 걱정하도록 하고 ES6 모듈 또는 Common 사용을 고려합니다.일반적인 모듈화 패턴으로서의 JS.최신 자동화 툴은 스크립트 로딩과 의존관리의 문제를 안고 있습니다.또한 비동기식 게으름 부하는 다른 두 가지 우려 사항과 혼동하지 말고 세분화된 방식으로 처리하십시오.
즉, Angular 앱을 개발 중인데 어떤 이유로 인해 Javascript 자동화 도구를 사용하기 위해 Node를 머신에 설치할 수 없다면 Require가 좋은 대체 솔루션이 될 수 있습니다.또, 각 컴포넌트의 의존성을 선언하는, 각 컴포넌트를 동적으로 로드하는, 매우 정교한 설정을 봐 왔습니다.아마 다른 방법으로 문제를 해결하려고 노력하겠지만, 바로 그 특정한 상황에 대한 아이디어의 장점을 알 수 있습니다.
하지만 그렇지 않으면...새로운 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%의 감소를 기대할 수 있습니다.
요건 사용각도가 있는 JSJS는 타당하지만 의존성 주입과 관련하여 각각의 작동 방식을 이해하는 경우에만 두 JS는 매우 다른 것을 주입합니다.
AngularJS에는 Angular를 주입할 수 있는 자체 종속 시스템이 있습니다.구현을 재사용하기 위해 JS 모듈을 새로 생성된 모듈로 이동합니다.Angular를 구현하는 "첫 번째" 모듈을 만들었다고 가정해 보겠습니다.JS 필터 "그리팅":
angular
.module('first', [])
.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
}
});
이제 "안녕" 필터를 구현하는 "second"라는 다른 모듈에서 "greet" 필터를 사용한다고 가정합니다.첫 번째 모듈을 두 번째 모듈에 삽입할 수 있습니다.
angular
.module('second', ['first'])
.filter('goodbye', function() {
return function(name) {
return 'Good bye, ' + name + '!';
}
});
중요한 것은 이 작업이 필요 없이 올바르게 작동하도록 하기 위해서입니다.JS, "첫 번째" 각도가JS 모듈은 "두 번째" 각도를 생성하기 전에 페이지에 로드됩니다.JS 모듈견적서:
모듈에 따라서는 필요한 모듈을 로드하기 전에 필요한 모듈을 로드해야 함을 의미합니다.
그런 의미에서, 여기서 필요한 부분입니다.JS는 필요에 따라 고객을 지원합니다.JS는 페이지에 스크립트를 주입하는 깔끔한 방법을 제공하여 서로 간의 스크립트 종속성을 구성할 수 있도록 지원합니다.
"첫 번째"와 "두 번째" 각도로 돌아가기JS 모듈, Require를 사용하여 수행하는 방법은 다음과 같습니다.JS는 로드되는 스크립트 종속성을 활용하기 위해 모듈을 서로 다른 파일로 분리합니다.
// 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 + '!';
}
});
});
Require의 내용 전에 삽입되는 "first Module" 파일에 의존하고 있음을 알 수 있습니다."첫 번째" 각도가 필요한 JS 콜백을 실행할 수 있습니다."두 번째" 각도를 생성하기 위해 로드되는 JS 모듈JS 모듈
사이드 노트:Angular를 사용하려면 종속성으로서 "first Module" 및 "second Module" 파일에 "angular"를 삽입해야 합니다.요건 내의 JSJS 콜백 함수는 Require로 설정해야 합니다.라이브러리 코드에 "angular" 매핑하는 JS 구성.Angular가 있을 수 있습니다.JS도 기존 방식(스크립트 태그)으로 페이지에 로드되지만 패배는 필수입니다.JS의 장점
요구 사항의 상세Angular에서 JS 지원JS core 2.0 버전부터 블로그 포스트에 올려놓았습니다.
블로그 투고 「요구의 의미를 이해한다」에 근거하고 있습니다.JS with AngularJS" 링크입니다.
@ganaraj가 말했듯이 AngularJS의 핵심에는 의존성 주입이 있습니다.RequireJS를 사용하거나 사용하지 않고 장난감 시드 애플리케이션을 만들 때 개인적으로 RequireJs를 찾았습니다.JS는 대부분의 사용 사례에서 과잉 살상이었을 것입니다.
필요성은 없습니다.JS는 스크립트 로드 기능과 개발 중에 코드베이스를 깔끔하게 유지하는 데 유용하지 않습니다.r.timizer(https://github.com/jrburke/r.js))와 아몬드(https://github.com/jrburke/almond))를 조합하면 매우 슬림한 스크립트 로딩 스토리를 만들 수 있습니다.단, 의존관계 관리 기능은 어플리케이션의 핵심에 angular가 있기 때문에 다른 클라이언트 측(HeadJ, LABJ 등) 또는 특정 어플리케이션의 서버 측(MVC4 Bundler 등) 스크립트 로드 솔루션도 평가할 수 있습니다.
네, 그렇습니다. 특히 매우 큰 SPA의 경우 그렇습니다.
시나리오에 따라서는 [Require](필수)JS는 필수입니다.예를 들어 Angular를 사용하여 PhoneGap 어플리케이션을 개발하고 있습니다.JS는 Google Map API도 사용합니다.RequireJS와 같은 AMD 로더가 없으면 앱은 Google Map API 스크립트를 소싱할 수 없기 때문에 오프라인 상태에서 실행 시 크래시됩니다.AMD 로더를 사용하면 사용자에게 오류 메시지를 표시할 수 있습니다.
그러나 Angular 간의 통합JS 및 요구JS는 좀 까다로워.나는 각진 것을 만들었다.AMD는 이 프로세스의 번거로움을 덜어줍니다.
http://marcoslin.github.io/angularAMD/
간단히 말하면, 말이 되네.최근 ng-conf 2014에서 논의되었습니다.이 토픽에 대한 강연은 다음과 같습니다.
http://www.youtube.com/watch?v=4yulGISBF8w
컨트롤러나 디렉티브 등을 느리게 로드할 계획이라면 angularjs와 함께 requirejs를 사용하는 것이 좋습니다.또한 여러 개의 느린 종속성을 단일 스크립트 파일에 결합하여 훨씬 빠른 느린 로드를 실현합니다.요구하다JS에는 결합을 쉽게 하는 최적화 도구가 있습니다.http://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/ 를 참조해 주세요.
네, 사용하기에 적절합니다.JS와 Angular는 몇 가지 기술적 솔루션을 테스트하는 데 며칠을 소비했습니다.
나는 각진 씨앗을 요구로 요구로 만들었다.서버측의 JS.아주 간단한 거.AMD 모듈이 아닌 AMD 모듈에는 SIM 표기법을 사용합니다.두 개의 다른 의존성 주입 시스템을 처리하는 것은 매우 어렵다고 생각하기 때문입니다.
서버에 js 파일을 연결하기 위해 grunt와 r.js를 사용합니다.이것은 SIM 설정(의존성) 파일에 의존합니다.그래서 앱에서 js 파일 하나만 참조합니다.
자세한 내용은 my github Angular Seed: https://github.com/matohawk/angular-seed-requirejs를 참조하십시오.
Require.js를 사용하지 않도록 하겠습니다.이를 실현하는 어플리케이션은 여러 유형의 모듈 패턴 아키텍처가 뒤죽박죽으로 되어 있습니다.AMD, 노출, 다양한 종류의 IIFE 등load OnDemand Angular mod 등 온 디맨드로 로드하는 다른 방법이 있습니다.그 외의 것을 추가하면, 코드에 크러프트가 가득 차, 신호 대 잡음비가 낮아져 코드를 판독하기 어려워집니다.
다음은 제가 사용하는 접근법입니다.http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/
페이지에는 Angular 구현이 표시됩니다.JS + RequireJS. 여기서 코드는 피쳐 및 컴포넌트 유형별로 분할됩니다.
Brian Ford의 답변
AngularJS에는 자체 모듈 시스템이 있으며 일반적으로 RJS와 같은 것은 필요하지 않습니다.
참고 자료: https://github.com/yeoman/generator-angular/issues/40
각도가 거의 모듈화되어 있기 때문에 프로젝트의 복잡성에 따라 다르다고 생각합니다.컨트롤러는 매핑할 수 있으며 이러한 JavaScript 클래스를 index.html 페이지에서 Import하기만 하면 됩니다.
하지만 당신의 프로젝트가 더 커질 경우를 대비해서.또는 이러한 시나리오를 예상할 경우 angular를 requirejs와 통합해야 합니다.이 기사에서는 이러한 통합을 위한 데모 앱을 볼 수 있습니다.
언급URL : https://stackoverflow.com/questions/12529083/does-it-make-sense-to-use-require-js-with-angular-js
'programing' 카테고리의 다른 글
| #ifdef #ifndef(자바어) (0) | 2022.10.25 |
|---|---|
| GitHub에서 Maven 종속성을 로드하는 중 (0) | 2022.10.25 |
| VueJ: 참조 방법컴포넌트 데이터 속성에 $store (0) | 2022.10.25 |
| MariaDB 및 HAProxy(클러스터)와의 접속 문제 (0) | 2022.10.25 |
| GROUP BY에 행이 없을 때 COUNT() 값을 얻으려면 어떻게 해야 합니까? (0) | 2022.10.25 |