问题描述
限时送ChatGPT账号..http://www.example/profile/view
中的路由具有多个级别时,RequireJS
无法正确解析依赖项.如果我只有 http://www.example/view
,则控制器依赖项已正确解析.
The RequireJS
is not resolving dependency properly when the routes is of multiple levels as in http://www.example/profile/view
. If I just have http://www.example/view
, the controller dependency is resolved properly.
我的 bootstrap.js
My bootstrap.js
require.config({
baseUrl : 'res/js',
paths: {
routeResolve: 'routeResolve',
'domReady': 'lib/domReady',
angular: 'lib/angular',
angularRoute: 'lib/angular-route',
angularResource: 'lib/angular-resource',
angularSanitize: 'lib/angular-sanitize',
cssPath : '../css'
},
map: {
'*': {
css: 'lib/require-css/css.min'
}
},
shim: {
'angular': {'exports': 'angular'},
'angularRoute': {deps : ['angular']},
'angularResource': {deps : ['angular']},
'angularSanitize': {deps : ['angular']}
},
priority: ['angular']
});
文件夹结构:
-rootdir
- public
- res
- js
- css
当我使用此路由 http://www.example/profile/view
时,所有依赖模块都使用 http://www.example 的基本 URL 解析/profile/res/js/controller.js
,该路径不存在http://www.example/profile
.
When I use this route http://www.example/profile/view
, all the dependency modules are resolved with base url as http://www.example/profile/res/js/controller.js
, which does not exist in this path http://www.example/profile
.
如果我将路由更改为 http://www.example/view
(仅一级),则使用此基本 url http://www.example 解析依赖项/res/js/controller.js
If I change the route to http://www.example/view
(just one level), dependencies are resolved with this base url http://www.example/res/js/controller.js
应该存在我遗漏的配置问题,但我找不到解决方案.
There should be a configuration issue which I am missing, but I could not find a solution for this.
推荐答案
我在这里创建了 working plunker.它基于对angular-ui-router with requirejs、延迟加载控制器的回答.我预计该问题将与 HTML 设置 <base href...
I created working plunker here. It is based on the answer to angular-ui-router with requirejs, lazy loading of controller. I would exepct that the issue will be related to HTML setting <base href...
有一个状态示例,在resolve
中通过requireJS加载延迟控制器:
There is an example of the state, which in resolve
loads lazily controller via requireJS:
$stateProvider
.state("first", {
url: "/firstr",
template: "<div>The message from ctrl: {{message}}</div>",
controller: "FirstCtrl",
resolve: {
loadOtherCtrl: ["$q", function($q) {
var deferred = $q.defer();
require(["FirstCtrl"], function() { deferred.resolve(); });
return deferred.promise;
}],
},
});
来自 ctrl 的消息:{{message}}</div>",控制器:FirstCtrl",解决: {loadOtherCtrl: ["$q", 函数($q) {var deferred = $q.defer();require(["FirstCtrl"], function() { deferred.resolve(); });返回 deferred.promise;}],},});
There is the main.js for that example:
该示例有 main.js:
var cfg = {
baseUrl: "res/js/",
// 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",
"FirstCtrl" : "Controller_First",
"app" : "../../app",
},
deps: ['app']
}
require.config(cfg);
The most important think here, because of the:
这里最重要的思考,因为:
$locationProvider.html5Mode({enabled: true});
is the setting of the base
in the index.html:
是index.html中base
的设置:
<script>
var urlBase = document.location.pathname;
document.write('<base href="'+ urlBase +'" />')
</script>
Because I need here to be sure that this will work in plunker I do generate that dynamically, but in your case it could be just <base href="/" />
or some other setting, which will "teach" all the web where to search for resources
因为我需要在这里确保这将适用于 plunker动态生成,但在您的情况下,它可能只是 <base href="/"/>
或其他一些设置,它将教"所有网络在哪里搜索资源>
在此处查看操作.阅读更多此处
Check it here in action. Read more here
这篇关于带有角度的requirejs - 不解决嵌套路由的控制器依赖性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论