2015-07-03 58 views
2

我正在使用angularjs和codeigniter開發應用程序。主要是我完成了它(DEMO應用程序)。 我想要做的是:實現延遲加載或不想在開始時包含所有這些文件,只需在需要時包含。如何使用Require.js和angularjs進行延遲加載

這是我的佈局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)其中i有/有bunhch命名爲單個模塊控制器。

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的外觀如何?注:我正在注入應用程序和控制器中的依賴關係,意義服務中的依賴關係,構建的或第三方的指令
+0

你會發現[角需要-懶惰](https://github.com/nikospara/angular-require-lazy)是有用的。 –

回答

2

有一個很好的示例可以幫助您嗎?

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你可以找到如何dependecy工作

'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

+0

拜託了,只是想知道這個場景,讓我知道如何實現它。 – VBMali

+0

有沒有人可以指導我(以上)的應用程序特定?意味着我的app.js和demo_angular.js的外觀如何?我的main.js和require.js的外觀如何?注意:我正在注入應用程序和控制器中的依賴關係,感知服務中的依賴關係,構建的指令或第三方 – VBMali

+1

我已編輯答案請檢查。 –