AngularJS 응용 프로그램에서 requirejs를 사용합니다

코어 포인트

requirejs는 JavaScript 종속성을 단순화하고 코드 기반의 유지 관리 가능성을 향상시키는 JavaScript 라이브러리입니다. 대규모 프로젝트의 의존성을 추적하는 것은 어려울 수 있으므로 대규모 프로젝트에서 특히 유용합니다.

Angular의 종속성 주입 시스템 및 요구 사항 관리는 다른 기능을 가지고 있습니다. AngularJS는 구성 요소의 필요한 객체를 처리하고 요구 사항은 모듈 또는 JavaScript 파일을 처리합니다.

angularjs 구성 요소는 요구 사항 관리 모듈로 정의 될 수 있으며 필요한 스크립트 파일을 비동기로로드해야하므로 수동으로 부팅 할 수 있습니다.
• Grunt와 같은 도구를 사용하여 배포를위한 요구 사항 모듈을 결합하고 압축하여 스크립트 파일의 다운로드 속도를 최적화 할 수 있습니다. 이 프로세스는 자동화 될 수 있으며 각 배포 단계마다 다르게 구성 할 수 있습니다.
• 대형 JavaScript 응용 프로그램을 작성하는 가장 쉬운 방법 중 하나는 코드 기반을 여러 파일로 분할하는 것입니다. 그렇게하면 코드의 유지 관리 가능성을 향상시킬 수 있지만 기본 HTML 문서에서 스크립트 태그가 없거나 잘못 배치 될 가능성이 높아질 수 있습니다. 파일 수가 증가함에 따라 추적 종속성이 어려워집니다. 이 문제는 대규모 AngularJS 응용 프로그램에도 존재합니다. 우리는 이미 응용 프로그램에서 의존성로드를 처리 할 수있는 많은 도구가 있습니다. 이 기사에서는 AngularJS와 함께 요구 사항을 사용하여 로딩 종속성의 작업을 단순화하는 방법을 배웁니다. 또한 grunt를 사용하여 requirejs 모듈이 포함 된 콤보 파일을 생성하는 방법을 살펴 봅니다.
• 요구 사항에 대한 소개
• requirejs는 JavaScript 종속성로드를 지연시키는 데 도움이되는 JavaScript 라이브러리입니다. 이 모듈에는 JS 구문 설탕이 필요한 일부 JavaScript 파일이 포함되어 있습니다. requirejs는 commonjs로 지정된 비동기 모듈을 구현합니다. 요구 사항은 모듈을 작성하고 참조 할 수있는 간단한 API를 제공합니다. requirejs에는 모듈 및 SHIM 경로와 같은 기본 구성 데이터가 포함 된 기본 파일이 필요합니다. 다음 코드 스 니펫은 main.js 파일의 프레임 워크를 보여줍니다.
응용 프로그램의 모든 모듈은 경로 섹션에 지정할 필요가 없습니다. 상대 경로를 사용하여 다른 모듈을로드 할 수 있습니다. 모듈을 정의하려면 정의 () 블록을 사용해야합니다.

모듈에는 일부 종속 모듈이있을 수 있습니다. 일반적으로 모듈의 끝에서 객체가 반환되지만 필수 요구 사항은 아닙니다.

Angular의 종속성 주입 및 요구 사항 관리

각도 개발자로부터 들었던 일반적인 질문은 Angular의 종속성 관리와 요구 사항 관리의 차이에 관한 것입니다. 이 두 라이브러리의 목적은 완전히 다르다는 것을 기억하는 것이 중요합니다. AngularJS의 내장 종속성 주입에는 시스템 처리 구성 요소에 필요한 객체가 필요합니다. 요구 사항이 모듈을로드하려고하면 모든 종속 모듈을 확인하고 먼저로드합니다. 로드 된 모듈의 객체는 캐시되고 동일한 모듈이 다시 요청 될 때 제공됩니다. 반면에 AngularJS는 이름과 해당 객체 목록을 포함하는 인젝터를 유지합니다. 구성 요소가 생성되면 항목이 인젝터에 추가되며 객체가 등록 된 이름으로 참조 될 때마다 제공됩니다.

requirejs와 angularjs의 조합

이 기사와 함께 제공되는 다운로드 가능한 코드는 두 페이지가있는 간단한 응용 프로그램입니다. 외부 종속성이 있습니다 requirejs jQuery Angularjs 각도 경로 각도 자원

angular ui nggrid

이 파일은 여기에 나열된 순서대로 페이지에 직접로드해야합니다. 필요한 AngularJS 구성 요소에 대한 코드가 포함 된 5 가지 사용자 정의 스크립트 파일이 있습니다. 이 파일이 어떻게 정의되는지 봅시다.

