Angular JS：如何加载部分中的js文件
AngularJS非常新，我猜测我所要做的是延迟加载。 我看了几个不同的博客，我还没有find一个纯粹使用AngularJS的完整工作解决scheme。
我知道，如果我把<script src="js/process1.js"></script>放在index.html中，一切正常，我试图减lessjs的数量，加载。
在脚本标签坐在部分，它永远不会被加载，所以P1Ctrl永远不会被创build。 因此，目前，如果用户进入应用程序并且永远不会进入process55，那么即使用户从未使用过，用户仍然拥有用于process55的代码。
有没有一种方法来加载文件，并将process1.js中创build的对象插入到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!"; } ]);
要以简单的方式实现控制器的延迟加载，您必须执行以下操作：
将$controllerProvider.register （这是将控制器添加到已经引导的AngularJS应用程序中的唯一方法）保存到应用程序（ main.js ）中的variables中：
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 ：
<script src="js/process1.js"></script> <div ng-controller="P1Ctrl"> {{content}} </div>
现在，在process1.js中使用我们的registerCtrl ：
app.registerCtrl('P1Ctrl', function($scope) { $scope.content = '...'; });
index.html可能保持不变。 检查你的process1.js是否被加载（在P1Ctrl的主体中使用console.log() ，而不是在P1Ctrl控制器中）。 如果不是，请在Angular之前包含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这个小技巧是行不通的。
对于更复杂（更漂亮）的解决scheme，将.js文件作为路由定义中的依赖关系，请检查该文章： http ://ify.io/lazy-loading-in-angularjs/ – 它也适用于rc.2和rc。 3。 这里是plunk实现描述的方法： http : //plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD
