Question

我很好奇是否有人熟悉从主app配置功能中分离路线。我的路由列表变得非常大，我想将它们移动到一个单独的文件中并将它们加载到主配置中。我之前已经看过这个，但我记不起来或找不到我看到的地方。任何帮助将不胜感激。

Answer 1

您可以（并且应该！）使用AngularJS模块将您的应用程序分离为模块。

然后，每个模块都可以定义自己的路由（具有自己的.config）。然后，在您的主模块（通常是“app”）中，您只需要将它们作为依赖项，然后就可以了。

angular.module('blog', ['ngRoute'])
  .config(['$routeProvider', function ($routeProvider) {
    ...
  }];

angular.module('app', ['blog', 'user']);

然后您可以将每个模块放在自己的文件中。

Answer 2

您可以轻松地将配置功能放在单独的文件中：

应用-config.js

   angular.module('app').config(function(...){...});

在包含App-config.js之前，请确保包含模块定义。

应用-module.js

  angular.module('app',[...]).controller(...).etc

Answer 3

分别设置配置文件很容易。还有很少的其他方法来设置它，我玩配置的那些结构;这对我来说似乎最好。享受！

---＆GT; myApp.html

<html lang="en" ng-app="myApp">
    <head>
           <script src="lib/angular.min.js" type="text/javascript"></script>
           <script src="lib/angular-route.min.js" type="text/javascript"></script>
           <script src="js/app.js" type="text/javascript"></script>
           <script src="js/controller.js" type="text/javascript"></script>
           ...
        </head>
        <body ng-controller="MainCtrl">

             <!-- /* Using ng-view with routeProvider to render page templates */ -->
            <div data-ng-view></div>

    </body>
</html>

----＆GT; app.js

'use strict';

angular.module('myApp', [
    'ngRoute',
    'ngAnimate',
    'myApp.controllers'
]).
config(['$routeProvider', function ($routeProvider) {     
    $routeProvider.when('/page1', {
        templateUrl : 'partials/page1.html',
        controller : 'page1Controller'  
    });

    $routeProvider.when('/page2', {
        templateUrl : 'partials/page2.html',
        controller : 'page2Controller'  
    });

    $routeProvider.when('/images', {
        templateUrl : 'partials/page3.html',
        controller : 'page3Controller'
    });

    $routeProvider.otherwise({redirectTo: '/page1'});
}]);

---＆GT; controller.js

angular.module('myApp.controllers', ['myModules'])

.controller('mainCtrl', function($scope) {
  ...
})

.controller('page1', function($scope) {
  ...
})

.controller('page2', function($scope) {
  ...
})

.controller('page3', function($scope) {
  ...
});

我如何将AngularJS路由移动到单独的文件中

3 个答案: