javascript - requirejs with angular - 不解决 Controller 与嵌套路由的依赖关系

Question

RequireJS 在路由为多个级别时(如 http://www.example.com/profile/view)无法正确解析依赖关系。如果我只有 http://www.example.com/view，则 Controller 依赖项已正确解析。

我的 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。

如果我将路由更改为 http://www.example.com/view(仅一级)，依赖项将通过此基本 url http://www.example 解析.com/res/js/controller.js

应该是我遗漏了一个配置问题，但我找不到解决方案。

Answer 1

我创建了 working plunker here .它基于对 angular-ui-router with requirejs, lazy loading of controller 的回答.我希望这个问题与 HTML 设置有关 <base href...

有一个状态的例子，在 resolve 通过 requireJS 延迟加载 Controller :

$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:

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

想到这里最重要，因为:

$locationProvider.html5Mode({enabled: true});

是 base 的设置 在 index.html 中:

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

因为我需要在这里确保这在 plunker 中有效我确实动态生成了它，但在你的情况下它可能只是 <base href="/" />或其他一些设置，这将“教”所有网络在哪里搜索资源

查一下here in action .阅读更多 here