Angular JS: как загружать js-файлы в партиалы
Я новичок в AngularJS, я предполагаю, что термин для того, что я пытаюсь сделать, это ленивая нагрузка. Я просмотрел несколько разных блогов и не нашел полноценного рабочего решения, использующего исключительно AngularJS.
Я понимаю, что если я поставлю<script src="js/process1.js"></script> в index.html все работает нормально, я пытаюсь сократить количество js, которое снижается при начальной загрузке.
С тегом script, сидящим в партиале, он никогда не загружается, поэтому P1Ctrl никогда не создается. Поэтому в настоящее время, если пользователь заходит в приложение и никогда не переходит на процесс55, у него все еще есть код для процесса55, хотя он никогда не использовался.
Есть ли способ загрузить файл и внедрить объекты, созданные в process1.js, в приложение, определенное в main, во время выполнения маршрута process1?
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: '/'});
});
обертоны / home.html:
<div>
Home Page
</div>
обертоны / 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!";
}
]);