如何在我的应用程序中包含和使用ui-router而不会出现注射器错误？

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

    };

})();

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

Answer 2

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

1. Execute bower install angular-ui-router --save

2. Modify your index.html by replacing

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

3. 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