【问题标题】:How to use Require.js with angularjs for lazy load如何使用 Require.js 和 angularjs 进行延迟加载
【发布时间】:2015-07-03 20:04:05
【问题描述】:

我正在使用 angularjs 和 codeigniter 开发应用程序。而且我已经完成了它(演示应用程序),主要是。 我要做的是:实现延迟加载或不想在开始时包含所有这些文件,只需在需要时包含即可。

这是我的布局HEAD标签包括所需的js和css文件

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>UMS : Admin </title>
    <!-- added for Angular JS -->
    <link href="<?php echo base_url(); ?>angular/css/loading-bar.min.css" rel="stylesheet">
    <link href="<?php echo base_url(); ?>angular/css/animation.css" rel="stylesheet">
    <link href="<?php echo base_url(); ?>angular/css/angular-chart.css" rel="stylesheet">
    <!-- added for Angular JS -->

    <!-- Bootstrap Core CSS -->
    <link href="<?php echo base_url(); ?>bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="<?php echo base_url(); ?>bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

    <!-- Timeline CSS -->
    <link href="<?php echo base_url(); ?>dist/css/timeline.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="<?php echo base_url(); ?>dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="<?php echo base_url(); ?>bower_components/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="<?php echo base_url(); ?>bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>

<body>
    <!-- jQuery -->
    <script src="<?php echo base_url(); ?>bower_components/jquery/dist/jquery.min.js"></script>
    <!-- jQuery -->
    <!-- Bootstrap Core JavaScript -->
    <script src="<?php echo base_url(); ?>bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="<?php echo base_url(); ?>bower_components/metisMenu/dist/metisMenu.min.js"></script>

    <!-- DataTables JavaScript REMOVED -->

    <!-- Custom Theme JavaScript -->
    <script src="<?php echo base_url(); ?>dist/js/sb-admin-2.js"></script>

    <!-------------Angular js------------------->
    <script src="<?php echo base_url();?>angular/js/angular.min.js"></script>
    <script src="<?php echo base_url();?>angular/js/angular-route.min.js"></script>
    <!-- flash msg -->
    <script src="<?php echo base_url();?>angular/js/angular-flash.js"></script>
    <!-- flash msg -->
     <!--loading bar-->
   <script src="<?php echo base_url();?>angular/js/loading-bar.min.js"></script>
   <script src="<?php echo base_url();?>angular/js/angular-animate.min.js"></script>
    <!--loading bar-->
    <!-- charts-->
    <script src="<?php echo base_url();?>angular/js/chart.min.js"></script>
    <script src="<?php echo base_url();?>angular/js/angular-chart.min.js"></script>
    <!--[if lt IE 9]><script src="<?php echo base_url();?>angular/js/IE8_9/excanvas.js"></script><![endif]-->
    <!--[if lt IE 9]><script src="<?php echo base_url();?>angular/js/IE8_9/es5-shim.js"></script><![endif]-->
    <!-- charts-->
    <!-- core angular APPLICATION specific -->
    <script src="<?php echo base_url();?>angular/js/admin/demo_angular.js"></script>
    <script src="<?php echo base_url();?>angular/js/admin/app.js"></script>
    <script src="<?php echo base_url();?>angular/js/admin/demo-dropdown-controller.js"></script>
    <!-- core angular APPLICATION specific -->
    <!--Directives developed by VANESH -->
    <script src="<?php echo base_url();?>angular/js/angular-directives.js"></script>
    <!--Directives developed by VANESH -->
    <!-- ui bootstrap pagination -->
    <script src="<?php echo base_url();?>angular/js/ui-bootstrap-tpls-0.12.0.js"></script>
    <!-- ui bootstrap pagination -->

    <!-------------Angular js------------------->

这是我的应用程序。 js(仅显示结构或我如何注入依赖项)

/* this is the angular js file for our UMS */
var base_url="http://localhost/ums/";
/* angularapp (asssigned to html tag in view) */
/* angularControllers is module created in demo_angular.js */
var angularapp = angular.module('angularapp', ['ngRoute','angularControllers','flash','angular-loading-bar','ngAnimate','ui.bootstrap','input_match','uniqueField','uniqueEdit','chart.js']);  
angularapp.config(['$routeProvider', function($routeProvider){

// routing configuration.......
}]);

