AngularJS는 인스턴스 code_AngularJS의 주문형 비동기 로딩을 구현합니다.

AngularJS는 라우팅을 통해 멀티뷰 애플리케이션을 지원하며, 라우팅을 기반으로 필요한 뷰를 동적으로 로드할 수 있습니다. 이는 AngularJS 설명서에 자세히 설명되어 있고 인터넷에 튜토리얼도 많이 있으므로 소개할 필요가 없습니다!

뷰 수가 계속 증가할수록 js 파일도 점점 더 많아질 것이고, AngularJS는 기본적으로 모든 js를 한 번에 로드해야 하므로 사용이 매우 불편하므로 요청 시 모듈을 로드해야 하는 수요가 생길 것입니다. 그러나 AngularJS는 주문형 로딩을 구현하지 않습니다.

저는 seajs의 비동기 로딩 방식에 익숙해서, Angular도 비동기 로딩을 사용할 수 있다고 생각했는데, 사실 제가 원하는 것은 아닙니다.

Angularjs는 requirejs와 마찬가지로 사전 로드 방식을 사용하여 모듈을 구성합니다(이는 seajs의 지연 로딩과 정반대입니다). 단일 페이지 애플리케이션에 모듈이 점점 더 많아진다는 것은 필요한 모듈이 있다는 의미입니다. 사전 로드된 항목도 점점 더 많아질 것이며 이는 Angle이 조명 애플리케이션 개발에 더 적합하다는 것을 보여줄 수도 있습니다.

공식적으로 시작됩니다

라우팅을 위해 angle-ui-router를 사용했고, 모듈 로더는 requirejs입니다

//路由
{
 state : 'login',
 templateUrl : 'login/login.html',
 controller : 'loginCtrl',
 resolve: {
  realCtrl : function ($q) {
   var def = $q.defer();
   require(['/features/login/login.js'], function (loginCtrl) {
    def.resolve(loginCtrl)
   });
   return def.promise;
  }
 }
},

// 获得$controllerProvider
app.config(function($controllerProvider) {
 app.registerController = $controllerProvider.register;
 // ...
})

// loginControler
app.registerController('loginCtrl', function ($scope) {
 // do something
});

Angular 애플리케이션에 대한 주문형 로딩 구현 방법

단일 페이지 애플리케이션인 Angular를 사용하여 개발한 시스템이 있습니다. 시스템을 반복하면서 첫 번째 화면 코드가 너무 커져서 시스템을 변환해야 합니다.

우리는 주로 3가지 문제에 직면합니다

1. 모듈 로딩 프레임워크가 필요한가요?

2. 비동기적으로 로드된 페이지 구성 요소를 등록하는 방법은 무엇입니까?

3. 페이지 구성 요소는 언제 로드되어야 합니까?

첫 번째 질문에 대해서는 Angular 자체에 이미 모듈식 솔루션 세트가 있기 때문에 모듈 로딩 프레임워크를 도입하는 것은 약간 중복되고 전체 변환량이 상대적으로 크기 때문에 고려하지 않습니다.

따라서 구성요소를 로드하는 loadscript 메소드를 구현하면 됩니다. 여러 파일의 직렬 및 병렬 로딩과 페이지가 반복적으로 전환될 때 반복 로딩을 방지하려면 약간의 주의가 필요합니다.

두 번째 질문은 더 짜증납니다. Angular에는 "시작"이라는 용어가 있습니다. "시작"은 domcontentloaded 후에 발생하며 기본 모듈에 주입된 모든 종속성이 컴파일됩니다.

시작한 후 컨트롤러, 파생 API 및 기타 API를 사용하려는 경우 오류가 직접 보고됩니다

현재 이 문제를 해결하는 방법은 메인 모듈의 공급자를 사용하여 컨트롤러를 적극적으로 등록하는 것뿐입니다. 그러나 공급자를 직접 사용할 수 없으므로 메인 모듈 아래에 저장합니다.

저장된 메소드를 사용하여 비동기적으로 로드된 페이지 구성 요소를 등록할 수 있습니다. 단점은 모든 하위 페이지가 메인 모듈 아래에 있다는 것입니다.
세 번째 질문에 대해서는 운영 플랫폼이 단일 페이지 애플리케이션이므로 라우팅이 해시 변경을 모니터링할 때 가장 좋은 로딩 시간이 있어야 합니다. 그러나 우리의 라우팅은 하드 코딩된 정적 구성이므로 좋은 해결책을 찾지 못했습니다. 처음에는.
나중에 그런 API를 발견했습니다

아마도 $routeChangeSuccess 이전에 뭔가를 할 수 있을 것 같은데 여기에 로딩 시간을 두는 것이 가장 적합합니다
구체적인 구현은 아마도 이렇습니다

이제 계획이 승인됐는데 어떤 작업이 남았나요?
1. 앞으로 새로운 페이지를 개발할 때 라우팅 구성에 이것만 작성하면 됩니다.

2. 기존 페이지를 모두 변환합니다. 이전에는 주문형 로딩이 없었기 때문에 서로 다른 페이지 간의 서비스 결합이 심각합니다. 앞으로 새 페이지를 개발할 때 서비스가 서로 공유된다는 점에 유의해야 합니다. 다른 페이지는 아래 구성요소에 배치하는 것이 가장 좋습니다.

3. 빌드를 변경하고 경로의 js 참조를 cdn 경로로 바꿉니다.