refactor Winkel Route Winkel-ui-Router

Question

ich eine einzelne Seite Anwendung erstellt haben ngRoute mit etwa so:

index.html (ngRoute)

var smallTalkzModel = angular.module('smallTalkzModel', ['ngRoute']); 
smallTalkzModel.config(function($routeProvider) { 

    $routeProvider 
    .when('/', { 
     templateUrl : 'components/login/loginView.html', 
     controller : 'loginController' 
    }) 
    .when('/chat', { 
     templateUrl : 'components/chat/chatView.html', 
     controller : 'chatController' 
    }); 
    }).run(function ($rootScope) { 

    // App is loading, so set isAppLoading to true and start a timer 
    console.log($rootScope); 
    $rootScope.isAppLoading = true; 

    });; 

Klein talkz.model.js (ngRoute)

<div ng-app="smallTalkzModel" > 
    <div ng-view> 
    </div> 

</div> 

Dann hörte ich, dass es besser ist, ui.router zu verwenden, da es eine dritte Partei, die mehr Fähigkeiten haben und kann tut alles, was ngRoute tut und mehr und wird in zukünftigen Versionen von Angul unterstützt werden ar js ...

Also, ich habe versucht, meinen Code in den Code unten umzufunktionieren. was nicht funktioniert ...

Kann mir jemand sagen warum? Ich habe nicht ng-surf benutzt, da ich keine Links zu meinem HTML habe. Ich ihnen von localhost: 3000/Eineseite und nicht durch Navigation ...

index.html (ui.router)

<div ng-app="smallTalkzModel" class="loader"> 
    <div ui-view> 
    </div> 
</div> 

Klein talkz.model.js (ui.router)

var smallTalkzModel = angular.module('smallTalkzModel', ['ui.router']); 
smallTalkzModel.config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider 
    .state('login', { 
    url: '/', 
    templateUrl : 'components/login/loginView.html', 
    controller : 'loginController' 
    }) 
    .state('chat', { 
    url: '/chat', 
    templateUrl : 'components/chat/chatView.html', 
    controller : 'chatController' 
    }); 
});; 

Answer 1

Vorausgesetzt, Sie haben die Bibliothek ui-router.js in Ihr Projekt aufgenommen. Code sieht gut aus. Eine Sache, von der ich denke, dass sie zu Problemen führen könnte, ist die Definition der Route, wenn keiner der von Ihnen definierten Zustände mit dem Status der Anwendung übereinstimmt. Verwenden Sie andernfalls Option für das wie folgt:

$urlRouterProvider.otherwise('/'); 

-Code sollte wie folgt aussehen:

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

    $stateProvider 
    .state('login', { 
    url: '/', 
    templateUrl : 'components/login/loginView.html', 
    controller : 'loginController' 
    }) 
    .state('chat', { 
    url: '/chat', 
    templateUrl : 'components/chat/chatView.html', 
    controller : 'chatController' 
    }) 
    $urlRouterProvider.otherwise('/'); 

});

Answer 2

Winkel-UI-Router basiert auf Staaten. Wenn Sie von einem Zustand zum anderen gehen wollen, dann müssen Sie „ui-sref“ oder „$ state.go()“

beispielsweise an die Chat-Seite (Land) zu gehen, verwenden Sie:

<a ui-sref="chat">to go chat page</a>