artch/angular-route-segment

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"
]