我不能为我的生活弄清楚为什么这不起作用。指令文件正在加载,但是实际指令没有加载到angular中,因为它应该在routeProvider.js中的defer.resolve()中加载。
我一直在使用这两个例子作为参考,但尚未弄清楚它为什么不起作用。
https://github.com/ifyio/angularjs-lazy-loading-with-requirejs https://github.com/DanWahlin/CustomerManager
动态路线
console.log('Log: initializing Providers');
app.controller = $controllerProvider.register;
app.service = $provide.service;
app.factory = $provide.factory;
app.filter = $filterProvider.register;
app.directive = $compileProvider.directive;
var route = routeResolverProvider.route;
console.log('Log: initializing Routes');
$routeProvider
.when('/',
route.resolve({
module:'start',
directives: ['moduleButton']
})
)
RouteProvider.js
define(['angular'], function () {
/**
* this service returns a valid route definition object
* for the angular route 'when' method
*
* @type {*|module}
*/
angular.module('routeResolver', [])
.provider('routeResolver', function () {
this.$get = function () {
return this;
};
/**
* configuration object
*/
this.routeConfig = (function () {
var serviceDirectory = 'scripts/services/',
viewsDirectory = 'views/',
modulesDirectory = 'data/',
directiveDirectory = 'scripts/directives',
setServiceDirectory = function (serviceDir) {
serviceDirectory = serviceDir + '/';
},
getServiceDirectory = function () {
return serviceDirectory;
},
setViewsDirectory = function (viewsDir) {
viewsDirectory = viewsDir + '/';
},
getViewsDirectory = function () {
return viewsDirectory;
},
getModuleDirectoy = function () {
return modulesDirectory;
},
setModuleDirectory = function (moduleDir) {
modulesDirectory = 'data/' + moduleDir + '/';
},
getDirectiveDirectory = function(){
return directiveDirectory;
},
setDirectiveDirectory = function(directiveDir){
directiveDirectory = directiveDir + '/';
}
return {
getModuleDirectory: getModuleDirectoy,
setModuleDirectory: setModuleDirectory,
setServiceDirectory: setServiceDirectory,
getServiceDirectory: getServiceDirectory,
setViewsDirectory: setViewsDirectory,
getViewsDirectory: getViewsDirectory,
getDirectiveDirectory: getDirectiveDirectory,
setDirectiveDirectory: setDirectiveDirectory
};
}());
/**
* build and return the route definiation object
*/
this.route = function (routeConfig) {
var resolve = function (data) {
var viewDir;
var view = 'view' in data ? data.view : "index";
var module = 'module' in data ? data.module : "";
var services = 'service' in data ? data.services : [];
var directives = 'directives' in data ? data.directives : [];
if (view != 'index') {
viewDir = view + '/';
} else {
viewDir = '';
}
var routeDef = {};
routeConfig.setModuleDirectory(module);
routeConfig.setViewsDirectory(routeConfig.getModuleDirectory() + viewDir);
routeConfig.setDirectiveDirectory(routeConfig.getModuleDirectory() + routeConfig.getDirectiveDirectory());
routeDef.templateUrl = routeConfig.getViewsDirectory() + viewDir + view + '.html';
routeDef.controller = view + 'Ctrl';
routeDef.resolve = {
load: ['$q', '$rootScope', function ($q, $rootScope) {
/**
* init the dependencies array
* @type {Array}
*/
var dependencies = [routeConfig.getViewsDirectory() + viewDir + view + '.js'];
/**
* add data.services to dependencies array
*/
if (services) {
var service;
for (service in services) {
if (services.hasOwnProperty(service)) {
dependencies.push(routeConfig.getServiceDirectory() + services[service] + '.js');
}
}
}
if(directives){
var directive;
for(directive in directives){
if(directives.hasOwnProperty(directive)){
dependencies.push(routeConfig.getDirectiveDirectory() + directives[directive] + '.js');
}
}
}
return resolveDependencies($q, $rootScope, dependencies);
}]
};
return routeDef;
},
/**
* load the required dependencies, resolve
* a promise on success
* @param $q
* @param $rootScope
* @param dependencies
* @returns {Function|promise}
*/
resolveDependencies = function ($q, $rootScope, dependencies) {
var defer = $q.defer();
require(dependencies, function () {
$rootScope.$apply(function(){
defer.resolve();
});
});
return defer.promise;
};
return {
resolve: resolve
}
}(this.routeConfig);
});
});
ModuleButton.js
define(['app'],function(app){
app.directive('moduleButton',function(){
return {
templateUrl: '../views/moduleButton/moduleButton.html',
restrict: 'E',
scope: {
},
link: function(){
console.log('hi');
}
}
});
});