Bdtjtk

EDIT
I found a solution and discovered something strange: the problem is that component name "tdManagement" has just two lowercase letters before uppercase one, in fact if I put three lowercase letters everything works. Let me know if you go through the same situation and if it's a well known issue or a bug.

I'm developing a simple AngularJS application using the feature of routing to components; everything goes well except for when I try to change state and load another component: the browser url changes, but the template (and in general the component) is not loaded

Here is the file app.route.js

angular.module("gestioneDocumentale")



.config(["$urlRouterProvider", "$stateProvider", function($urlRouterProvider, $stateProvider) {



    $urlRouterProvider.otherwise("/home");



    var homeState = {

        name: "home",

        url: "/home", 

        component: "paramSelect", 

        resolve: {

            ambienti: function(ParamService) {

                return ParamService.getAmbienti();

            }, 

            banche: function(ParamService) {

                return ParamService.getBanche();

            }, 

            applicativi: function(ParamService) {

                return ParamService.getApplicativi();

            }, 

            oggettiBusiness: function(ParamService) {

                return ParamService.getOggettiBusiness();

            }

        }

    };



    var templateState = {

        name: "templateManagement",

        url: "/templateManagement", 

        component: "tdManagement", 

        params: {

            obj: null

        } 

    };



    $stateProvider.state(homeState);

    $stateProvider.state(templateState);

}]);

This is the first component which is correctly loaded and in which I change state with $state.go():

angular.module("gestioneDocumentale")



.component("paramSelect", {



    controller: ["$state", function($state) {

        this.selectedAmbiente = "";

        this.selectedBanca = "";

        this.selectedApplicativo = "";

        this.selectedBusinessObject = "";

        this.showMenu = false;

        this.changeHandler = function() {

            if (this.isSelectionValid()) 

                this.showMenu = true;

        }

        this.isSelectionValid = function() {

            if (this.selectedAmbiente === "" || this.selectedBanca === "" || this.selectedApplicativo === "")

                return false;

            return true;

        }

        this.changeMod = function() {

            var inputParams = {

                ambiente: this.selectedAmbiente, 

                banca: this.selectedBanca, 

                applicativo: this.selectedApplicativo

            }

            $state.go('templateManagement');

        }

    }], 



    templateUrl: "app/components/mod1/paramSelect/paramSelect.template.html", 



    bindings: {

        ambienti: "<", 

        banche: "<", 

        applicativi: "<",

        oggettiBusiness: "<"

    }

})