Joh*_*ohn 47 html javascript jquery angularjs
对AngularJS来说很新,我猜测我要做的事情就是延迟加载.我查看了几个不同的博客,但我还没有找到一个纯粹使用AngularJS的完整工作解决方案.
据我所知,如果我把它<script src="js/process1.js"></script>放在index.html中,一切正常,我试图减少初始加载时拉下的js数量.
脚本标记位于partial中,它永远不会被加载,因此永远不会创建P1Ctrl.因此,目前,如果用户进入应用程序并且从未进入过程55,则用户仍然拥有process55的代码,即使它从未使用过.
有没有办法加载文件并将process1.js中创建的对象注入到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!";
}
]);
lor*_*ort 21
要以简单的方式实现延迟加载控制器,您必须执行以下操作:
保存$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:
<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是否正在加载(只需console.log()在主体中使用process1.js,而不是在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的这个小技巧不起作用.
对于更复杂(更漂亮)的解决方案,将.js文件作为路由定义中的依赖项,请查看该文章:http://ify.io/lazy-loading-in-angularjs/ - 它也适用于rc.2和rc.3.这是plunk实现描述的方法:http://plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD
| 归档时间： |
|
| 查看次数： |
91664 次 |
| 最近记录： |