带有角度的requirejs

本文介绍了带有角度的requirejs - 不解决嵌套路由的控制器依赖性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送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屋！