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

Question

So I'm more of a backend developer and not that good with javascript. However since AngularJS uses a lot of similar concepts (controllers, services, models etc) I find it quite easy to work with. However my lack of basic javascript knowledge sometimes impedes me.

My main.js now contains requirejs config, angular config as well as ui-router config. How can I separate this into e.g. one main.js with the requirejs stuff and one app.js with angular stuff?

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

Have your requirejs.config in main.js and at the end of main.js have

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

Everything else will be in app.js. The dependency on 'app' in main.js will load app.js.

---

If you want to keep the angular bootstrapping too in app.js you could also use deps. From the documentation

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.

So something like

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