Kann eine eckige App teilweise requirejs verwenden?

-1

Ist es möglich, eine Winkelanwendung teilweise zu laden? Nehmen wir zum Beispiel an, ich möchte nur ein paar Bibliotheken und einige eckige Module (Controller, Dienste) laden, anstatt die gesamte Anwendung mit den Bibliotheken zu laden.Kann eine eckige App teilweise requirejs verwenden?

abgewinkelte Ausführung ist 1.x

Quelle

2016-05-24 harsh8888

-1

Ja, es ist möglich, Ihre erfordern-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']); 
     }); 
    } 
);

In Ihrem index.html

hinzufügen

<!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>

Jetzt in 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 
    }; 
});

Quelle

2016-05-24 22:18:52

Wie wird diese Anwendung * teilweise * geladen? – Louis

Bitte beachten Sie diese SO Fragen: http://StackOverflow.com/Questions/34329465/Inject-Module-dependency-like-Plugin-only-if-needed-angularjs, http://StackOverflow.com/Questions/19134023/lazy -loading-angularjs-modules-with-requirejs? rq = 1 – Brian

Kann eine eckige App teilweise requirejs verwenden?

Antwort

Verwandte Themen