能否离子功能＆QUOT;离子导航视图＆QUOT; （UI-路由器）与ngRoute工作？ [英] Can the ionic function "ion-nav-view" (ui-router) work with ngRoute?

问题描述

我试图用样品的 Angularfire，种子 ：//ionicframework.com/相对=nofollow>离子应用。这工作到目前为止非常好。

I am trying to merge the Angularfire-Seed with a sample Ionic App. This has worked so far quite well.

要我的看法之间的浏览，我有兴趣使用离子功能：

To browse between my views, I am interested to use the ionic functionality:

// requires ui-router
<ion-nav-view></ion-nav-view> 

而不是

// requires ngRoute
<div ng-view></div>

的问题是，在离子NAV-视图（离子）是UI的路由器（看到这里解释），而NG-观点ngRoute（Angularfire种子）的一部分。

The problem is that the ion-nav-view (Ionic) is part of the ui-router (see here explanation) whereas ng-view part of ngRoute (Angularfire-seed).

有没有因此一种方式来继续使用 ngRoute （如大量的编码已在Angularfire，种子工程完成，因此我不希望切换到UI -router），但仍使用离子导航视图？

Is there therefore a way to keep using the ngRoute (as a lot of coding has been done in the Angularfire-Seed project and thus I dont want to switch to ui-router), but still use ion-nav-view?

后续：已有人实施AngularFire与离子（因此UI路由器）？可用混帐？

Follow-up: has someone implemented AngularFire with Ionic (and thus ui-router)? Available git?

推荐答案

没有，离子导航视图使用 UI路由器引擎盖下。除非你想要写自己的实现，你不能使用 ngRoute 吧。

No, ion-nav-view uses the ui-router under the hood. Unless you want to write your own implementation you can't use ngRoute with it.

修改

要回答你有关使用链接的文件有问题离子，你就必须重构它使用 UI路由器。检查 UI路由器指南这里的<一个HREF =htt​​p://ionicframework.com/docs/api/directive/ionNavView/相对=nofollow称号=离子文档>离子文档这里。这是很值得一读的第一个环节得到一个全面的了解。

To answer your question about using your linked file with Ionic, you'll have to refactor it to use ui-router. Check the UI Router Guide here and the Ionic docs here. It's well worth reading the first link to get a thorough understanding.

的依赖的

UI路由器包含在捆绑离子，所以你并不需要显式声明它作为一个依赖。

ui-router is included in the Ionic bundle so you don't need to explicitly state it as a dependency.

所以，只要你已经拥有离子作为依赖，而不是

So provided you already have Ionic as a dependency, instead of

angular.module('myApp.routes', ['ngRoute', 'simpleLogin'])

你可以有

angular.module('myApp.routes', ['simpleLogin'])

的的.config块的

我没有用 ngRoute 但 $ stateProvider 的UI之间的语法-router 看上去非常相似。随着 ngRoute 您使用了 $ routeProvider 是这样的...

I've not used ngRoute but the syntax between the $stateProvider of ui-router look quite similar. With ngRoute you used the $routeProvider like so...

.config(function($routeProvider, $locationProvider) {
  $routeProvider
   .when('/chat', {
    templateUrl: 'partials/chat.html',
    controller: 'ChatCtrl',
  })

使用 UI路由器配置一个国家是类似以下内容（使用 $ urlRouterProvider.otherwise的（）末捕获还没有被明确定义，并重定向到您指定的任何URL）

With ui-router configuring a 'state' is something like the following (the use of $urlRouterProvider.otherwise() at the end catches any URLs that haven't been explicitly defined and redirects to whichever URL you specify)

.config(function($stateProvider, $urlRouterProvider){

  $stateProvider

    .state('home', {
      url: '/',
      templateUrl: "partials/home.html",
      controller: 'HomeCtrl',
      resolve: {
        // resolve stuff in here, check the docs for implementation differences
      }
    })

    .state('chat', {
      url: '/chat',
      templateUrl: "partials/chat.html",
      controller: 'ChatCtrl',
      }
    })

  $urlRouterProvider.otherwise('/');

身份验证在你的链接文件处理，这种联系可以帮助角度UI路由器的登录验证。祝你好运！

这篇关于能否离子功能＆QUOT;离子导航视图＆QUOT; （UI-路由器）与ngRoute工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！