I am using this repo:
https://github.com/firebase/firebase-angular-starter-pack/tree/master/angularFire-seed
as the starting point of my app and I would like to replace the native angular route with ui router.
However, the firebase connection will crash after I made the changes by replacing with ui router, here is the console message:
The connection to wss://s-dal5-nss-20.firebaseio.com/.ws?v=5&ns=angular-fire-powder was interrupted while the page was loading.
After narrowing the scope (ui router package has been added successfully), also modified the routesecurity.js file with the following instruction: How to enable route security when using AngularFire with Angular ui-router? , I really can't find where the problem is.
When I 'git stash' the following three files, the project will work:
modified: app/index.html
modified: app/js/module.routeSecurity.js
modified: app/js/routes.js
Here are also there changes applied, pls kindly help!
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'
+ });
}]);
