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

Question

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();
        };

    };

})();

Pankaj Parkar · Accepted Answer · 2015-05-28 19:19:43Z

1

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

answered May 28, 2015 at 19:19

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

14 Comments

Leon Gaban Over a year ago

Ah I thought that was it... just added it though, but still getting the same error :( I think maybe it's the way my Controller is setup in the app.js

Pankaj Parkar Over a year ago

No there is no any issue with your controller declaration..could you do hard refresh & check angular-ui-router.js loaded or not

Leon Gaban Over a year ago

This is NUTS I completely remove the config function, and I'm still getting an error saying I'm missing ngRoute???

Pankaj Parkar Over a year ago

you must have been added ng-view instead of that you should add ui-view could you add your html?

Leon Gaban Over a year ago

sure, will add that to my question but also here index: gist.github.com/leongaban/aebb3dfa02abc6ffc8ac app.js gist.github.com/leongaban/5e187a0c5b7159d18282

|

Gagan M · Accepted Answer · 2015-05-30 16:53:20Z

0

If you have created the framework for your project using yeoman (which is always a good idea to bootstrap your project and avoid writing lot of boilerplate code), then you would have an existing bower and grunt configuration in your project.

From there on, these are the steps you can follow for replacing ngRouter in your project with ui-router

Execute bower install angular-ui-router --save
Modify your index.html by replacing

<div ng-view=""></div> with <div ui-view=""></div>

Update your app.js to include the ui-router module and the appropriate configuration for different states

Here's a sample configuration:

angular
  .module('myApp', [
    'ui.router'
  ])
  .config(function ($stateProvider, $urlRouterProvider) {
    // For any unmatched url, send to /
    $urlRouterProvider.otherwise("/");

    $stateProvider
      .state('/', {
        url:"/",
        templateUrl: '../modules/main/main.html',
        controller: 'mainCtrl'
      })
      .state('about', {
        url:"/about",
        templateUrl: '../modules/about/about.html',
        controller: 'aboutCtrl'
      });
  });

If you have grunt and bower configured for your project then the dependent angular-ui-router.js will be added automatically to your index.html

answered May 30, 2015 at 16:53

Gagan M

312 bronze badges

1 Comment

Leon Gaban Over a year ago

The thing with Yeoman though is it usually adds a ton of stuff I don't need and never use :( it's a great tool tho, for fast small projects. If I keep using the same build I'm using now, Angular + Gulp and my own sass-smacss bower package, I may 1 day upload my own Yeoman :)

Collectives™ on Stack Overflow

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

2 Answers 2

14 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related