jQuery Angular JS：如何在局部加载 js 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19434249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS: How to load js files in partials
提问by John
Very new to AngularJS, I am guessing the term for what I am trying to do is lazy load. I have looked at several different blogs and I have not found a complete working solution that is purely using AngularJS.
AngularJS 的新手，我猜我想要做的术语是延迟加载。我查看了几个不同的博客，但没有找到一个完全使用 AngularJS 的完整工作解决方案。
I understand that if I put the <script src="js/process1.js"></script>in index.html, all works fine, I am trying to cut down on the amount of js that is pulled down on the initial load.
我明白，如果我把<script src="js/process1.js"></script>index.html放在里面，一切正常，我试图减少在初始加载时下拉的 js 数量。
With the script tag sitting in the partial, it is never loaded so the P1Ctrl is never created. So currently, if a user go into the application and never goes to process55, the user still has the code there for process55 even though it was never used.
由于脚本标签位于部分中，它永远不会加载，因此永远不会创建 P1Ctrl。因此，目前，如果用户进入应用程序并且从未访问过 process55，即使从未使用过，该用户仍然拥有 process55 的代码。
Is there a way to load the file and inject the objects created in the process1.js into the app defined in main, at the time process1 route is executed?
有没有办法在 process1 路由执行时加载文件并将 process1.js 中创建的对象注入 main 中定义的应用程序？
index.html:
索引.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:
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:
部分/home.html：
<div>
Home Page
</div>
partials/process1.html:
部分/process1.html：
<script type="text/javascript" src="js/process1/Process1Controller.js"></script>
Process 1 {{process1data}}
js/process1.js:
js/process1.js：
console.log("I made it here");
app.registerCtrl('Process1Controller',function($scope){
$scope.process1data = "Hello!";
}
]);
采纳答案by lort
To implement lazy loading of controllers in simple way, you have to do the following:
要以简单的方式实现控制器的延迟加载，您必须执行以下操作：
Save $controllerProvider.register(which is the only method to add a controller into already bootstrapped AngularJS app) to variable in your app (main.js):
保存$controllerProvider.register（这是将控制器添加到已经引导的 AngularJS 应用程序中的唯一方法）到应用程序中的变量（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: '/'});
}
]);
process1.html:
进程1.html：
<script src="js/process1.js"></script>
<div ng-controller="P1Ctrl">
{{content}}
</div>
And now, in process1.jsyou use our registerCtrl:
现在，在process1.js 中，您使用我们的registerCtrl：
app.registerCtrl('P1Ctrl', function($scope)
{
$scope.content = '...';
});
index.htmlprobably remains the same. Check if your process1.jsis being loaded (simply using console.log()right in the body of process1.js, not in P1Ctrlcontroller). If it isn't, include jQuery before Angular:
index.html可能保持不变。检查您process1.js是否正在加载（只需console.log()在 的主体中使用right process1.js，而不是在P1Ctrl控制器中）。如果不是，请在 Angular 之前包含 jQuery：
<script src="lib/jquery/jquery.js"></script>
<script src="lib/angular/angular.js"></script>
IMPORTANT:This method doesn't work with angular 1.2.0-rc.2 and 1.2.0-rc.3, because this little trick with jQuery doesn't work.
重要提示：此方法不适用于 angular 1.2.0-rc.2 和 1.2.0-rc.3，因为 jQuery 的这个小技巧不起作用。
For more complex (and prettier) solution, with .jsfiles as dependencies in route definitions, check that article: http://ify.io/lazy-loading-in-angularjs/- it also works with rc.2 and rc.3. Here is plunk implementing described method: http://plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD
对于更复杂（更漂亮）的解决方案，将.js文件作为路由定义中的依赖项，请查看该文章：http://ify.io/lazy-loading-in-angularjs/ - 它也适用于 rc.2 和 rc.3。这是 plunk 实现描述的方法：http: //plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD
