Angular-Ui-Router+ocLazyLoad 동적 로드 스 크 립 트 예제
Ui-Router 를 사용 한 후에 제 첫 번 째 생각 은 모든 기능 을 구성 하 는 것 입 니 다.보 기 를 요청 할 때 이 페이지 의 js 와 css 를 불 러 오 는 것 입 니 다.index 페이지 는 주로 필수 파일 을 불 러 옵 니 다:angular.js
그래서 이렇게 쓰 려 고 시 도 했 지만 angular 가 잘못 되 었 습 니 다.컨트롤 러 가 메 인 프로그램 에 주입 되 지 않 았 기 때 문 입 니 다.
뒤에 angular 라 이브 러 리 에서 ocLazyLoad 를 발 견 했 습 니 다.이것 은 angular 맞 춤 형 스 크 립 트 로 더 입 니 다.15K 밖 에 없습니다.
그것 을 사용 하 는 것 은 매우 간단 하 다.
순서대로 파일 불 러 오기
<script src="framework/angular/angular.min.js"></script>
<script src="framework/angular-ui-router.js"></script>
<script src="framework/ocLazyLoad.min.js"></script>
<script src="framework/app.js"></script> 경로 가 렌 더 링 되 기 전에 resolve 대상 을 실행 합 니 다.예 를 들 어 js 와 css 를 불 러 오 는 데 사 용 됩 니 다.물론 다른 용도 도 있 습 니 다.
코드:(스 크 립 트 중복 불 러 오 는 것 은 걱정 하지 마 십시오.이전에 불 러 온 스 크 립 트 는 브 라 우 저 에서 캐 시 됩 니 다)
angular.module('myRouters', ['ui.router','oc.lazyLoad'])
.state('index', {
url: '/index',
title: ' | ！',
views: {
'A': {
templateUrl: 'components/header/header.html',
controller: 'headerCtrl'
},
'C@index': {
templateUrl: 'components/header/h1.html',
controller: 'H2Ctrl'
}
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load(['components/header/H2.js',
'components/header/header.js',
'components/header/h3.js',
'components/header/header1.css']);
}]
}
}) 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Angular에서 타사 스크립트 및 CSS 작업Angular 방식으로 회로도가 있는 외부 라이브러리를 추가하거나 모듈을 가져옵니다. Angular.json은 Angular 프로젝트의 모든 설정 파일이며 표준 JavaScript 및 CSS 파일과 함께 타사 라이브...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
