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

Question

所以我更像是一名后端开发人员，而不是 javascript。然而，由于 AngularJS 使用了很多类似的概念（控制器、服务、模型等），我发现它 qui 很容易使用。然而，我缺乏基本的 javascript 知识有时会阻碍我。

我的 main.js 现在包含 requirejs 配置、angular 配置以及 ui-路由器配置。我怎样才能把它分成例如一个 main.js 有 requirejs 东西，一个 app.js 有 angular 东西?

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

How can I separate this into e.g. one main.js with the requirejs stuff and one app.js with angular stuff?

在 main.js 中有你的 requirejs.config，在 main.js 的末尾有

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

其他所有内容都将在 app.js 中。 main.js中对'app'的依赖会加载app.js.

如果你想在 app.js 中也保持 angular 引导，你也可以使用 deps。来自文档

deps: An array of dependencies to load. Useful when require is defined as a config object before require.js is loaded, and you want to specify dependencies to load as soon as require() is defined. Using deps is just like doing a require([]) call, but done as soon as the loader has processed the configuration.

所以像

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

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

How to separate my RequireJS main.js into two files?

javascript

requirejs

angularjs