大佬教程收集整理的这篇文章主要介绍了angularjs-angular-ui-router与requirejs,延迟加载控制器，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
//app.js
$stateProvider.state('index',{
url: "/",views: {
"topMenu": {
templateUrl: "/Home/TopMenu",controller: function($scope,$injector) {
require(['controllers/top-menu-controller'],function(modulE) {
$injector.invoke(module,this,{ '$scope': $scope });
});
}
}
}
});
//top-menu-controller.js
define(['app'],function (app) {
app.controller('TopMenuCtrl',['$scope',function ($scope) {
$scope.message = "It works";
}]);
});
//Home/TopMenu
<h3>TopMenu</h3>
<div ng-controller="TopMenuCtrl">
{{messagE}}
</div>
我们有这个index.html：
<!DOCTYPE html>
<html>
<head>
<title>my lazy</title>
</head>
<body ng-app="app">
<a href="#/home">#/home</a> // we have three states - 'home' is NOT lazy
<a href="#/">#/</a> - index // 'index' is lazy,with two views
<a href="#/other">#/other</a> // 'other' is lazy with unnamed view
<div data-ui-view="topMenu"></div>
<div data-ui-view=""></div>
<script src="angular.js"></script> // standard angular
<script src="angular-ui-router.js"></script> // and ui-router scritps
<script src="script.js"></script> // our application
<script data-main="main.js" // lazy dependencies
src="require.js"></script>
</body>
</html>
让我们观察main.js – requireJS配置：
require.config({ //baseUrl: "js/scripts",baseUrl: "",// alias libraries paths paths: { // here we define path to NAMES // to make controllers and their lazy-file-names independent "TopMenuCtrl": "Controller_TopMenu","ContentCtrl": "Controller_Content","OtherCtrl" : "Controller_Other",},deps: ['app'] });
实际上,我们只为ControllerNames创建别名(路径)及其Controller_Scripts.js文件.而已.此外,我们返回要求应用程序,但是我们将在以后使用不同的@L_618_3@ – 注册延迟加载的控制器.
deps：[‘app’]是什么意思？首先,我们需要提供文件app.js(‘app’表示find app.js)：
define([],function() { var app = angular.module('app'); return app; })
这个返回的值是我们可以在每个异步加载的文件中要求的值
define(['app'],function (app) { // here we would have access to the module("app") });
我们如何懒惰地加载控制器？这在NgRoute已经被证明了
我们将要求角度参考$controllerProvider – 稍后再使用它来注册控制器.
这是我们的script.js的第一部分：
// I. the application
var app = angular.module('app',[
"ui.router"
]);
// II. cached $controllerProvider
var app_cached_providers = {};
app.config(['$controllerProvider',function(controllerProvider) {
app_cached_providers.$controllerProvider = controllerProvider;
}
]);
我们可以看到,我们刚刚创建了应用程序“app”,并创建了持有人app_cached_providers(遵循angularAMD样式).在配置阶段,我们要求角度为$controllerProvider,并保留参考.
现在我们继续在script.js中：
// III. inline dependency expression app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) { $urlRouterProvider .otherwise("/home"); $stateProvider .state("home",{ url: "/home",template: "<div>this is home - not lazily loaded</div>" }); $stateProvider .state("other",{ url: "/other",template: "<div>The message from ctrl: {{messagE}}</div>",controller: "OtherCtrl",resolve: { loadOtherCtrl: ["$q",function($q) { var deferred = $q.defer(); require(["OtherCtrl"],function() { deferred.resolve(); }); return deferred.promise; }],}); } ]);
以上部分显示了两个州的声明.其中一个 – “家”是标准的没有懒惰的.它的控制器是隐含的,但可以使用标准.
第二个是状态命名为“other”,其目标是未命名的视图ui-view =“”.在这里我们可以先看看,懒惰的负载.里面的决心(见:)
在我们的套件中,我们知道,一旦解决完成,控制器(以其名称)将在角度存储库中进行搜索：
// this controller name will be searched - only once the resolve is finished controller: "OtherCtrl",// let's ask requireJS resolve: { loadOtherCtrl: ["$q",function($q) { // wee need $q to wait var deferred = $q.defer(); // and make it resolved once require will load the file require(["OtherCtrl"],function() { deferred.resolve(); }); return deferred.promise; }],
好的,现在,如上所述,主要包含这个别名def
// alias libraries paths paths: { ... "OtherCtrl" : "Controller_Other",
这意味着文件“Controller_Other.js”将被搜索和加载.这是它的魔法的内容.这里最重要的是使用以前缓存的引用$controllerProvider
// content of the "Controller_Other.js" define(['app'],function (app) { // the Default Controller // is added into the 'app' module // lazily,and only once app_cached_providers .$controllerProvider .register('OtherCtrl',function ($scope) { $scope.message = "OtherCtrl"; }); });
诀窍不是使用app.controller()但是
最后还有另一种状态定义,更多的缩小了解决…试图使它更易读：
// IV ... build the object with Helper functions // then assign to state provider var loadController = function(controllerName) { return ["$q",function($q) { var deferred = $q.defer(); require([controllerName],function() {deferred.resolve(); }); return deferred.promise; }]; } app.config(['$stateProvider',$urlRouterProvider) { var index = { url: "/",views: { "topMenu": { template: "<div>The message from ctrl: {{messagE}}</div>",controller: "TopMenuCtrl","": { template: "<div>The message from ctrl: {{messagE}}</div>",controller: "ContentCtrl",resolve : { },}; index.resolve.loadTopMenuCtrl = loadController("TopMenuCtrl"); index.resolve.loadContentCtrl = loadController("ContentCtrl"); $stateProvider .state("index",indeX); }]);
以上我们可以看到,我们为这个状态的/所有命名视图解析了两个控制器
而已.每个控制器在这里定义
paths: { "TopMenuCtrl": "Controller_TopMenu",... },
将通过resolve和$controllerProvider加载 – 通过requireJS – 懒惰.检查所有here
以上是大佬教程为你收集整理的angularjs-angular-ui-router与requirejs,延迟加载控制器全部内容，希望文章能够帮你解决angularjs-angular-ui-router与requirejs,延迟加载控制器所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。