使用r.js優化的角度js應用程序無法正常工作

Angular JS應用程序運行良好，但在使用r.js進行優化時沒有任何顯示。這裏是源代碼使用r.js優化的角度js應用程序無法正常工作

在的index.html

<script data-main="scripts/main.js" src="libs/requirejs/require.js"></script>

main.js

require.config({ 
baseUrl: '../', 
waitSeconds: 200, 
paths: { 
    'appBootstrap': 'scripts/appBootstrap', 
    'angular': 'libs/angular/angular', 
    'ngRoute': 'libs/angular/angular-route', 
    'ngMessages': 'libs/angular/angular-messages', 
    'jQuery': 'libs/jquery/jquery-2.2.1', 
    'bootstrap': 'libs/bootstrap/bootstrap', 
    'ui.bootstrap': 'libs/bootstrap/ui-bootstrap-tpls-1.3.1', 
    'pace': 'libs/others/pace', 
    'toastr': 'libs/others/toastr', 
    'routes': 'scripts/routes', 
    'text': 'libs/requirejs/text', 
    'ngTable': 'libs/angular/ng-table.min', 
    'app': 'scripts/app' 
}, 
deps: (function() { 
    //return [ "../output/app.min" ]; // For Production 
    return ["appBootstrap"]; //For Development 
})(), 

shim: { 
    'angular': { 
     exports: 'angular' 
    }, 
    'ngRoute': { 
     deps: ['angular'] 
    }, 
    'ngMessages': { 
     deps: ['angular'] 
    }, 
    'bootstrap': { 
     deps: ['jQuery'] 
    }, 
    'ui.bootstrap': { 
     deps: ['angular'] 
    }, 
    'toastr': { 
     deps: ['jQuery'], 
     exports: 'toastr' 
    }, 
    'pace': { 
     exports: ['pace'] 
    }, 
    'ngTable': { 
     deps: ['angular'] 
    } 
}

}）;

在這裏，我切換應用引導和基於發展環境優化的文件（可以在DEPS功能看）

應用引導文件：

define(['app', 'routes'], function (app, routes) { 
    try { 
      // bootstrap the app manually 
      angular.bootstrap(document, ['app']); 
    } catch (e) { 
     console.log("Error in bootstraping the root"+ e.message); 
     console.error(e.stack); 
    } 
});

app.js

'use strict'; 
define(['angular', 
     'ngRoute', 
     'ngMessages', 
     'ngTable', 
     'ui.bootstrap', 
     'controllers/controllers', 
     'directives/directives', 
     'filters/filters', 
     'factories/factories', 
     'constants/constants'], 
    function (angular) { 
     var app = angular.module('app', ['ngRoute', 
             'ngMessages', 
             'ngTable', 
             'ui.bootstrap', 
             'app.controllers', 
             'app.directives', 
             'app.filters', 
             'app.factories', 
             'app.constants']); 
     app.run(function ($rootScope, $http, $location, apiCallFactory) { 
        ...... 
     }); 
     return app; 
    });

routes.js

define(['app'], function (app) { 
    'use strict'; 
    return app.config(function ($routeProvider, $locationProvider) { 
      $routeProvider 
       .when('/adminHome', { 
        templateUrl: 'templates/adminHome.html', 
        controller: 'adminHomeCtrl' 
       }) 
       .when('/login', { 
        templateUrl: 'templates/login.html', 
        controller: 'loginCtrl' 
       }) 
       .when('/profile', { 
        templateUrl: 'templates/userProfile.html', 
        controller: 'userProfileCtrl' 
       }) 
       .otherwise({ 
        redirectTo: '/login' 
       }); 

     }); 
});

r.js輸入文件（optimizedjs.js）

({ 
    baseUrl: '../', 
    waitSeconds: 200, 
    paths: { 
     'appBootstrap': 'scripts/appBootstrap', 
     'angular': 'libs/angular/angular', 
     'ngRoute': 'libs/angular/angular-route', 
     'ngMessages': 'libs/angular/angular-messages', 
     'jQuery': 'libs/jquery/jquery-2.2.1', 
     'bootstrap': 'libs/bootstrap/bootstrap', 
     'ui.bootstrap': 'libs/bootstrap/ui-bootstrap-tpls-1.3.1', 
     'pace': 'libs/others/pace', 
     'toastr': 'libs/others/toastr', 
     'routes': 'scripts/routes', 
     'text': 'libs/requirejs/text', 
     'ngTable': 'libs/angular/ng-table.min', 
     'app': 'scripts/app' 
    }, 
    shim: { 
     'angular': { 
      exports: 'angular' 
     }, 
     'ngRoute': { 
      deps: ['angular'] 
     }, 
     'ngMessages': { 
      deps: ['angular'] 
     }, 
     'bootstrap': { 
      deps: ['jQuery'] 
     }, 
     'ui.bootstrap': { 
      deps: ['angular'] 
     }, 
     'toastr': { 
      deps: ['jQuery'], 
      exports: 'toastr' 
     }, 
     'pace': { 
      exports: ['pace'] 
     }, 
     'ngTable': { 
      deps: ['angular'] 
     } 
    }, 
    stubModules: ['text'], 
    name: "appBootstrap", 
    out: "../output/app.min.js" 
})

我使用node r.js -o optimizejs.js得到優化文件。請幫我一把。

來源

2017-02-28 prodeveloper

如果您正在努力最小化您的角碼，請確保您根據documentation聲明瞭依賴項注入。

例子：

return app.config(function ($routeProvider, $locationProvider) {

到

return app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

或者你可以看看ng-annotate當您生成的代碼來自動做到這一點。

來源

2017-02-28 04:27:10 Icycool

使用r.js優化的角度js應用程序無法正常工作

回答

相關問題