在 AngularUI Route 中使用工厂？

Question

我正在编写一个 Ionic 应用程序，它使用 AngularUI 的路由器。我想使用我编写的工厂查询 localstorage，这样我就可以确定是否显示第一个运行屏幕。

我的 index.html 按以下顺序加载脚本：

  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/services.js"></script>
  <script src="js/routes.js"></script>
  <script src="js/directives.js"></script>
  <script src="js/filters.js"></script>

我的路由配置如下所示（为简洁起见，t运行）：

angular.module('app.routes', [])

.config(function($stateProvider, $urlRouterProvider, storageFactory) {
  $stateProvider
    .state('myApp.mainscreen', {
    url: '/main',
    views: {
      'side-menu21': {
        templateUrl: 'templates/main.html',
        controller: 'mainCtrl'
      }
    }
  })

// ...

$urlRouterProvider.otherwise('/menu/main')

现在我有一个名为 app.services 的模块，其中包含我的工厂 storageFactory（我知道，我要把它移出服务模块 ;)）。当我尝试像这样注入 storageFactory 时：

angular.module('app.routes', ['app.services', 'storageFactory'])
.config(function($stateProvider, $urlRouterProvider, storageFactory) {

我收到类似这样的错误：

Error: [$injector:nomod] Module 'storageFactory' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我确定我的应用程序在加载之前已经加载了 app.services 和 storageFactory，但我似乎无法让它正常工作。

我该如何解决这个问题？

Answer 1

你不能在 config only provides 中注入服务，但你可以在 app.run 中注入服务这是调用顺序：

app.config() //只提供可以注入
app.run()
指令的编译函数（如果它们在 dom 中找到）
app.controller()
指令的 link 函数（同样，如果找到的话）

在您的情况下，您还可以使用路由解析属性

Answer 2

您可以在 UI 路由器解析块中注入工厂，而不是在配置块中注入它们，因为它只能通过提供程序注入。例如：

$stateProvider
  .state('myApp.mainscreen', {
    url: '/main',
    views: {
      'side-menu21': {
        templateUrl: 'templates/main.html',
        controller: 'mainCtrl'
      }
    },
    resolve: {
      firstRun: ['storageFactory', function(storageFactory) {
        // Do what you want with storageFactory here!
        // Full infos here: https://github.com/angular-ui/ui-router/wiki#resolve
      }]
    }
})

在 AngularUI Route 中使用工厂？

Using factories in AngularUI Route?

angularjs

angular-ui