AngularJS 路由挑战与一个文件答案

【问题标题】：AngularJS Routing Challenges with one fileAngularJS 路由挑战与一个文件
【发布时间】：2014-04-26 12:34:23
【问题描述】：

我有一个大型 AngularJs 应用程序，并且正在为路由注入/组织而苦苦挣扎。

大多数应用程序（据我所知）在一个大文件中定义所有路由，例如 https://github.com/IgorMinar/foodme/blob/master/app/js/app.js#L7

我的路线比较复杂，例如：

app.config(["$routeProvider", function ($routeProvider) {
    $routeProvider.when('/navigation/:id', {
        templateUrl: 'app/admin/nav/navigation.tpl.html',
        controller: 'NavigationCtrl',
        title: 'Navigation Config',
        resolve: {
            nav: function($route, NavModel) {
                return NavModel.findOne($route.current.params.id);
            },
            reports: function($route, ReportsModel) {
                return ReportsModel.findAll($route.current.params.id);
            }
        }
    });
}]);

由于它们很复杂并且与控制器非常耦合，因此我的路由定义页面将非常庞大且非常混乱。

有没有更好的方法来声明路由？您可以只声明一个短版本，然后在注入该控制器时对其进行扩展吗？

【问题讨论】：

您可以为路线创建多个文件
我相信您可以进行多个配置调用，在其中注入 $routeProvider 并继续向其添加路由，但我认为您无法在执行配置后修改 $routeProvider thinkster.io/angularjs/Z9xvxn6klY/angularjs-the-config-function跨度>

标签： angularjs

【解决方案1】：

您只能在 config 块中配置 $routeProvider，因为它是提供程序。但是，您的应用程序中可以有多个 config 部分。这意味着，如果您有多个文件，则每个文件都可以在其自己的 config 部分中定义另一部分路由。

HTML

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
    <script src="script.js"></script>
    <script src="another_script.js"></script>
  </head>

  <body>
    <a href="#/route1">Route 1</a>
    <a href="#/route2">Route 2</a>
    <div ng-view></div>
  </body>

</html>

script.js

angular.module('app', ['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/route1', {
        template: '<h1>Route 1</h1>'
      }).
      otherwise({
        redirectTo: '/route1'
      })
  }]);

another_script.js

angular.module('app').
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/route2', {
        template: '<h1>Route 2</h1>'
      })
  }]);

Plunker：http://plnkr.co/edit/ZHNTAiW6VsZmQXjSJH2f?p=preview

如果您需要在应用程序启动后在运行时动态添加路由，您可能对提到的非标准解决方案感兴趣here

【讨论】：

我在每个控制器定义之上都有它们，但是控制器必须完全加载才能进行注入......我使用 requirejs 并打算尝试使用 angularamd 但一直遇到这个问题
我希望有一些解决方案，您可以说： $routeProvider.add('/route2') 然后它会根据标准结构或您定义的结构注入该控制器，然后添加其余部分加载时的解析等。