如何将我的RequireJS main.js分成两个文件？

Question

所以我更像是一个后端开发人员，并没有很好的与JavaScript。然而，由于AngularJS使用了很多类似的概念（控制器，服务，模型等），我发现它很容易处理。但是，我缺乏基本的JavaScript知识有时会阻碍我。

我的main.js现在包含requirejs config，angular config以及ui-router config。我怎样才能将它分成一个main.js与requirejs的东西和一个app.js与角的东西？

/*global require, requirejs */ 

'use strict'; 

requirejs.config({ 
    paths: { 
    'angular': '../lib/angularjs/angular.min.js', 
    'angular-messages': '../lib/angularjs/angular-messages.min.js', 
    'angular-ui-route': '../lib/angular-ui-router/angular-ui-router.min', 
    'bootstrap': '../lib/bootstrap/js/bootstrap.min.js', 
    'jquery': '../lib/jquery/jquery.min.js', 
    'async': '../lib/requirejs-plugins/src/async' 
    }, 
    shim: { 
    'angular': { 
     exports : 'angular' 
    }, 
    'angular-ui-route': { 
     deps: ['angular'] 
    } 
    } 
}); 

require(['angular', 
     './controllers', 
     './directives', 
     './filters', 
     './services', 
     'angular-ui-route', 
     'angular-messages', 
     'async', 
     './gmaps', 
     'bootstrap', 
     'jquery'], 
    function(angular, controllers) { 

    // Declare app level module which depends on filters, and services 
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ui.router', 'ngMessages']). 
     config(['$stateProvider','$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 

      $urlRouterProvider.otherwise('/home'); 

      $stateProvider 

       // HOME STATES AND NESTED VIEWS ======================================== 
       .state('home', { 
        url: '/home', 
        views: { 
         'main': { 
          templateUrl: 'vassets/partials/partial-landing.html', 
          controller: controllers.LandingController, 
          controllerAs: 'landingCtrl' 
         } 
        } 
       }) 

       .state('signup', { 
        url: '/signup', 
        params: {selectedPlace: null}, 
        views: { 
         'main': { 
          templateUrl: 'vassets/partials/partial-signup.html', 
          controller: controllers.SignupController, 
          controllerAs: 'signupCtrl' 
         } 
        } 
       }) 

       .state('login', { 
        url: '/login', 
        params: {selectedPlace: null}, 
        views: { 
         'main': { 
          templateUrl: 'vassets/partials/partial-login.html', 
          controller: controllers.LoginController, 
          controllerAs: 'loginCtrl' 
         } 
        } 
       }) 


       .state('sell', { 
        url: '/sell', 
        params: {selectedPlace: null}, 
        views: { 
         'main': { 
          templateUrl: 'vassets/partials/partial-sell.html', 
          controller: controllers.SellController, 
          controllerAs: 'sellCtrl' 
         } 
        } 
       }) 

       .state('preview', { 
        url: '/preview', 
        params: {listing: null}, 
        views: { 
         'main': { 
          templateUrl: 'vassets/partials/partial-preview.html', 
          controller: controllers.PreviewController, 
          controllerAs: 'previewCtrl' 
         } 
        } 
       }) 

       .state('bookPhotographer', { 
        url: '/bookPhotographer', 
        views: { 
         'main': { 
          templateUrl: 'vassets/partials/partial-book.html', 
          params: {selectedPlace: null}, 
          controller: controllers.BookController, 
          controllerAs: 'bookCtrl' 
         }, 
         'left-nav': { 
          templateUrl: 'vassets/partials/partial-book-nav.html' 
         } 
        } 
       }) 

       .state('valuation', { 
        url: '/valuation', 
        views: { 
         'main': { 
          templateUrl: 'vassets/partials/partial-valuation.html', 
          params: {selectedPlace: null}, 
          controller: controllers.ValuationController, 
          controllerAs: 'valuationCtrl' 
         }, 
         'left-nav': { 
          templateUrl: 'vassets/partials/partial-valuation-nav.html' 
         } 
        } 
       }); 

     }]).controller('RouteCtrl', ['$scope','$state', function($scope, $state) { 
      $scope.$state = $state; 
     }]); 

    angular.bootstrap(document, ['myApp']); 

}); 

Answer 1

我怎么能分开到这一点如一个main.js与requirejs的东西 和一个app.js与角的东西？

有你requirejs.config在main.js和main.js已经

require([ 
    'angular', 
    'app'], 
    function(angular) { 
     angular.bootstrap(document, ['myApp']); 
    }) 

其他的一切都会在app.js.结束main.js中对'app'的依赖会加载app.js.

---

如果你想在app.js保持角度引导过，你也可以使用deps。从文档

deps：要加载的依赖项数组。当require.js被加载之前require被定义为配置对象 时，并且您希望 在require（）被定义后立即指定要加载的依赖关系。使用 代表就像执行require（[]）调用，但只要 加载器处理完配置就完成。

因此，像

require.config({ 
    ... 
    deps: ['app'] 
})