각도 JS: js 파일을 부분적으로 로드하는 방법
Angular JS에서는 매우 새로운 말로, 제가 하려는 것은 게으른 부하라고 생각합니다.여러 블로그를 살펴보았지만, 순수하게 Angular를 사용하는 완전한 솔루션을 찾지 못했습니다.JS.
내가 만약 이 모든 걸 다 이해한다면<script src="js/process1.js"></script>index.html에서는 모두 정상적으로 동작합니다.초기 부하에서 풀다운되는 js의 양을 줄이려고 합니다.
스크립트 태그가 partial에 있으면 로드되지 않으므로 P1Ctrl은 생성되지 않습니다.따라서 현재 사용자가 어플리케이션에 접속하여 process55로 이행하지 않아도 사용자는 process55용 코드를 아직 사용하지 않았더라도 process55용 코드를 가지고 있습니다.
process1 route 실행 시 파일을 로드하여 process1.js에서 작성한 오브젝트를 main에서 정의한 app에 삽입하는 방법이 있습니까?
index.syslog:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Large Angular App</title>
<link rel="stylesheet" href="lib/foundation/css/foundation.min.css" />
</head>
<body ng-app="largeApp" ng-controller="LargeAppController">
<div>
<a href="#/home">Home</a> | <a href="#/process1">Process1</a>
</div>
<br/>
<br/>
<br/>
<ng-view>Test</ng-view>
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angular/angular-route.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
js/main.filename:
var app = angular.module("largeApp", ['ngRoute']);
var appCtrl = app.controller("LargeAppController", function(){});
app.config(function ($routeProvider, $controllerProvider) {
// save references to the providers
app.registerCtrl = $controllerProvider.register,
$routeProvider.when('/', {templateUrl: 'partials/home.html'});
//Thinking I need to set up a resolve to fire off a script loader to load js.
$routeProvider.when('/process1', {templateUrl: 'partials/process1/process1.html'});
$routeProvider.otherwise({redirectTo: '/'});
});
partials/home.module:
<div>
Home Page
</div>
partials/process1.disples:
<script type="text/javascript" src="js/process1/Process1Controller.js"></script>
Process 1 {{process1data}}
js/process1.disc:
console.log("I made it here");
app.registerCtrl('Process1Controller',function($scope){
$scope.process1data = "Hello!";
}
]);
컨트롤러의 느린 로드를 간단한 방법으로 구현하려면 다음 작업을 수행해야 합니다.
절약하다$controllerProvider.register(이것은 이미 부트스트랩된 Angular에 컨트롤러를 추가하는 유일한 방법입니다.JS 앱)을 사용하여 앱(main.js)에서 변수화:
var app = angular.module('app',["ngRoute"]);
app.config(['$routeProvider', '$controllerProvider',
function($routeProvider, $controllerProvider) {
// remember mentioned function for later use
app.registerCtrl = $controllerProvider.register;
//your routes
$routeProvider.when('/', {templateUrl: 'partials/home.html'});
$routeProvider.when('/process1', {templateUrl: 'partials/process1.html'});
$routeProvider.otherwise({redirectTo: '/'});
}
]);
프로세스 1.120:
<script src="js/process1.js"></script>
<div ng-controller="P1Ctrl">
{{content}}
</div>
이제 프로세스 1.js에서registerCtrl:
app.registerCtrl('P1Ctrl', function($scope)
{
$scope.content = '...';
});
index.displaces는 변경되지 않을 수 있습니다.다음 중 하나를 선택해주세요.process1.js로딩되고 있다(사용하여 확인)console.log()바로 몸속에process1.js, 에 없습니다.P1Ctrl컨트롤러).그렇지 않은 경우 각도 앞에 jQuery를 포함합니다.
<script src="lib/jquery/jquery.js"></script>
<script src="lib/angular/angular.js"></script>
중요: 이 방법은 각도 1.2.0-rc.2 및 1.2.0-rc.3에서는 동작하지 않습니다.jQuery에서는 이 작은 트릭이 동작하지 않기 때문입니다.
보다 복잡한(더 예쁜) 솔루션에는.js루트 정의의 의존관계로서 파일을 참조해 주세요.http://ify.io/lazy-loading-in-angularjs/ - 이 문서는 rc.2 및 rc.3과도 동작합니다.다음은 plunk 구현 방법에 대한 설명입니다.http://plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD
언급URL : https://stackoverflow.com/questions/19434249/angular-js-how-to-load-js-files-in-partials
'programing' 카테고리의 다른 글
| AngularJS - 커스텀 디렉티브에서 ngModel 값을 변경하는 방법 (0) | 2023.03.12 |
|---|---|
| @TestPropertySource는 봄 1.2.6의 AnnotationConfigContextLoader를 사용한 JUnit 테스트에서 작동하지 않습니다. (0) | 2023.03.12 |
| 자동 추가 제거자동 추가 제거문자 그대로의 내용이 없는 페이지(숏 코드 사용)에서 (0) | 2023.03.12 |
| 반응 후크의 oldValues와 newValues를 비교하는 방법 useEffect? (0) | 2023.03.12 |
| JSON.stringify에서 기능을 유지할 수 있습니까? (0) | 2023.03.12 |