• angularjs 구성 요소를 requirejs 모듈로 정의하십시오 모든 angularjs 구성 요소에는 다음이 포함됩니다
• 함수 정의
종속성 주입 angular 모듈에 등록하십시오
• 위의 세 가지 작업에서는 각 모듈 내에서 처음 두 작업을 실행하고 세 번째 작업은 AngularJS 모듈을 작성하는 별도의 모듈로 수행됩니다. 먼저 구성 블록을 정의해 봅시다. 구성 블록은 다른 블록에 의존하지 않으며 끝에서 구성 기능을 반환합니다. 그러나 다른 모듈 내에 구성 모듈을로드하기 전에 블록을 구성하는 데 필요한 모든 것을로드해야합니다. config.js에는 다음 코드가 포함되어 있습니다
위의 코드 스 니펫에 의존성 주입 방식에 주목하십시오. 위에서 정의 된 구성 함수가 정상적인 JavaScript 함수이기 때문에 를 사용하여 종속성을 주입합니다. 모듈을 닫기 전에 구성 기능을 추가로 사용하기 위해 종속 모듈로 전송할 수 있도록 구성 기능을 반환합니다. 또한이 파일에는 구성 요소 별 코드가 없기 때문에 다른 유형의 각도 구성 요소를 정의하는 것과 동일한 접근 방식을 취합니다. 다음 코드 스 니펫은 컨트롤러의 정의를 보여줍니다.
• 응용 프로그램의 각도 모듈은 지금까지 정의 된 각 모듈에 따라 다릅니다. 이 파일은 다른 모든 파일의 객체를 가져 와서 AngularJS 모듈에 연결합니다. 이 파일은 를 사용하여 어디서나 참조 할 수 있으므로이 파일은 아무것도 반환 할 수도 있고 반환 할 수 있습니다. 다음 코드 블록은 각도 모듈을 정의합니다

  require.config({
      map: {
          //映射
      },
      paths: {
          //模块的别名和路径
      },
      shim: {
          //模块及其依赖模块
      }
  });

  필요한 스크립트 파일이 비동기로로드되므로 NG-App 지시문을 사용하여 각도 응용 프로그램을 부팅하는 것은 불가능합니다. 여기서 올바른 방법은 수동 부팅을 사용하는 것입니다. 이것은 main.js라는 특수 파일로 수행해야합니다. 각 모듈을 정의하는 파일의 먼저로드가 필요합니다. 이 파일의 코드는 다음과 같습니다.

  define([
      //依赖项
  ], function (
      //依赖项对象
  ) {
  
      function myModule() {
          //可以使用上面接收到的依赖项对象
      }
  
      return myModule;
  });

  grunt를 impleatejs 모듈을 결합하도록 구성하십시오 JavaScript가 많은 응용 프로그램을 배포 할 때 스크립트 파일의 다운로드 속도를 최적화하려면 스크립트 파일을 결합하고 압축해야합니다. Grunt와 같은 도구는 이러한 작업을 쉽게 자동화 할 수 있습니다. 많은 작업을 정의하여 프론트 엔드 배포 프로세스를보다 쉽게 ​​만듭니다. requirejs 파일 모듈을 올바른 순서로 결합한 다음 결과 파일을 압축하기위한 작업이 있습니다. 다른 Grunt 작업과 마찬가지로 배포의 각 단계마다 다르게 작동하도록 구성 할 수 있습니다. 다음 구성은 데모 응용 프로그램에 사용할 수 있습니다.

  이 구성은 DEV 옵션으로 Grunt를 실행할 때 압축되지 않은 파일을 생성하고 릴리스 옵션으로 Grunt를 실행할 때 압축 파일을 생성합니다. 결론

  응용 프로그램 크기가 특정 수의 파일을 초과 할 때 종속성 관리가 어려워 질 수 있습니다. 요구 사항과 같은 라이브러리는 파일로드 순서에 대해 걱정하지 않고 종속성을 더 쉽게 정의 할 수 있습니다. 종속성 관리는 JavaScript 응용 프로그램의 필수 부분이되고 있습니다. AngularJS 2.0은 내장 된 AMD를 지원합니다. grunt-contrib-requirejs

  (FAQ 부품은 너무 길고 의사 원리 목표와 일치하지 않기 때문에 생략되었습니다. FAQ 부품은 필요에 따라 재생 될 수 있습니다.)

  define([], function () {
      function config($routeProvider) {
          $routeProvider.when('/home', {templateUrl: 'templates/home.html', controller: 'ideasHomeController'})
              .when('/details/:id', {templateUrl: 'templates/ideaDetails.html', controller: 'ideaDetailsController'})
              .otherwise({redirectTo: '/home'});
      }
      config.$inject = ['$routeProvider'];
  
      return config;
  });

  .

위 내용은 AngularJS 응용 프로그램에서 requirejs를 사용합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!