角JS：如何加载谐音JS文件 [英] Angular JS: How to load js files in partials
问题描述
很新的AngularJS，我猜对我试图做的是懒加载这个术语。我已经看了几个不同的博客，我还没有发现，纯粹是用AngularJS一个完整的工作方案。
我明白，如果我把＆LT; SCRIPT SRC =JS / process1.js＆GT;＆LT; / SCRIPT＆GT; index.html中，一切工作正常，我想，以减少被推倒在初始加载JS的量。
通过脚本标记坐在部分，它永远不会加载所以从未创建的P1Ctrl。所以目前，如果用户进入应用程序，从来就没有到process55，用户仍然拥有code那里process55即使从未使用过它。
有没有办法来加载该文件，并在执行过程1路线时注入的process1.js进入主定义的应用程序创建的对象，？
index.html的：
＆LT; DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01过渡// ENhttp://www.w3.org/TR/html4/loose！ DTD＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= ISO-8859-1＆GT;
＆LT;标题＆gt;轻便角应用＆LT; /标题＆GT;
＆LT;链接rel =stylesheet属性HREF =LIB /基础/ CSS / foundation.min.css/＆GT;
＆LT; /头＆GT;
＆LT;机身NG-应用=largeAppNG控制器=LargeAppController＆GT; ＆LT; DIV＆GT;
＆LT; A HREF =＃/家＆GT;家庭和LT; / A＆GT; | ＆所述; A HREF =＃/过程1＆GT;处理1＆下; / A＆GT;
＆LT; / DIV＆GT;
＆LT; BR /＆GT;
＆LT; BR /＆GT;
＆LT; BR /＆GT; ＆LT; NG-视图＆gt;测试与LT; / NG-视图＆gt;
＆LT;脚本类型=文/ JavaScript的SRC =LIB / jQuery的/ jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =LIB /角/ angular.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =LIB /角/角route.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / main.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
JS / main.js：
VAR应用= angular.module（largeApp，['ngRoute']）;VAR appCtrl = app.controller（LargeAppController功能（）{}）;
的app.config（函数（$ routeProvider，$ controllerProvider）{
//保存到供应商的参考 app.registerCtrl = $ controllerProvider.register， $ routeProvider.when（'/'，{templateUrl：'谐音/ home.html做为'}）;
//想我需要建立一个决心火了一个脚本加载器加载JS。
$ routeProvider.when（'/过程1'，{templateUrl：'谐音/过程1 / process1.html'}）;
$ routeProvider.otherwise（{redirectTo：'/'}）;
}）;
谐音/ home.html的：
＆LT; DIV＆GT;
首页
＆LT; / DIV＆GT;
谐音/ process1.html：
＆LT;脚本类型=文/ JavaScript的SRC =JS /过程1 / Process1Controller.js＆GT;＆LT; / SCRIPT＆GT;
流程1 {{process1data}}
JS / process1.js：
的console.log（我在这里做它）;app.registerCtrl（'Process1Controller'，函数（$范围）{
$ scope.process1data =你好！;
}
]）;
要实现简单的方式控制器的延迟加载，你必须做到以下几点：
保存 $ controllerProvider.register （这是一个控制器加入到已经自举AngularJS应用程序的唯一方法）在您的应用程序变量（ main.js ）
VAR应用= angular.module（应用，[ngRoute]）;
的app.config（['$ routeProvider'，'$ controllerProvider'，
功能（$ routeProvider，$ controllerProvider）{
//记住以后使用中提到的功能
app.registerCtrl = $ controllerProvider.register;
//你的路由
$ routeProvider.when（'/'，{templateUrl：'谐音/ home.html做为'}）;
$ routeProvider.when（'/过程1'，{templateUrl：'谐音/ process1.html'}）;
$ routeProvider.otherwise（{redirectTo：'/'}）;
}
]）;
process1.html
＆LT;脚本SRC =JS / process1.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; DIV NG控制器=P1Ctrl＆GT;
{{内容}}
＆LT; / DIV＆GT;
而现在，在 process1.js 您使用我们的 registerCtrl ：
app.registerCtrl（'P1Ctrl'，函数（$范围内）
{
$ scope.content ='...';
}）;
的index.html 可能保持不变。检查您的 process1.js 是（只需使用加载的console.log（）就在体内 process1.js ，而不是 P1Ctrl 控制器）。如果不是，包括jQuery的前角：
＆LT;脚本SRC =LIB / jQuery的/ jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =LIB /角度/ angular.js＆GT;＆下; /脚本＆GT;
重要：此方法不具有角1.2.0-rc.2和1.2.0-rc.3工作，因为这与jQuery小动作不起作用。
有关更复杂（prettier）解决方案，以的.js 文件在路由定义的依赖，检查文章：http://ify.io/lazy-loading-in-angularjs/ - 它也适用于rc.2和rc.3。这里是普拉克实现上述方法： 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
这篇关于角JS：如何加载谐音JS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
