2016-01-21 120 views
0

我遇到了RequireJS的問題,我相信我沒有做正確的方法。 即使沒有我使用'PessoaController.js',每個頁面上都會發生的問題例如,它被加載。RequireJS加載所有模塊

怎麼收費只有RequireJS我給定頁面上使用這些文件?我想做到這一點,當你在系統上的許多文件,以提高性能,而且並不總是揹着所有不必要的

我已經足夠了研究,但我無法找到與此相關的任何東西。 按照我的代碼。

main.js

requirejs.config({ 
paths: { 
    'angular': 'angular.1.4.0.min', 
    'angular-resource': 'angular-resource.min', 
    'ui.bootstrap': '../bootstrap/js/ui-bootstrap-tpls-1.0.3.min', 
    'jquery': '../bootstrap/js/jquery-2.2.0.min', 
    'swal': '../bootstrap/theme/vendors/bower_components/bootstrap-sweetalert/lib/sweet-alert.min.js', 
    'ui.bootstrap': '../bootstrap/js/ui-bootstrap-tpls-1.0.3.min' 
}, 
shim: { 
    'angular': { 
     exports: 'angular' 
    }, 
    'angular-resource': { 
     deps: ['angular'] 
    }, 
} 
}); 

require(['app', 'functions', 'angular', 
    'service/UsuarioService', 
    'controller/UsuarioController', 
    'controller/PessoaController'], 
    function(app) { 
     app.init(); 
}); 

app.js

define(['angular'], function(angular) { 
var app = angular.module('App', []); 

app.init = function(){ 
    angular.bootstrap(document, ['App']); 
    console.log("Iniciando AngularJS"); 
} 
return app; 
}); 

控制器/ UsuarioController.js

'use strict'; 
define(['app'], function(app) { 
    return app.controller('UsuarioController', ['$scope', 'UsuarioService', function($scope, UsuarioService) { 
     this.insert = function(usuario){ 
      UsuarioService.insert(usuario).then(
        function(data){ 
         if(data.status){ 
          swal("Sucesso!", data.mensagem, "success") 
          $scope.usuario = {}; 
         }else{ 
          swal("Falhou!", data.mensagem, "warning") 
         } 
        }, 
        function(errResponse){ 
         console.log(errResponse); 
         swal("Falhou!", errResponse, "danger") 
        } 
      ); 
     }; 
    }]); 
}); 

服務/ UsuarioService.js

'use strict'; 
define(['app'], function(App) { 
    App.factory("UsuarioService", ['$http', '$q', function($http, $q){ 
     return{ 
      insert: function(usuario){ 
       return $http.post('usuario/adicionar', usuario) 
       .then(
         function(response){ 
          return response.data; 
         }, 
         function(errResponse){ 
          console.error('Erro ao inserir usuário'); 
          return $q.reject(errResponse); 
         } 
       ); 
      }, 
      update: function(usuario, id){ 
       return $http.post('usuario/atualizar/'+id, usuario) 
       .then(
         function(response){ 
          return response.data; 
         }, 
         function(errResponse){ 
          console.log('Erro ao atualizar usuario ['+id+']'); 
          return $q.reject(errResponse); 
         } 
       ); 
      } 
     }; 
    }]); 
}); 

回答

0

了在陣列中第一個參數傳遞引用的所有模塊需要功能將被加載。 如果你想延遲加載模塊,你需要從該數組中刪除它,然後調用需要另一次引用這個模塊。在模塊下載之後,您可以在回調函數中使用它。

在下面的例子PessoaController會,如果你在提示符下輸入的任何值只加載。

require(['app', 'functions', 'angular', 
    'service/UsuarioService', 
    'controller/UsuarioController'], 
function(app, functions, angular, usuarioService, usuarioController) { 
     app.init(); 
     if(prompt(){ 
      require(['controller/PessoaController'], function(pessoaController) { 
        //pessoaController is loaded here if you enter any value in prompt 
      }); 
     } 

}); 
+0

事實上,它不完全是我想要的。我將在main.js中有幾個模塊,但只想加載我在特定頁面上使用的模塊的依賴關係。注意:不一定我會在同一頁面上使用UsuarioController和PessoaController,它可能是在一個我只使用一個,在另一個使用兩個,等等。這將更好地澄清了疑問? –

相關問題