ui-router 에서 ocLazy Load 와 resolve 를 사용 하 는 구체 적 인 방법

1.AngularJS 필요 에 따라 불 러 오기
AngularJS 는 주로 SPA(Single Page Application)프로젝트 를 개발 하기 때문에 소형 프로젝트 에서 services,filers,controllers 는 index.html 에 불 러 옵 니 다.구 글 이 준 AngularJS 공식 angular-seed 와 angular-phoonecat 은 모두 이렇다.
복잡 한 점,대형 프로젝트 에 대해 모든 내용 을 처음부터 불 러 오 면 첫 페이지 의 성능 에 큰 영향 을 미 칩 니 다.정적 javascript 파일 이 CDN 을 사용 하 더 라 도 성능 에 큰 영향 을 줍 니 다.필요 에 따라 불 러 오 는 모든 메커니즘 을 도입 해 야 합 니 다.Angular1.x 버 전에 서 ocLazyLoad 는 좋 은 단추 로 해결 방안 을 불 러 옵 니 다.
2.ocLazyLoad 기능
ocLazyLoad: your solution for lazy loading with Angular 1.x
입문 은 참조 할 수 있 습 니 다빠 른 입문코드 도 매우 간단 합 니 다.
1.ocLazy Load 파일 을 도입 하여 npm 와 bower 를 사용 하여 설치 할 수 있 습 니 다.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="libs/angular-ui-router/angular-ui-router.js"></script>
<script src="libs/ocLazyLoad/ocLazyLoad.js"></script>

2.oc.lazyLoad 모듈 주입

var myApp = angular.module("MyApp", ["oc.lazyLoad"]);

3.컨트롤 러 에 지정 한 모듈 불 러 오기

myApp.controller("MyCtrl", function($ocLazyLoad) {
 $ocLazyLoad.load('testModule.js');
});

실제 항목 에서 service 와 contrller 파일 은 ocLazy Load 를 통 해 불 러 오고 resolve 에 불 러 옵 니 다.코드 예 시 는 다음 과 같다.

.state('detail',{
   url:"/detail/:bookId",
   templateUrl:"/templates/detail.html",
   controller:"DetailController",
   controllerAs:'ctrl',
   resolve:{
    load:['$ocLazyLoad',function($ocLazyLoad){
     return $ocLazyLoad.load([
      'services/dataService.js'
      ]);
    }],
    currentBook:['$ocLazyLoad','$stateParams','$injector',function($ocLazyLoad,$stateParams,$injector){
     var bookId=$stateParams.bookId;
     return $ocLazyLoad.load('services/booksService.js').then(function(){
      return $injector.get('booksService').getBookById(bookId);;
     });

    }]
   }
  })

3.resolve 속성
resolve 는 state 설정 매개 변수 에서 하나의 대상(key-value)입 니 다.모든 value 는 주입 에 의존 할 수 있 는 함수 이 고 promise(물론 값 일 수도 있 습 니 다.resloved defer)를 되 돌려 줍 니 다.
4.resolve 에서 서비스 불 러 오기
resolve 에서 서 비 스 를 불 러 옵 니 다.그러나 요청 은 모두 비동기 입 니 다.돌아 오 는 순 서 는 순서대로 오 는 것 이 아 닙 니 다.currentBook 에 서 는 books Service 에 있 는 getBookById()방법 을 호출 해 야 합 니 다.이 때 load 에 dataService.js 를 불 러 왔 지만 currentBook 에 서 는 getBookById()방법 을 사용 할 수 없 기 때문에 currentBook 대상 에 서 는 books Service.js 를 다시 불 러 와 야 합 니 다.이 럴 때 는$injector 의 get()방법 이 필요 합 니 다.$injector
5.도서 목록 과 상세 페이지 demo

6.인터넷 주소 참조
ocLazyLoad
ui-router 에서 resolve 속성
종합 예시:https://www.jb51.net/article/92624.htm
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.