AngularJSにとって非常に新しいので、私がやろうとしていることの用語は遅延ロードであると推測しています。いくつかの異なるブログを見てきましたが、AngularJSを純粋に使用している完全な実用的なソリューションは見つかりませんでした。
Index.htmlに<script src="js/process1.js"></script>
を入れると、すべて正常に動作することを理解しています。最初のロード時にプルダウンされるjsの量を削減しようとしています。
スクリプトタグがパーシャルに置かれていると、ロードされないため、P1Ctrlは作成されません。そのため、現在、ユーザーがアプリケーションにアクセスしてprocess55に移動しない場合、ユーザーはprocess55のコードをまだ使用していなくてもそこにあります。
Process1ルートが実行されるときに、ファイルをロードし、mainで定義されたアプリにprocess1.jsで作成されたオブジェクトを注入する方法はありますか?
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!";
}
]);
コントローラーの遅延ロードを簡単な方法で実装するには、次のことを行う必要があります。
$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
がロードされているかどうかを確認します(process1.js
コントローラーではなく、P1Ctrl
の本体でconsole.log()
を使用するだけです)。そうでない場合は、Angularの前にjQueryを含めます。
<script src="lib/jquery/jquery.js"></script>
<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でも機能します。記載されている方法を実装するプランクは次のとおりです。 http://plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD