Search code examples
javascriptangularjsangular-ui-routerangularjs-routingangularjs-injector

How to include and use ui-router in my app without injector errors?


UPDATE I've reverted back to a state before including any ui-router


I was getting that terrible $injector error that I could not solve, I've since reverted back and need to know how to simply include ui-router and add in a Config function that will simply route the user to /login which loads /login.html

I've done this many times before, just this time it won't work.

(function() { "use strict";

    var app = angular.module('tickertags', [
        'infinite-scroll',
        'apiFactory',
        'scopeFactory',
        'tagFactory',
        'tickerFactory',
        'timeSpanFactory',
        'overlayDirective',
        'searchPopoverDirectives',
        'notificationDirectives',
        'platformHeaderDirectives',
        'controlHeaderDirectives',
        'viewHeaderDirectives',
        'alertsPanelController',
        'alertPanelDirectives',
        'tickersPanelDirectives',
        'tickersSelectFactory',
        'tagsPanelDirectives',
        'tagDetailsFactory',
        'tagHoverDirective',
        'tagSearchDirective',
        'tagsFilterDirective',
        'focusMeDirective',
        'chartHeaderController',
        'chartHeaderDirectives',
        'chartPanelDirective',
        'chartIQDirective',
        'socialMediaController',
        'socialMediaDirectives',
        'socialMediaFactory'
    ])
    .controller('DashCtrl', Controller);

    /*
        I WANT TO ADD THE CONFIG HERE...
        /login = login.html
    */

    Controller.$inject = [
        '$scope',
        '$rootScope',
        'ScopeFactory',
        'TickerFactory'];

    function Controller($scope,
                        $rootScope,
                        ScopeFactory,
                        TickerFactory) {

        /** Init DashCtrl scope */
        /** ----------------------------------------------------------------- */
        var vs          = $scope;
            vs.showNote = true,
            vs.mouseX   = '',
            vs.mouseY   = '';
            ScopeFactory.saveScope('root', vs);

        /** Detect if a tagHover has been shown and ready bodyClick to close */
        vs.$on('tagHoverOpen', function(events,data) {
            vs.bodyClick = function() {
                $rootScope.$broadcast('bodyClick');
            };
        });

        /** Remove eventListener after tagHover is closed */
        vs.$on('destroy', function() {
            vs.bodyClick = angular.noop();
        });

        /** Get and store all tickers, eventually just first 100 */
        getAllTickers();

        function getAllTickers() {
            TickerFactory.getTickers();
        };

    };

})();

Solution

  • You need to add ui.router module inside your app module to use angular ui.router features.

    Code

    var app = angular.module('tickertags', [
        //..other modules here.
        'socialMediaFactory',
        'ui.router' //<--added it
    ])