javascript - 将 Angular-Route 重构为 Angular-UI-Router

Question

我使用 ngRoute 创建了一个单页面应用程序，如下所示:

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;

  });;

small-talkz.model.js(ngRoute)

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

 </div>

然后我听说最好使用 ui.router，因为它是一个第三方，具有更多功能，可以完成 ngRoute 所做的一切，甚至更多，并且将在未来版本的 Angular js 中得到支持...

所以，我尝试将我的代码重构为下面的代码。这不起作用...

谁能告诉我为什么？我没有使用 ng-surf 因为我的 html 中没有任何链接。我通过 localhost:3000/somePage 而不是通过导航到达它们...

index.html(ui.路由器)

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

small-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

期望您已将库 ui-router.js 包含在您的项目中。代码看起来不错。我认为可能引起问题的一件事是，当您定义的任何状态都不与应用程序的状态匹配时，定义路由。使用其他选项，如下所示:

$urlRouterProvider.otherwise('/');

代码应如下所示:

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('/');

});