AngularJS - 경로를 기반으로 한 외부 JS의 동적 로딩
저는 여러 개의 보기와 각 보기를 제어할 수 있는 넥스트\백 버튼이 있는 간단한 한 페이지 모바일 앱을 만들려고 합니다.저는 Angular Mobile UI 라이브러리를 사용하고 있습니다.
기본 모형은 다음과 같습니다.
<html>
<head>
<link rel="stylesheet" href="mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css">
<link rel="stylesheet" href="mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css">
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-route.min.js"></script>
<script src="mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="app/app.js"></script>
<script src="app/firstController.js"></script>
<script src="app/secondController.js"></script>
<script src="app/thirdController.js"></script>
</head>
<body ng-app="demo-app">
<div ng-view></div>
<div ng-controller="nextBackController" class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a href="#/" class="btn btn-navbar btn-icon-only"><i class="fa fa-home fa-navbar"></i></a>
<a href="#/second" class="btn btn-navbar btn-icon-only"><i class="fa fa-list fa-navbar"></i></a>
</div>
</div>
</body>
</html>
App.js는 다음과 같습니다.
var app = angular.module('demo-app', [
"ngRoute",
"mobile-angular-ui"
]);
app.config(function($routeProvider) {
$routeProvider.when('/', { controller: "firstController",
templateUrl: "views/first.html"});
$routeProvider.when('/', { controller: "secondController",
templateUrl: "views/first.html"});
$routeProvider.when('/', { controller: "thirdController",
templateUrl: "views/first.html"});
});
controllers = {};
controllers.nextBackController = function($scope, $rootScope) {
//Simple controller for the next, back buttons so we just put it in app.js
};
app.controller(controllers);
firstController.js에는 다음과 유사한 내용이 포함됩니다.
controllers.firstController = function($scope) {
//Do our logic here!!!
};
문제는 HTML 페이지 상단에 보시면 컨트롤러를 모두 로드해야 한다는 것입니다.이것은 확장성이 없습니다.사용자가 해당 컨트롤러를 필요로 하지 않을 수도 있기 때문에 각 컨트롤러가 자체 JS 파일에 있고 각 컨트롤러를 정적으로 로드할 필요가 없기를 바랍니다.루트 전환 시 실제 JS 파일을 동적으로 로드할 수 있는 방법이 있습니까?아니면 제 "first.html", "second.html" 등의 상단에 스크립트 태그를 붙여도 될까요.
제대로 이해했다면 각 보기에 대한 특정 스크립트를 로드해야 합니까?주문 시 모듈을 로드하는 ocLazyLoader 플러그인을 사용하는 개인 프로젝트의 이 스니펫을 공유합니다.
var myApp = angular.module("myApp", [
"ui.router",
"oc.lazyLoad",
]);
그러면 라우팅에서 동적 JS/CSS 파일을 그에 맞게 로드할 수 있습니다. 이 예에서는 UI Select 플러그인 의존성을 로드하고 있습니다.
myApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
// State
.state('demo', {
url: "/demo.html",
templateUrl: "views/demo.html",
data: {pageTitle: 'demo page title'},
controller: "GeneralController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'ui.select',
// add UI select css / js for this state
files: [
'css/ui-select/select.min.css',
'js/ui-select/select.min.js'
]
}, {
name: 'myApp',
files: [
'js/controllers/GeneralController.js'
]
}]);
}]
}
})
그룬트를 잘 알고 있다면:
https://github.com/ericclemmons/grunt-angular-templates
모든 보기에서 하나의 .js를 만들려면 Grunt와 위 빌드 작업을 사용합니다.보기 디렉토리의 모든 html 파일 위에 watch task listener를 포함합니다.부분 보기를 변경할 때마다 파일의 모든 html과 캐시 별칭을 지정하는 URL로 "$templateCache" 항목이 만들어집니다.경로는 동일한 방식으로 부분 보기를 가리키지만 HTML 파일이 존재할 필요는 없습니다.템플릿이 있는 .js 파일만 해당됩니다.이것의 장점은 한 번 로드되고 전체 세션 동안 클라이언트 측에서 사용할 수 있다는 것입니다.이렇게 하면 http 호출이 줄어드므로 트래픽이 웹 서비스 호출로만 줄어들 수 있습니다.
위의 github 링크의 템플릿 예는 다음과 같습니다.
angular.module('app').run(["$templateCache", function($templateCache) {
$templateCache.put("home.html",
// contents for home.html ...
);
...
$templateCache.put("src/app/templates/button.html",
// contents for button.html
);
}]);
그룬트를 잘 모르시면
이것을 확인해 보세요.빌드, 소형화, 연결, 트랜스파일링 등을 자동화하는 데 매우 유용합니다.
당신의 앱이 방대하지 않다면, 당신은 작은 js 파일을 개별적으로 제공하는 것을 정말로 피해야 합니다.이렇게 하면 문제에서 제안한 대로 필요에 따라 파일을 가져오는 방법을 생각해 내더라도 앱 속도가 현저하게 느려집니다.
훨씬 더 나은 방법(그리고 Angular에서 사용하고 제안하는 방법)JS 팀)은 빌드 프로세스를 수행해야 합니다(사용해야 함).grunt이를 위해) 모든 javascript 파일을 연결하고 단일 app.js 파일로 제공합니다.이렇게 하면 원하는 만큼의 작은 js 파일로 구성된 코드 베이스를 유지하면서 스크립트 가져오기를 단일 요청으로 줄일 수 있습니다.
OCLazyLoad 설치 방법
1. ocLazyLoad.js 다운로드 여기서
git 저장소의 'dist' 폴더에서 확인할 수 있습니다.를 사용하여 설치할 수도 있습니다.bower install oclazyload아니면npm install oclazyload.
2. oc.lazyLoad 모듈을 응용 프로그램에 추가합니다.
var myApp = angular.module("MyApp", ["oc.lazyLoad"]);
3. JS 파일을 경로에 따라 필요에 따라 로드합니다.
myApp.controller("MyCtrl", function($ocLazyLoad){
$ocLazyLoad.load('testModule.js');
}});`
와 함께$ocLazyLoad각도 모듈을 로드할 수 있지만 새 모듈을 정의하지 않고도 구성 요소(컨트롤러/서비스/필터/...)를 로드하려는 경우 완전히 가능합니다(기존 모듈 내에서 이 구성 요소를 정의했는지 확인하십시오).
사용 방법은 여러 가지가 있습니다.$ocLazyLoad파일을 로드하려면 원하는 파일을 선택하면 됩니다.
또한 시작하고 싶지만 문서가 충분하지 않다면 '예' 폴더의 예를 참조하십시오!
RequireJS는 이 경우에 매우 유용할 수 있습니다.Require를 사용하여 JS 파일의 종속성을 선언할 수 있습니다.JS.
이 간단한 자습서를 참고할 수 있습니다.
여기서 언급한 것처럼 RequireJS를 사용하는 것이 가장 좋은 방법이라고 생각합니다. Require.js를 Angular.js와 함께 사용하는 것이 말이 됩니까?이것은 완전히 허용된 것이고 여러분이 시도하고 있는 것에 도달할 수 있게 해 줄 것입니다.
여기 코드 예시가 있습니다.
https://github.com/tnajdek/angular-requirejs-seed
표준 각도에서 어떻게 작동하는지 잘 모르겠지만 angular-ui-router를 사용할 수 있습니다.
컨트롤러는 필요에 따라 인스턴스화됩니다. 즉, 사용자가 URL을 통해 수동으로 상태로 이동할 때 $stateProvider가 올바른 템플릿을 뷰에 로드한 다음 컨트롤러를 템플릿의 범위에 바인딩합니다.
https://github.com/angular-ui/ui-router/wiki
언급URL : https://stackoverflow.com/questions/23656231/angularjs-dynamic-loading-of-external-js-based-on-routes
'sourcecode' 카테고리의 다른 글
| 이미 64비트 Oracle Database Server를 실행 중인 윈도우즈 Server에 Oracle 32비트 클라이언트 설치 (0) | 2023.11.04 |
|---|---|
| char*str={"foo",...의 차이점은 무엇입니까?} 그리고 charstr[5]={"foo",...} 배열 정의? (0) | 2023.11.04 |
| 요소 텍스트를 기반으로 한 CSS 선택기? (0) | 2023.11.04 |
| jQuery parent(), parent() 및 가장 가까운() 함수 간의 차이 (0) | 2023.11.04 |
| 이전 커밋이 아닌 커밋 수정 (0) | 2023.11.04 |