Оптимизатор требований с angularjs

Я пытаюсь сделать пример приложения с помощью angularjs, ui-router и requirejs для lazyload моих контроллеров. Он работает хорошо на месте, но я хочу написать requirejs optimizer для производственной среды, пробовал использовать grunt: requirejs tool для этого, но он не работал для меня. Она не даже давать какие-либо ошибки загрузки сценария или что-то ..Оптимизатор требований с angularjs

<--index.html--!> 
<!DOCTYPE html> 
<html style="overflow-x:hidden"> 
    <head> 
    </head> 

    <body class="no-padding"> 
    <div data-ui-view="header"></div> 
    <div data-ui-view="module"></div> 
    <script data-main="app/main" src="bower_components/requirejs/require.js"></script> 
    </body> 

</html> 


//main.js 
require.config({ 
    baseUrl: "", 
    // Paths for just the core application and its controllers/factories/services 
    paths: { 
      "jquery": "bower_components/jquery/dist/jquery", 
     "angular":     "bower_components/angular/angular.min", 
     "angular-ui-router":   "bower_components/angular-ui-router/release/angular-ui-router.min", 
      "app":      "app/app", 
     "underscore":     "node_modules/underscore/underscore-min", 
    }, 


    shim: { 
     //Tell requirejs to pipe in angular"s return variable as "angular" 
    "angular": { 
     exports: "angular" 
    }, 
    }, 
    // Say we have a dep on App, so it gets loaded 
    deps: ["app", 'lib'] 
}); 

//lib.js 
define([ 
    'jquery', 
    'underscore', 
], function($){ 
}); 


//app.js 
define([ 
    'angular', 
    'angular-ui-router' 
], function(){ 
    var app = angular.module('app', ['ui.router']); 


    //lazy loading 
    var loadController = function(path){ 
    return ['$q', function($q){ 
     var defered = $q.defer(); 
     require([path], function(){ 
     defered.resolve(); 
     }); 
     return defered.promise; 
    }] 
    }; 


    app.config(['$controllerProvider', function($controllerProvider){ 
    app.registerController = $controllerProvider.register; 
    }]); 


    app.config(['$stateProvider', function($stateProvider){ 
    //registering controller 
    // defining states 
    $stateProvider.state('app', { 
     url: '/', 
     views: { 
     'header':{ 
      templateUrl:"<div>{{title}}</div>", 
      controller:"appCtrl" 
     }, 
     'module':{ 
      template:"<div>{{title}}</div>", 
      controller:"homeCtrl" 
     } 
     }, 
     resolve: { 
     loadApp: loadController('../app/controllers/header'), 
     loadHome: loadController('../app/controllers/home') 
     } 
    }); 
    }]); 
    angular.bootstrap(document, ['app']); 
    return app; 
}); 

//home.js 

define(function(){ 
    angular.module('app').registerController('homeCtrl', ['$scope', '$state', function($scope,$state){ 
    $scope.title = 'CONTENT'; 
    }]); 
}); 

//header.js 
define(function(){ 
    angular.module('app').registerController('appCtrl', ['$scope', '$state', function($scope,$state){ 
    $scope.title = 'HEADER'; 
    }]); 
});

Я использовал ворчание: requirejs задачу собрать оптимизированный DIST файл «main.js» и черновую копию для модифицированного index.html внутри директории Dist:

Грунт: requirejs и модифицированный index.html ->

grunt.initConfig({ 
    //... 
    requirejs: { 
    compile: { 
    options: { 
     name: 'node_modules/almond/almond', 
     mainConfigFile: 'app/main.js', 
     out: 'dist/main_opt.js', 
     baseUrl: './' 
    } 
    } 
}, 
    //... 
}) 

<--dist/index.html--!> 
<!DOCTYPE html> 
<html style="overflow-x:hidden"> 
    <head> 
    </head> 

    <body class="no-padding"> 
    <div data-ui-view="header"></div> 
    <div data-ui-view="module"></div> 
    <script src='bower_components/requirejs/require.js'></script> 
<script> 
     require.config({ 
      paths: { 
       //Comment out this line to go back to loading 
       //the non-optimized main.js source file. 
       "main_opt": "dist/main_opt" 
      } 
     }); 
     require(["main_opt"]); 
    </script> 
    </body> 

</html>

При загрузке расст/index.html не дает мне ничего, никакой ошибки в браузере, просто не работает, если он дает мне ошибку загрузки сценария для контроллеров это могло бы иметь какой-то смысл, но его нет. Полностью clueless здесь ..

источник

2016-01-04 smishr4

В файле main.js ничего не требуется. Вы должны потребовать хотя бы один из файлов, объявленных в путях. Сделайте это следующим образом:

require(['app'], function() { 
    console.log('app required successfully'); 
});

Поместите эти строки кода в свой файл main.js. Я надеюсь, что это может помочь найти ошибки:

requirejs.onError = function (err) { 
    console.error('[require error] type: ', err.requireType, ' ,modules: ' + err.requireModules); 
    throw err; 
};

источник

2016-01-04 20:22:29

Большое спасибо за ваш ответ, @Majid Yaghouti, файл main.js работает нормально без оптимизации, я пишу 'DEPS: [«приложение», 'lib'] ', который загружает файл приложения и lib, а затем остальную часть приложения для меня. – smishr4

Оптимизатор требований с angularjs

ответ

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