Как я могу перемещать маршруты AngularJS в отдельный файл

Мне было любопытно, если кто-нибудь был знаком с разделением маршрутов из основной функции конфигурации приложения. Мой список маршрутов становится довольно большим, и я хотел переместить их в отдельный файл и загрузить их в основную конфигурацию. Я видел это раньше, но я не могу вспомнить или найти, где я его видел. Любая помощь будет оценена.

Ответ 1

Вы можете (и должны!) использовать модули AngularJS для разделения вашего приложения на модули.

Затем каждый модуль может определять свои собственные маршруты (со своим .config). Затем, в вашем основном модуле (обычно "приложение" ), вам просто нужно потребовать их в качестве зависимостей, и вы готовы к работе.

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

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

Затем вы можете иметь каждый модуль в своем собственном файле.

Ответ 2

Вы можете легко добавить свою конфигурационную функцию в отдельный файл:

App-config.js

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

Просто убедитесь, что вы включили определение модуля, прежде чем включать App-config.js.

App-module.js

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

Ответ 3

Легко настроить конфигурационный файл отдельно. Есть несколько других способов установить это, и я играл с этой структурой для конфигурации; это, похоже, работает для меня лучше всего. Наслаждайтесь!

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

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

--- > controller.js

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

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

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

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

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