Question

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

我的main.js现在包含requirejs config，angular config以及ui-router config。我如何将其分成例如一个带有requirejs东西的main.js和一个带角度东西的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

我如何将其分成例如一个带有requirejs东西的main.js 和一个有角度的app.js？

你在main.js和main.js末尾的requirejs.config有

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

其他所有内容都将出现在app.js.依赖于＆＃39; app＆＃39;在main.js中将加载app.js.

如果你想在app.js中保持角度自举，你也可以使用deps。从文档

deps：要加载的依赖项数组。定义需求时很有用作为加载require.js之前的配置对象，你想要一旦定义了require（），就指定要加载的依赖项。运用 deps就像做一个require（[]）调用，但是尽快完成 loader已处理完配置。

类似

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

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

1 个答案: