Question

是否可以部分延迟加载角度应用程序？例如，让我们说我只想延迟加载一些库和一些角度模块（控制器，服务），而不是延迟加载整个应用程序和库。

Angular版本是1.x

Answer 1

是的，可以使用 require-config.js

require.config({
paths: {
    'angular': 'bower_components/angular/angular.min',
    'angular-animate': 'bower_components/angular-animate/angular-animate.min',
    'angular-aria': 'bower_components/angular-aria/angular-aria.min',
    'angular-cookies': 'bower_components/angular-cookies/angular-cookies.min',
    'angular-messages': 'bower_components/angular-messages/angular-messages.min',
    'angular-resource': 'bower_components/angular-resource/angular-resource.min',
    'angular-ui-router': 'bower_components/angular-ui-router/release/angular-ui-router.min',
    'angular-ui-router-extras': 'bower_components/ui-router-extras/release/ct-ui-router-extras.min',
    'angular-sanitize': 'bower_components/angular-sanitize/angular-sanitize.min',
    'angular-pagination': 'bower_components/angularUtils-pagination/dirPagination',
    'angular-bootstrap': 'bower_components/angular-bootstrap/ui-bootstrap-tpls.min',
    'angular-uiSelect': 'bower_components/ui-select/dist/select.min',
    'angular-loadingBar': 'bower_components/angular-loading-bar/build/loading-bar.min',
    'angular-switch': 'bower_components/angular-ui-switch/angular-ui-switch.min',
    'angular-tree': 'bower_components/bootstrap-tree/js/bootstrap-tree'

},
//resolve dependencies
shim: {
    'angular': {exports: 'angular'},
    'angular-animate': {deps: ['angular']},
    'angular-aria': {deps: ['angular']},
    'angular-cookies': {deps: ['angular']},
    'angular-messages': {deps: ['angular']},
    'angular-resource': {deps: ['angular']},
    'angular-ui-router': {deps: ['angular']},
    'angular-ui-router-extras': {deps: ['angular', 'angular-ui-router']},
    'angular-sanitize': {deps: ['angular']},
    'angular-pagination': {deps: ['angular']},
    'angular-bootstrap': {deps: ['angular']},
    'angular-uiSelect': {deps: ['angular']},
    'angular-loadingBar': {deps: ['angular']},
    'angular-switch': {deps: ['angular']},
    'angular-tree': {deps: ['jquery']},
}
// set library priorities
priority: [
    'angular'
],
//here you add your custom modules, just call the js "main.js" for each module
packages: [
    {
        name: 'home',
        location: './src/module/home'// It has its own file main.js
    },
    {
        name: 'login',
        location: './src/modules/login'// It has its own file main.js
    }
]
});
//inject modules and bootstrap the app
require([
        'angular',
        'main',
        'type',
        'angular-animate',
        'angular-aria',
        'angular-cookies',
        'angular-messages',
        'angular-resource',
        'angular-ui-router',
        'angular-ui-router-extras',
        'angular-sanitize',
        'angular-pagination',
        'angular-bootstrap',
        'angular-uiSelect',
        'angular-loadingBar',
        'angular-switch',
        'angular-tree'
    ],
    function(angular,  main) {
//here bootstrap the angular app in your html, home.name is the array packages.
        angular.module('myApp', [home.name]);
        angular.element(document).ready(function() {
            angular.bootstrap(document, ['myApp']);
        });
    }
);

在index.html中添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My app</title>
</head>
<!--The app is bootstrapped, you don't need ng-app -->
<body>

<!-- if you use router ui -->
<div ui-view></div>

<!-- data-main is the path to the require-config-->
<script type="text/javascript" data-main="require-config" src="bower_components/requirejs/require.js"></script>
</body>
</html>

现在在home / main.js

define(function(require) {
    var angular = require('angular'),
        moduleName = 'home';

    angular
        .module(moduleName, [
            'ngAnimate',
            'ngAria',
            'ngCookies',
            'ngMessages',
            'ngResource',
            'ngSanitize',
            'ui.router',
            'ui.bootstrap',
            'ui.select',
            'ui-notification',
            'angularUtils.directives.dirPagination',
            'angular-loading-bar',
            'uiSwitch',
            'type'
        ])

        .config(function($stateProvider, $urlRouterProvider, NotificationProvider, cfpLoadingBarProvider){
            $urlRouterProvider
                .otherwise("/home");

            $stateProvider
                .state('home', {
                    url: "/home",
                    templateUrl: "src/main/views/main.html",
                    requireLogin: true
                });
 })
        //Controllers
        .controller('MainCtrl', ['$scope', require('./controllers/MainCtrl')])
        .controller('NavCtrl', ['$scope', '$state', require('./controllers/NavCtrl')])
        .controller('SideCtrl', ['$scope', '$state', require('./controllers/SideCtrl')])
       //Also this works
        .controller('SideCtrl', ['$scope', '$state', funtion($scope, $state){

      //your code here
        }])

        //Sidebar & Navbar
        .directive('navbar', require('./directives/NavbarDirective'))
        .directive('sidebar', require('./directives/SidebarDirective'))

        //Services
        .factory('customNotifications', ['Notification', require('./services/notificationsFactory')])
        .factory('errorsHandler', ['$location', 'authentication', 'customNotifications', require('./services/errorsFactory')])
    ;


    return {
        name: moduleName,
        ngModule: angular
    };
});

角度应用可以部分使用requirejs吗？

1 个答案: