Angular JS:如何在局部加载 js 文件 [英] Angular JS: How to load js files in partials
问题描述
对 AngularJS 来说非常新，我猜我正在尝试做的术语是延迟加载.我查看了几个不同的博客，但没有找到一个完全使用 AngularJS 的完整工作解决方案.
我明白，如果我把 <script src="js/process1.js"></script> 放在 index.html 中，一切正常，我正在尝试削减减少在初始加载时下拉的 js 数量.
脚本标记位于部分中时，它永远不会加载，因此永远不会创建 P1Ctrl.因此，目前，如果用户进入应用程序并且从未访问过 process55，即使从未使用过，该用户仍然拥有 process55 的代码.
有没有办法在 process1 路由执行时加载文件并将 process1.js 中创建的对象注入 main 中定义的应用程序?
index.html:
<头><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>大型 Angular 应用</title><link rel="stylesheet" href="lib/foundation/css/foundation.min.css"/><body ng-app="largeApp" ng-controller="LargeAppController"><div><a href="#/home">首页</a>|<a href="#/process1">Process1</a><br/><br/><br/><ng-view>测试</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></html>
js/main.js:
var app = angular.module("largeApp", ['ngRoute']);var appCtrl = app.controller("LargeAppController", function(){});app.config(function ($routeProvider, $controllerProvider) {//保存对提供者的引用app.registerCtrl = $controllerProvider.register,$routeProvider.when('/', {templateUrl: 'partials/home.html'});//认为我需要设置一个解决方案来触发脚本加载器来加载 js.$routeProvider.when('/process1', {templateUrl: 'partials/process1/process1.html'});$routeProvider.otherwise({redirectTo: '/'});});partials/home.html:
主页partials/process1.html:
<script type="text/javascript" src="js/process1/Process1Controller.js"></script>进程 1 {{process1data}}js/process1.js:
console.log("我在这里做的");app.registerCtrl('Process1Controller',function($scope){$scope.process1data = "你好！";}]);要以简单的方式实现控制器的延迟加载，您必须执行以下操作:
将 $controllerProvider.register(这是将控制器添加到已引导的 AngularJS 应用程序中的唯一方法)保存到您的应用程序中的变量 (main.js):
var app = angular.module('app',["ngRoute"]);app.config(['$routeProvider', '$controllerProvider',功能($routeProvider，$controllerProvider){//记住提到的函数以备后用app.registerCtrl = $controllerProvider.register;//你的路线$routeProvider.when('/', {templateUrl: 'partials/home.html'});$routeProvider.when('/process1', {templateUrl: 'partials/process1.html'});$routeProvider.otherwise({redirectTo: '/'});}]);process1.html:
<div ng-controller="P1Ctrl">{{内容}}现在，在 process1.js 中，您使用我们的 registerCtrl:
app.registerCtrl('P1Ctrl', function($scope){$scope.content = '...';});index.html 可能保持不变.检查您的 process1.js 是否正在加载(只需在 process1.js 的主体中使用 console.log()，而不是在 <代码>P1Ctrl 控制器).如果不是，请在 Angular 之前包含 jQuery:
<script src="lib/angular/angular.js"></script>重要提示:此方法不适用于 angular 1.2.0-rc.2 和 1.2.0-rc.3，因为 jQuery 的这个小技巧不起作用.
对于更复杂(更漂亮)的解决方案，使用 .js 文件作为路由定义中的依赖项，请查看该文章:http://ify.io/lazy-loading-in-angularjs/ - 它也适用于 rc.2 和 rc.3.这是 plunk 实现描述的方法:http://plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD
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.
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.
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.
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?
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!";
}
]);
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):
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>
And now, in process1.js you use our registerCtrl:
app.registerCtrl('P1Ctrl', function($scope)
{
$scope.content = '...';
});
index.html probably remains the same. Check if your process1.js is being loaded (simply using console.log() right in the body of process1.js, not in P1Ctrl controller). If it isn't, include jQuery before Angular:
<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.
For more complex (and prettier) solution, with .js files 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
这篇关于Angular JS:如何在局部加载 js 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
