将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.router）

<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

angular-ui-router基于状态。 如果要从一种状态转到另一种状态，则必须使用“ ui-sref”或“ $ state.go（）”

例如，要转到您的聊天页面（州），请使用：

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

Answer 2

期望您在项目中包含了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('/');

}）;