Ant*_*pod 13 requirejs angularjs angular-ui-router
你能帮我理解如何在视图之前的下面的例子中加载控制器吗？看起来在尚未加载控制器的情况下立即加载视图.
//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>
Rad*_*ler 13
我在这里创造了工作的plunker.
我们有这个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文件创建别名(路径).而已.此外,我们返回要求应用程序,但我们将在以后使用不同的功能 - 注册延迟加载的控制器.
什么deps: ['app']意思？首先,我们需要提供文件app.js ('app'表示查找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
angularAMD是一个实用程序,它有助于在AngularJS应用程序中使用RequireJS,支持按需加载第三方模块,如angular-ui.
我们将询问角度以获得参考$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',并创建了holder (遵循angularAMD样式).在配置阶段,我们询问角度并保持参考.app_cached_providers $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;
}],
},
});
}
]);
以上部分显示了两个州的声明.其中之一 - 'home'标准是懒惰的.它的控制器是隐式的,但可以使用标准.
第二个是命名状态"other",它确定了未命名的视图ui-view="".在这里我们可以首先看到,懒惰的负载.在解决之内 (见:)
您可以使用resolve为控制器提供自定义状态的内容或数据.resolve是一个可选的依赖关系图,应该注入控制器.
如果这些依赖项中的任何一个是promise,它们将在实例化控制器并触发$ stateChangeSuccess事件之前被解析并转换为值.
在我们的套件中,我们知道,一旦完成解析,将在角度存储库中搜索控制器(按其名称):
// 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()但是
$controllerProvider.RegisterAngular使用$ controller服务来创建新的控制器.此提供程序允许通过该
register()方法注册控制器.
最后还有另一个州定义,更加狭隘的决心......试图让它更具可读性:
// 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',
function($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",
"ContentCtrl": "Controller_Content",
"OtherCtrl" : "Controller_Other",
...
},
将通过解决方案加载$controllerProvider- 通过RequireJS - 懒洋洋地加载.检查所有这里
类似问答:AngularAMD + ui-router +动态控制器名称？
在一个项目中，我使用了控制器的延迟加载，并且必须在范围上手动调用 $digest 才能使其工作。我猜想这种行为不会随着 ui-router 的改变而改变。你尝试过吗？
define(['app'], function (app) {
app.controller('TopMenuCtrl', ['$scope', function ($scope) {
$scope.message = "It works";
$scope.$digest();
}]);
});
| 归档时间： |
|
| 查看次数： |
13199 次 |
| 最近记录： |