这里是 另一个 js (demo_angular.js),我有/有一堆控制器命名为单个模块。

 var base_url="http://localhost/ums/";
    var angularControllers = angular.module('angularControllers', ['flash']);  
    angularControllers.controller('AddUserCtrl', ['$scope','$http', '$timeout','Flash', function($scope,$http, $timeout,Flash)
    {/*...doing stuff...*/}
    //other controllers same like above (edit user, all users, delete user, delete users...)

这个应用程序运行良好!只是需要实现延迟加载(我不知道)。 听听 Require.js。

主要问题: 如何在这个(我的应用:上面提到)中使用 Require.js。

请通过示例提出一些重要的建议。

重要提示:

  • 有没有人可以指导我(以上)应用程序特定?意味着我的 app.js 和 demo_angular.js 会是什么样子?我的 main.js 和 require.js 会是什么样子?注意:我在应用程序和控制器中注入依赖关系,在感知服务、指令中注入依赖关系,它们是构建的或第三方的

【问题讨论】:

标签: angularjs requirejs


【解决方案1】:

有一个很好的例子可以帮助你吗?

Lazy Loading with Require js and Angualar js

你的 main.js 看起来像

'use strict';
var app = angular.module('app', ['ngRoute']);

需要 js 看起来像

require.config({
    baseUrl: './scripts/',
    urlArgs: 'v=1.1',
    waitSeconds: 200,
    paths: {

        'jquery': './libs/jquery.min',
        'jquery-migrate.min': './libs/jquery-migrate.min',
        'jquery-ui.min': './libs/jquery-ui.min',
        'jquery.mobile.custom.min': './libs/jquery.mobile.custom.min',
        'jquery.easyui.min': './libs/jquery.easyui.min',
        'angular-resource': './libs/1.3.14/angular-resource.min',
        'angular': './libs/1.3.14/angular.min',
        'angular-route': './libs/1.3.14/angular-route.min',
        'angular-animate': './libs/1.3.14/angular-animate.min',
        'bootstrap': './libs/bootstrap',
        'toastr': './modules/toastr',
        'jsapi': './libs/jsapi',
        'ngPopover': './modules/ngPopover',
        'angular-file-upload': './modules/angular-file-upload',
        'ckeditor': './javascripts/ckeditor4.4.7/ckeditor',
        //'ng-infinite-scroll.min': './modules/ng-infinite-scroll.min',
        'app': 'app',
        'tr': './modules/tr',
        'en': './modules/en',
        'hi': './modules/hi',
        'ru': './modules/ru',
        'fr': './modules/fr',
        'de': './modules/de',
    }
});
require(
    {
        shim: {
            //*************Jquery*****************
            'angular-resource': {
                deps: ['angular']
            },
            'angular-route': {
                deps: ['angular']
            },
            'jquery-migrate.min': {
                deps: ['jquery']
            },
            'jquery-ui.min': {
                deps: ['jquery',
                    'jquery-migrate.min']
            },
            'jquery.easyui.min': {
                deps: ['jquery',
                    'jquery-migrate.min']
            },
            'libs/shoppingCart': {
                deps: ['jquery']
            },

            //Jquery ends

            //************bootstrap**************
            'bootstrap': {
                deps: ['jquery',
                    'jquery-migrate.min',
                    'jquery-ui.min']
            },
            'javascripts/theme': {
                deps: ['jquery', 'jquery-ui.min',
                    'javascripts/plugins/autosize/jquery.autosize-min',
                    'javascripts/plugins/charCount/charCount',
                    'javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min',
                    //'javascripts/plugins/bootstrap_datetimepicker/bootstrap-datetimepicker',
                    'javascripts/plugins/bootstrap_daterangepicker/bootstrap-daterangepicker',
                    //'javascripts/plugins/common/bootstrap-wysihtml5',
                    'javascripts/plugins/nestable/jquery.nestable',
                    'javascripts/plugins/tabdrop/bootstrap-tabdrop',
                    //'javascripts/plugins/naked_password/naked_password-0.2.4.min',
                    'javascripts/plugins/datatables/jquery.dataTables.min',
                    'javascripts/plugins/datatables/jquery.dataTables.columnFilter',
                    'javascripts/plugins/bootstrap_colorpicker/bootstrap-colorpicker.min',
                    'javascripts/plugins/modernizr/modernizr.min']
            },
            //bootstrap ends

            //***********plugins*****************
            //'javascripts/plugins/msdropdown/jquery.dd': {
            //    deps: ['libs/jquery']
            //},
            'javascripts/plugins/select2/select2': {
                deps: ['jquery',
                    'bootstrap']
            },
            'javascripts/plugins/timeago/jquery.timeago': {
                deps: ['javascripts/theme']
            },
            'javascripts/plugins/autosize/jquery.autosize-min': {
                deps: ['jquery']
            },
            'javascripts/plugins/charCount/charCount': {
                deps: ['jquery']
            },
            'javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min': {
                deps: ['jquery']
            },
            //'javascripts/plugins/common/wysihtml5.min': {
            //    deps: ['jquery']
            //},
            //'javascripts/plugins/common/bootstrap-wysihtml5': {
            //    deps: ['jquery', 'javascripts/plugins/common/wysihtml5.min']
            //},
            'javascripts/plugins/nestable/jquery.nestable': {
                deps: ['jquery']
            },

            'javascripts/plugins/bootstrap_daterangepicker/bootstrap-daterangepicker': {
                deps: ['jquery']
            },

            'javascripts/plugins/tabdrop/bootstrap-tabdrop': {
                deps: ['jquery']
            },
            'javascripts/plugins/naked_password/naked_password-0.2.4.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/datatables/jquery.dataTables.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/datatables/jquery.dataTables.columnFilter': {
                deps: ['jquery']
            },
            'javascripts/plugins/bootstrap_colorpicker/bootstrap-colorpicker.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/modernizr/modernizr.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/bootbox/bootbox.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/validate/jquery.validate.min': {
                deps: ['jquery',
                    'jquery-ui.min',
                    'javascripts/theme']
            },
            'javascripts/plugins/FlowJs/flow': {
                deps: ['jquery']
            },
            'javascripts/plugins/FlowJs/fusty-flow': {
                deps: ['jquery',
                    'javascripts/plugins/FlowJs/flow']
            },
            'javascripts/plugins/FlowJs/fusty-flow-factory': {
                deps: ['jquery']
            },
            'javascripts/plugins/validate/jquery.validate.min': {
                deps: ['bootstrap']
            },
            'javascripts/plugins/validate/additional-methods': {
                deps: ['javascripts/plugins/validate/jquery.validate.min']
            },
            'javascripts/JsCookies': {
                deps: ['jquery']
            },
            'ckeditor' : {
                deps: ['jquery']
            },
            //plugins end

            //***********modules*****************
            'modules/resettableForm': {
                deps: ['angular']
            },
            'toastr': {
                deps: ['jquery-migrate.min']
            },
            'modules/resettableForm': {
                deps: ['angular',
                    'toastr']
            },
            'modules/angular-gettext': {
                deps: ['angular']
            },
            'modules/angular-multi-select': {
                deps: ['app']
            },
            'modules/common': {
                deps: ['angular',
                    'toastr']
            },
            'modules/logger': {
                deps: ['angular',
                    'modules/common']
            },
            'modules/ui-bootstrap-tpls-0.9.0': {
                deps: ['angular',
                    'toastr']
            },
            'modules/bootstrap.dialog': {
                deps: ['angular',
                    'modules/ui-bootstrap-tpls-0.9.0',
                    'modules/common']
            },
            'modules/translations': {
                deps: ['app']
            },
            'modules/loading-bar': {
                deps: ['app']
            },
            'angular-file-upload': {
                deps: ['angular', 'toastr']
            },
            //'ng-infinite-scroll.min': {
            //    deps: ['angular']
            //},
            'ngPopover': {
                deps: ['app']
            },



            //'modules/SharedServices': {
            //    deps: ['app']
            //},
            'modules/ng-flow': {
                deps: ['app',
                    'angular']
            },
            'en': {
                deps: ['app']
            },
            'fr': {
                deps: ['app']
            },
            'de': {
                deps: ['app']
            },
            'hi': {
                deps: ['app']
            },
            //'modules/tr': {
            //    deps: ['app']
            //},
            'ru': {
                deps: ['app']
            },
            'modules/paypalfactory': {
                deps: ['app']
            },
            'angular-animate': {
                deps: ['app']
            },

            //'modules/ngAutocomplete': {
            //    deps: ['app']
            //},
            'modules/bootstrap-select.min': {
                deps: ['app']
            },

            //modules end

            //***********Angular Common*****************
            'app': {
                deps: ['angular',
                    'angular-route',
                    'angular-resource',
                    'libs/Base64',
                    'libs/moment',
                    'modules/common',
                    'angular-file-upload']//,
                //'modules/ngAutocomplete']
            },
            'routes': {
                deps: ['app']
            },
            //Angular Common ends

            //***********Angular Controllers***********
            'controllers/manageEbayScheduledInventoryController': {
                deps: ['app']
            },


            'jsapi': {
                deps: ['app']
            },

            //'controllers/googleChartController': {
            //    deps: ['app', 'libs/jsapi']
            //},

            //Angular Controller ends

            //***********Angular Services*************
            'services/manageEbayScheduledInventoryService': {
                deps: ['app']
            },



            //Angular Utility Services Ends

            //Angular Filters
            'filters/ellipsis': {
                deps: ['app']
            },

            //Angular Filters ends

            //Angular Directives
            'directives/passwordValidate': {
                deps: ['app']
            },

        }
    },
    // Including all of the modules to allow concencation and minification for deployment
    [
         //*************Jquery*****************'
         'jquery', 'libs/moment', 'jquery.easyui.min',
         //Jquery ends

         //************bootstrap**************
          'bootstrap', 'javascripts/theme', 'libs/shoppingCart',
         //bootstrap ends

         //***********plugins*****************
          /*'javascripts/plugins/msdropdown/jquery.dd',*/ 'javascripts/plugins/select2/select2', 'javascripts/JsCookies', 'javascripts/plugins/bootbox/bootbox.min',
          'javascripts/plugins/FlowJs/flow', 'javascripts/plugins/FlowJs/fusty-flow', 'javascripts/plugins/FlowJs/fusty-flow-factory',
          'javascripts/plugins/validate/jquery.validate.min', 'javascripts/plugins/timeago/jquery.timeago','ckeditor',
         //plugins end

         //***********modules*****************
         'toastr', 'modules/resettableForm', 'modules/angular-gettext', 'modules/angular-multi-select', 'modules/common', 'modules/logger',
         'modules/ui-bootstrap-tpls-0.9.0', 'modules/bootstrap.dialog', 'modules/translations', 'ngPopover', //'modules/SharedServices',
         'modules/ng-flow', 'en', 'de', 'fr', 'hi',  'ru', //'modules/tr',
         'modules/paypalfactory', 'modules/loading-bar', 'angular-animate', 'modules/bootstrap-select.min', 'angular-file-upload', //'ng-infinite-scroll.min', //'modules/ngAutocomplete',
         //modules end

         //***********Angular Common*****************
         'app', 'routes', 'jsapi',
         //Angular Common ends

        //***********Angular Controllers***********'controllers/supplierController',
          'controllers/manageEbayScheduledInventoryController',


        //Angular Controller ends

        //***********Angular Services*************'services/supplierService','services/uploadManagerService','services/createPurchaseOrderService', 
        'services/manageEbayScheduledInventoryService',
         //Angular Services ends

         //Angular Utility Services Starts
         'services/sortingService',
         //Angular Utility Services Ends

         //Angular filters
        'filters/ellipsis', 'filters/currency',
         //Angular filters ends

         //Angular Directive
         'directives/passwordValidate', 'directives/focus', 'directives/mypopover', 'directives/priceBox', 'directives/onDragStart'
    ],
    function () {
        angular.bootstrap(document, ['app']);
    }
);

在 reuire.js 中,您可以了解依赖项的工作原理

'javascripts/plugins/timeago/jquery.timeago': {
                    deps: ['javascripts/theme']
                },

这里javascripts/plugins/timeago/jquery.timeago 依赖于'javascripts/theme'

You can refer this link also it is a very good example

【讨论】:

  • 请看一下这个场景,然后告诉我如何实现它。
  • 有没有人可以指导我(以上)应用特定的?意味着我的 app.js 和 demo_angular.js 会是什么样子?我的 main.js 和 require.js 会是什么样子?注意:我在应用程序和控制器中注入依赖关系,在感知服务、指令中注入依赖关系,它们是构造的或第三方的
  • 不要混淆,先找出依赖关系并相应地排列它们var angularapp = angular.module('angularapp', ['ngRoute','angularControllers','flash','angular-loading-bar','ngAnimate','ui.bootstrap','input_match','uniqueField','uniqueEdit','chart.js']); 只是不要使用.js单词并提及模块名称
  • this 是一个很好的例子
  • 谢谢,我几乎完成了,使用这个时出现 1 个错误:var app = angular.module('angularapp', ['ngRoute',....
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-04-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多