Require JS Compatibility
Opened this issue · 0 comments
Alirz commented
Hi,
because I used require js in my app , I wrote a routing service. in that service I was injecting my controller. So how can I use your modules for nested routing?
this is my routing service :
define([], function () {
var services = angular.module("routeResolverServices", []);
var pagetitle = '';
services.provider("routeResolver", function () {
this.$get = function () {
return this;
};
this.routeConfig = function () {
var viewsDirectory = "app/templates/",
controlleDirectory = "app/controllers/",
setBaseDirectories = function (viewDir, controllerDir) {
viewsDirectory = viewDir;
controlleDirectory = controllerDir;
},
getViewDirectory = function () {
return viewsDirectory;
},
getControllerDirectory = function () {
return controlleDirectory;
};
return {
setBaseDirectories: setBaseDirectories,
getViewDirectory: getViewDirectory,
getControllerDirectory: getControllerDirectory
};
}();
this.route = function (routeConfig) {
var resolve = function (access, baseName, controllerName, viewName,title) {
var routeDef = {};
routeDef.templateUrl = routeConfig.getViewDirectory() + baseName + "/" + (viewName == undefined ? baseName : viewName) + ".html?v=1.6.6";
routeDef.controller = (controllerName == undefined ? baseName : controllerName) + "Controller";
routeDef.caseInsensitiveMatch = true;
routeDef.resolve = {
load: ["$q", "$rootScope", "$location", "$window", function ($q, $rootScope, $location, $window) {
var dependency = [routeConfig.getControllerDirectory() + baseName + "/" + (controllerName == undefined ? baseName : controllerName) + "Controller.js"];
pagetitle = title;
return resolveDependencies($q, $rootScope, $location, $window, dependency);
}]
};
return routeDef;
},
resolveDependencies = function ($q, $rootScope, $location, $window, dependencies) {
var defer = $q.defer();
require(dependencies, function () {
defer.resolve();
$rootScope.$apply();
});
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$rootScope.pageTitle = pagetitle;
});
$rootScope.$on('$locationChangeSuccess',
function (event, current, previous) {
$rootScope.$previouslocation = previous;
});
$rootScope.back = function () {
setTimeout(function () {
$window.history.back();
}, 0);
};
return defer.promise;
};
return {
resolve: resolve
};
}(this.routeConfig);
});
})
this is my app.js
define(["services/routeResolverService"], function () {
var app = angular.module('app', [
"routeResolverServices",
"ngResource",
"ngRoute"
]);
app.config(['$routeProvider',
'routeResolverProvider',
'$controllerProvider',
'$provide',
function ($routeProvider, routeResolverProvider, $controllerProvider, $provide) {
app.register = {
controller: $controllerProvider.register,
factory: $provide.factory,
service: $provide.service
};
var route = routeResolverProvider.route;
map.forEach(function (row) {
var words = row.split(",");
$routeProvider.when(words[0], route.resolve(words[1], words[2], words[3], words[4], words[5]));
});
$routeProvider.otherwise({ redirectTo: "/user/main" });
}]);
return app;
});
and this is my sample controller
define(['app'], function (app) {
app.register.controller('SendMessageController', ["$scope",
function ($scope) {
}]);
})
and this is my routemap, including URL, Controller and Template Directories
var map=[
"/sendmessage/:mailid,public,SendMessage,SendMessage,SendMessageView"
]