无法在 angularFire-seed 存储库中使用 ui 路由器

Posted 2023-03-07

【中文标题】无法在 angularFire-seed 存储库中使用 ui 路由器

【英文标题】：Could not use ui router in angularFire-seed repo

【发布时间】：2015-02-07 00:37:06

【问题描述】：

我正在使用这个仓库：

https://github.com/firebase/firebase-angular-starter-pack/tree/master/angularFire-seed

作为我的应用程序的起点，我想用 ui 路由器替换本机角度路由。

但是，在我通过替换 ui 路由器进行更改后，firebase 连接将崩溃，这是控制台消息：

The connection to wss://s-dal5-nss-20.firebaseio.com/.ws?v=5&ns=angular-fire-powder was interrupted while the page was loading.

缩小范围后（ui路由包已经添加成功），还修改了routesecurity.js文件，指令如下： How to enable route security when using AngularFire with Angular ui-router? ，实在找不到问题出在哪里。

当我 'git stash' 以下三个文件时，该项目将工作：

modified:   app/index.html
modified:   app/js/module.routeSecurity.js
modified:   app/js/routes.js

这里也有变化，请帮忙！

app/index.html

   <ul class="menu">
-    <li><a href="#/home">home</a></li>
+    <!-- <li><a href="#/home">home</a></li>
     <li><a href="#/chat">chat</a></li>
     <li ng-show-auth="logout,error"><a href="#/login">login</a></li>
-    <li ng-show-auth="login"><a href="#/account">account</a></li>
+    <li ng-show-auth="login"><a href="#/account">account</a></li> -->
+
+    <li><a ui-sref="home">home</a></li>
+    <li><a ui-sref="chat">chat</a></li>
+    <li ng-show-auth="logout,error"><a ui-sref="login">login</a></li>
+    <li ng-show-auth="login"><a ui-sref="account">account</a></li>
   </ul>

app/js/module.routeSecurity.js

 (function(angular) 
    angular.module('routeSecurity', [])
       .run(['$injector', '$location', '$rootScope', 'loginRedirectPath', function($injector, $location, $rootScope, loginRedirectPath) 
+         // if( $injector.has('$route') ) 
+         //    new RouteSecurityManager($location, $rootScope, $injector.get('$route'), loginRedirectPath);
+         // 
          if( $injector.has('$route') ) 
             new RouteSecurityManager($location, $rootScope, $injector.get('$route'), loginRedirectPath);
          
       ]);

-   function RouteSecurityManager($location, $rootScope, $route, path) 
-      this._route = $route;
+   // function RouteSecurityManager($location, $rootScope, $route, path) 
+   function RouteSecurityManager($location, $rootScope, $state, path) 
+      // this._route = $route;
+      this._route = $state;
       this._location = $location;
       this._rootScope = $rootScope;
       this._loginPath = path;

app/js/routes.js

+   // .config(['$routeProvider', function($stateProvider) 
+   .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) 
+      // $routeProvider.when('/home', 
+      //    templateUrl: 'partials/home.html',
+      //    controller: 'HomeCtrl'
+      // );
+
+      // $routeProvider.when('/chat', 
+      //    templateUrl: 'partials/chat.html',
+      //    controller: 'ChatCtrl'
+      // );
+
+      // $routeProvider.when('/account', 
+      //    authRequired: true, // must authenticate before viewing this page
+      //    templateUrl: 'partials/account.html',
+      //    controller: 'AccountCtrl'
+      // );
+
+      // $routeProvider.when('/login', 
+      //    templateUrl: 'partials/login.html',
+      //    controller: 'LoginCtrl'
+      // );
+
+      $urlRouterProvider.otherwise("/home");
+
+      $stateProvider
+        .state('home', 
+          url: "/home",
+          templateUrl: "partials/home.html",
+          controller: 'HomeCtrl'
+        )
+        .state('chat', 
+          url: "/chat",
+          templateUrl: "partials/chat.html",
+          controller: 'ChatCtrl'
+        )
+        .state('account', 
+          url: "/account",
+          templateUrl: "partials/account.html",
+          controller: 'AccountCtrl',
+          data: 
+            authRequired: true, // must authenticate before viewing this page
+          
+        )
+        .state('login', 
+          url: "/login",
+          templateUrl: "partials/login.html",
+          controller: 'LoginCtrl'
+        );
    ]);

回购：https://github.com/yhjor1212/angular-fire-powder

【参考方案1】：

查看文档后发现应该改如下代码：

来自

<div ng-view></div>

到

<div ui-view></div>