如何在没有注入器错误的情况下在我的应用程序中包含和使用 ui-router？

Question

更新我已经恢复到包含任何 ui-router

之前的状态

我遇到了那个我无法解决的可怕的 $injector 错误，我已经恢复原状并且需要知道如何简单地包含 ui-router 并添加一个 Config 函数来简单地路由/login 的用户加载 /login.html

我以前做过很多次了，只是这次不行。

(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

您需要在应用程序模块中添加 ui.router 模块才能使用 angular ui.router 功能。

代码

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

Answer 2

如果您使用 yeoman 为您的项目创建了框架（这对 bootstrap 您的项目来说总是一个好主意，并且避免编写大量样板代码），那么您将拥有现有的 bower 和 grunt 配置在你的项目中。

从那时起，您可以按照以下步骤将项目中的 ngRouter 替换为 ui-router

执行bower install angular-ui-router --save
通过替换

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

更新您的 app.js 以包含 ui-router 模块和针对不同状态的适当配置

这是一个示例配置：

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

如果您为项目配置了 grunt 和 bower，那么依赖项 angular-ui-router.js 将自动添加到您的 index.html

如何在没有注入器错误的情况下在我的应用程序中包含和使用 ui-router？

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

javascript

angularjs

angularjs-routing

angular-ui-router

angularjs-injector