Angualrダイナミックロードコントローラ
4612 ワード
フロントエンドプロジェクトを再構築する過程で、メインモジュールに従ってコントローラを動的にロードする必要があるが、Angularはサービスを開始する前にすべてのコントローラ、サービス、依存するモジュールをすべてロードしなければならないことを要求している.以下、プロジェクトを構築する過程の解決策を詳しく述べる.
ディレクトリ構造
まずindex.htmlの主な内容:
ディレクトリ構造
main/
controllers/
view/
index.html
app.js
main.js
まずindex.htmlの主な内容:
</code></pre>
<p> main.js ， main.js require ：</p>
<pre><code class="javascript">requirejs.config({
paths: {
jQuery: '../lib/jquery.min',
angular: '../lib/angular.min',
angularRouter: '../lib/angular-route.min',
angularAnimate: '../lib/angular-animate.min'
},
shim: {
'angular': {
deps: ['jQuery'],
exports: 'angular'
},
angularRouter: {
deps: ['angular'],
exports: 'ngRoute'
},
angularAnimate: {
deps: ['angular']
}
}
});
// angular
require(['angular', 'app'], function(angular){
angular.element(document).ready(function(){
angular.bootstrap(document, ['yceMain']);
});
});
</code></pre>
<ul>
<li>requireJs ， 。</li>
<li>angular.bootstrap ng ， html ng-app 。</li>
<li>app.js 。</li>
</ul>
<p>app.js ：</p>
<pre><code class="javascript">
(define['angular', 'angularRouter'], function(angular){
var yceMain = angular.module('yceMain', ['ngRoute']);
yceMain.config(['$routeProvider', '$controllerProvider', function ($routeProvider, $controllerProvider){
var ctrlRegister = function(ctrlName, ctrlModule) {
return function ($q) {
var defer = $q.defer();
require(ctrlModule, function (controller) {
$controllerProvider.register(ctrlName, controller);
defer.resolve();
});
return defer.promise;
}
};
$routeProvider
.when('/dashBoard', {
templateUrl: 'views/dashBoard.html',
controller: 'dashBoardCtrl',
resolve: {
delay: ctrlRegister('dashBoardCtrl',['controllers/dashBoard.js'])
}
})
.when('/appManage', {
templateUrl: 'views/appManage.html',
controller: 'appManageCtrl',
resolve: {
delay: ctrlRegister('appManageCtrl',['controllers/appManage.js'])
}
})
});
return yceMain;
});
</code></pre>
<p> ngRoute routeProvider ，resolve ？</p>
<ul>
<li> ， resolve resolve() ， 、 。</li>
<li>resolve ， ， ， 。</li>
<li>resolve 。</li>
</ul>
<p> ctrlRegister ：</p>
<pre><code class="javascript">var ctrlRegister = function(ctrlName, ctrlModule) {
return function ($q) {
// promise
var defer = $q.defer();
//angular module
// $controllerProvider ，
require(ctrlModule, function (controller) {
$controllerProvider.register(ctrlName, controller);
// ， defer.resolve()， promise
// defer.promise
defer.resolve();
});
// promise ， promise
return defer.promise;
}
};
</code></pre>
<p>angular promise $q ，$q angular ， ， （ ）。</p>
<p> promise ， 。</p>
<p> ， controller(dashBoard.js) ：</p>
<pre><code>define(function(){
return function dashBoardCtrl($scope, $http){
// xxx
}
})
</code></pre>
<p> #/dashBoardsh ， dashBoard html controller， 。</p>
</article>
</div>
</div>
</div>
<!--PC WAP -->
<div id="SOHUCS" sid="1386808242990043136"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">