Angularjs Requirejs:仅在需要时加载依赖项
将加载app.js的define块中定义的依赖项 我想做的是:Angularjs Requirejs:仅在需要时加载依赖项,angularjs,requirejs,angular-amd,Angularjs,Requirejs,Angular Amd,将加载app.js的define块中定义的依赖项 我想做的是: define(['app'], function (app) { app.controller('dashboardCtrl', ['$scope','$http', function($scope,$http){ //I am able to use any of the dependancy here, (I don't need that all dependancies here ) //only n
define(['app'], function (app) {
app.controller('dashboardCtrl', ['$scope','$http', function($scope,$http){
//I am able to use any of the dependancy here, (I don't need that all dependancies here )
//only need charts
}]);
});
如果我要加载仪表板控制器,它需要与图表相关的依赖性,而任何其他控制器都不需要这种依赖性
问题:当应用程序加载时,我不希望加载所有依赖项
注意:已加载的依赖项表示已加载js文件
main.js
require.config({
baseUrl: "http://localhost/ums/angular/js",
paths: {
'angular': 'lib/angular.min',
'ngRoute': 'lib/angular-route.min',
'flash': 'lib/angular-flash',
'angular-loading-bar': 'lib/loading-bar.min',
'ngAnimate': 'lib/angular-animate.min',
'ui.bootstrap': 'lib/ui-bootstrap-tpls-0.12.0',
'uniqueField': 'admin/directives/angular-unique',
'input_match': 'admin/directives/angular-input-match',
'uniqueEdit': 'admin/directives/angular-unique-edit',
'angularAMD': 'lib/angularAMD.min',
'googlechart':'lib/ng-google-chart',
'app': 'admin/app',
},
waitSeconds: 0,
shim: {
'angular': { exports: 'angular'},
'angularAMD': { deps: ['angular']},
'googlechart': { deps: ['angular']},
'ngRoute':{ deps: ['angular']},
'angular-loading-bar':{ deps:['angular'] },
'ngAnimate': { deps:['angular'] } ,
'ui.bootstrap': {deps: ['angular'] },
'uniqueField': {deps: ['angular'] },
'input_match': {deps: ['angular'] },
'uniqueEdit': {deps: ['angular'] },
'flash': {deps: ['angular'] },
},
deps: ['app']
});
var base_url="http://localhost/ums/";
define(['angularAMD', 'ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match', 'googlechart' ], function (angularAMD) {
var app = angular.module('angularapp', ['ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match' , 'googlechart' ]);
app.config(['$routeProvider', function($routeProvider){
/* *************** routes *************** */
.....
var base_url="http://localhost/ums/";
//remove it from the module definition
define(['angularAMD', 'ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match' ], function (angularAMD) {
var app = angular.module('angularapp', ['ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match' ]);
app.config(['$routeProvider', function($routeProvider){
/* *************** routes *************** */
.....
app.js
require.config({
baseUrl: "http://localhost/ums/angular/js",
paths: {
'angular': 'lib/angular.min',
'ngRoute': 'lib/angular-route.min',
'flash': 'lib/angular-flash',
'angular-loading-bar': 'lib/loading-bar.min',
'ngAnimate': 'lib/angular-animate.min',
'ui.bootstrap': 'lib/ui-bootstrap-tpls-0.12.0',
'uniqueField': 'admin/directives/angular-unique',
'input_match': 'admin/directives/angular-input-match',
'uniqueEdit': 'admin/directives/angular-unique-edit',
'angularAMD': 'lib/angularAMD.min',
'googlechart':'lib/ng-google-chart',
'app': 'admin/app',
},
waitSeconds: 0,
shim: {
'angular': { exports: 'angular'},
'angularAMD': { deps: ['angular']},
'googlechart': { deps: ['angular']},
'ngRoute':{ deps: ['angular']},
'angular-loading-bar':{ deps:['angular'] },
'ngAnimate': { deps:['angular'] } ,
'ui.bootstrap': {deps: ['angular'] },
'uniqueField': {deps: ['angular'] },
'input_match': {deps: ['angular'] },
'uniqueEdit': {deps: ['angular'] },
'flash': {deps: ['angular'] },
},
deps: ['app']
});
var base_url="http://localhost/ums/";
define(['angularAMD', 'ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match', 'googlechart' ], function (angularAMD) {
var app = angular.module('angularapp', ['ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match' , 'googlechart' ]);
app.config(['$routeProvider', function($routeProvider){
/* *************** routes *************** */
.....
var base_url="http://localhost/ums/";
//remove it from the module definition
define(['angularAMD', 'ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match' ], function (angularAMD) {
var app = angular.module('angularapp', ['ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match' ]);
app.config(['$routeProvider', function($routeProvider){
/* *************** routes *************** */
.....
控制器示例:
define(['app'], function (app) {
app.controller('dashboardCtrl', ['$scope','$http', function($scope,$http){
//I am able to use any of the dependancy here, (I don't need that all dependancies here )
//only need charts
}]);
});
在您的情况下,所有依赖项都是在模块创建时加载的。如果要在控制器运行时加载它,请将其保留在控制器中,并从模块定义中删除。见下面的例子 在控制器中
define(['app','googlechart'], function (app) {//charts dependencies
app.controller('dashboardCtrl', ['$scope','$http', function($scope,$http){
//I am able to use any of the dependancy here, (I don't need that all dependancies here )
//only need charts
}]);
});
将其从模块定义app.js中删除
require.config({
baseUrl: "http://localhost/ums/angular/js",
paths: {
'angular': 'lib/angular.min',
'ngRoute': 'lib/angular-route.min',
'flash': 'lib/angular-flash',
'angular-loading-bar': 'lib/loading-bar.min',
'ngAnimate': 'lib/angular-animate.min',
'ui.bootstrap': 'lib/ui-bootstrap-tpls-0.12.0',
'uniqueField': 'admin/directives/angular-unique',
'input_match': 'admin/directives/angular-input-match',
'uniqueEdit': 'admin/directives/angular-unique-edit',
'angularAMD': 'lib/angularAMD.min',
'googlechart':'lib/ng-google-chart',
'app': 'admin/app',
},
waitSeconds: 0,
shim: {
'angular': { exports: 'angular'},
'angularAMD': { deps: ['angular']},
'googlechart': { deps: ['angular']},
'ngRoute':{ deps: ['angular']},
'angular-loading-bar':{ deps:['angular'] },
'ngAnimate': { deps:['angular'] } ,
'ui.bootstrap': {deps: ['angular'] },
'uniqueField': {deps: ['angular'] },
'input_match': {deps: ['angular'] },
'uniqueEdit': {deps: ['angular'] },
'flash': {deps: ['angular'] },
},
deps: ['app']
});
var base_url="http://localhost/ums/";
define(['angularAMD', 'ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match', 'googlechart' ], function (angularAMD) {
var app = angular.module('angularapp', ['ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match' , 'googlechart' ]);
app.config(['$routeProvider', function($routeProvider){
/* *************** routes *************** */
.....
var base_url="http://localhost/ums/";
//remove it from the module definition
define(['angularAMD', 'ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match' ], function (angularAMD) {
var app = angular.module('angularapp', ['ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match' ]);
app.config(['$routeProvider', function($routeProvider){
/* *************** routes *************** */
.....
app.js
:仅从define()
中删除?不是从angular.module('myapp',['dependencies'])?从angular.module()中删除也可以是“图表”依赖关系我指的是任何图表依赖关系。可以是“谷歌图表”或任何“XYZ”图表。所以,我同意你的答案。请投票并将答案标记为接受