Angular JS: Wie man JS-Dateien in Teilbereichen lädt
Ganz neu für AngularJS, ich vermute, der Begriff für das, was ich versuche, ist Lazy Load. Ich habe mir verschiedene Blogs angesehen und keine vollständige funktionierende Lösung gefunden, die ausschließlich AngularJS verwendet.
Ich verstehe das, wenn ich das setze<script src="js/process1.js"></script> In index.html funktioniert alles einwandfrei. Ich versuche, die Menge an js zu verringern, die bei der anfänglichen Last verringert wird.
Wenn sich das Skript-Tag im Partial befindet, wird es niemals geladen, sodass die P1Ctrl niemals erstellt wird. Wenn ein Benutzer in die Anwendung eintritt und nie zu process55 wechselt, verfügt der Benutzer derzeit noch über den Code für process55, obwohl er nie verwendet wurde.
Gibt es eine Möglichkeit, die Datei zu laden und die in process1.js erstellten Objekte in die in main definierte App zu injizieren, wenn process1 route ausgeführt wird?
index.html:
<!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.js:
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.html:
<div>
Home Page
</div>
partials / process1.html:
<script type="text/javascript" src="js/process1/Process1Controller.js"></script>
Process 1 {{process1data}}
js / process1.js:
console.log("I made it here");
app.registerCtrl('Process1Controller',function($scope){
$scope.process1data = "Hello!";
}
]);