具有角requirejs - 不解决与嵌套路由控制器的依赖 [英] requirejs with angular - not resolving controller dependency with nested route

问题描述

的 RequireJS 不正确解析依赖路由信息时，是多层次的如 http://www.example.com/profile/查看。如果我只是有 http://www.example.com/view ，控制器依赖性妥善解决。

The RequireJS is not resolving dependency properly when the routes is of multiple levels as in http://www.example.com/profile/view. If I just have http://www.example.com/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.com/profile/view ，所有的依赖模块与基本URL解析为 http://www.example.com/profile/res/js/controller.js ，并没有在这个路径中 http://www.example.com / profile文件。

When I use this route http://www.example.com/profile/view, all the dependency modules are resolved with base url as http://www.example.com/profile/res/js/controller.js, which does not exist in this path http://www.example.com/profile.

如果我更改为 http://www.example.com/view （只有一个级别）的路线，依赖与此基本URL解析 http://www.example.com/res/js/controller.js

If I change the route to http://www.example.com/view (just one level), dependencies are resolved with this base url http://www.example.com/res/js/controller.js

有应是我缺少的配置问题，但是我无法找到一个解决方案。

There should be a configuration issue which I am missing, but I could not find a solution for this.

推荐答案

我创建在这里工作plunker 。它是基于回答角UI的路由器requirejs，控制器的延迟加载。我会怎样exepct，这个问题会为HTML设置相关的 ＆LT;基地的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...

有是国家的，这在 决心 加载懒洋洋地透过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;
      }],
    },
  });

有对于该示例的main.js

There is the main.js for that example:

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});

是在 基的设置中的index.html

is the setting of the base in the index.html:

<script>
  var urlBase = document.location.pathname;
  document.write('<base href="'+ urlBase +'" />')
</script>

由于我需要在这里可以肯定，这将在 plunker工作我产生动态，但在你的情况下，它可能只是＆LT;基本href =//＆GT; 或其他一些设置，将教的所有网页在哪里搜索资源

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

检查一下在这里的行动。这里更多

Check it here in action. Read more here

这篇关于具有角requirejs - 不解决与嵌套路由控制器的依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！