0

I have an Angular framework I am building that I am trying to make router agnostic, I would like to be able to use any router. So far I have tested it with ng router and it works fine, but when I try to use UI-Router I am getting the injector error. I am not sure if I have placed it in the wrong module, or if it a deeper issue. The framework broadcasts a route or a state, depending on how I set up the Framework directive. I have injected UI-Router into my main module and injected $stateProvider into my controller that needs to use it. I am stumped. Any help would be greatly appreciated. Here is main module:

 (function () {
"use strict";

   angular.module("app", ["ptFramework", "ui.router", "ngStorage",    "ui.bootstrap"]);
})();

Here is framework module:

 (function () {
"use strict";
angular.module("ptFramework", [,"ptMenu", "ptDashboard"]);

})();

Here is framework controller:

 (function () {
"use strict";

angular.module("ptFramework").controller("ptFrameworkController",
['$scope', '$window', '$timeout', '$rootScope', '$stateProvider',
    function ($scope, $window, $timeout, $rootScope, $stateProvider) {

        $scope.isMenuVisible = true;
        $scope.isMenuButtonVisible = true;
        $scope.isMenuVertical = true;

        $scope.$on('pt-menu-item-selected-event', function (evt, data) {
            $scope.stateString = data.state;
            $stateProvider.go(data.state);
            checkWidth();
            broadcastMenuState();
        });

        $scope.$on('pt-menu-orientation-changed-event', function (evt, data) {
            $scope.isMenuVertical = data.isMenuVertical;
            $timeout(function () {
                $($window).trigger('resize');
            }, 0);
        });

        $($window).on('resize.ptFramework', function () {
            $scope.$apply(function () {
                checkWidth();
                broadcastMenuState();
            });
        });
        $scope.$on("$destroy", function () {
            $($window).off("resize.ptFramework"); // remove the handler added earlier
        });

        var checkWidth = function () {
            var width = Math.max($($window).width(), $window.innerWidth);
            $scope.isMenuVisible = (width >= 768);
            $scope.isMenuButtonVisible = !$scope.isMenuVisible;
        };

        $scope.menuButtonClicked = function () {
            $scope.isMenuVisible = !$scope.isMenuVisible;
            broadcastMenuState();

        };

        var broadcastMenuState = function () {
            $rootScope.$broadcast('pt-menu-show',
                {
                    show: $scope.isMenuVisible,
                    isVertical: $scope.isMenuVertical,
                    allowHorizontalToggle: !$scope.isMenuButtonVisible
                });
        };

        $timeout(function () {
            checkWidth();
        }, 0);

    }
]);

})();

As you can see I have injected $stateProvider in both the minsafe array and the function. I dont understand why I am getting this error

Here is the rote.config where I use it:

     "use strict";
angular.module('app').config([
    '$stateProvider', function ($stateProvider) {

        $stateProvider
            .state('dashboard',
            {
                url: "/dashboard",
                template: "<h1>dashboard</h1>"
            });

Any input would be greatly appreciated.

Thanks, John.

1 Answer 1

1

In the controller:

$stateProvider.go(data.state);

should be

$state.go(data.state);

As a consequence, inject $state instead of $stateProvider.

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, I always though you had to do $stateProvider.state.go. And I obviously had my syntax wrong. Thanks for the help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.