Может ли угловое приложение частично использовать requirejs?

-1

Возможно ли отложить лёгкую нагрузку? Например, скажем, я хочу, чтобы ленивая загрузка только нескольких библиотек и нескольких угловых модулей (контроллеров, служб) вместо ленивой загрузки всего приложения в библиотеки.Может ли угловое приложение частично использовать requirejs?

Угловая версия 1.x

источник

2016-05-24 harsh8888

-1

Да его возможно, ваши требуют-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>

В настоящее время в доме/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 
    }; 
});

источник

2016-05-24 22:18:52

Как эта загрузка приложения * частично *? – Louis

См. Эти ВОПРОСЫ: http://stackoverflow.com/questions/34329465/inject-module-dependency-like-plugin-only-if-needed-angularjs, http://stackoverflow.com/questions/19134023/lazy -loading-angularjs-модули-с-requirejs? RQ = 1 – Brian

Может ли угловое приложение частично использовать requirejs?

ответ

Смежные вопросы