Angular JS: Cómo cargar archivos js en parciales
Muy nuevo en AngularJS, supongo que el término para lo que estoy tratando de hacer es carga perezosa. He consultado varios blogs diferentes y no he encontrado una solución de trabajo completa que utilice AngularJS.
Entiendo que si pongo el<script src="js/process1.js"></script> en index.html, todo funciona bien, estoy tratando de reducir la cantidad de js que se tira en la carga inicial.
Con la etiqueta de script en el parcial, nunca se carga, por lo que nunca se crea el P1Ctrl. Entonces, actualmente, si un usuario ingresa a la aplicación y nunca va al proceso55, el usuario todavía tiene el código para el proceso55 aunque nunca se usó.
¿Hay alguna forma de cargar el archivo e inyectar los objetos creados en process1.js en la aplicación definida en main, en el momento en que se ejecuta la ruta 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: '/'});
});
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!";
}
]);