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所做的一切以及更多功能，并且将在未来版本的角度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基于状态。如果你想从一个州转到另一个州那么你必须使用＆＃34; ui-sref＆＃34;或＆＃34; $ state.go（）＆＃34;

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

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

Answer 2

期望您在项目中包含了库ui-router.js。代码看起来很好。我认为可能导致问题的一件事是在您定义的任何状态都与应用程序状态匹配时定义路径。使用其他选项，如下所示：

public function test()
{
    $staticRef = &static::$bar;
    return function($x) use (&$staticRef) {
        $staticRef += $x;
        return $staticRef;
    };
}

代码应如下所示：

$urlRouterProvider.otherwise('/');

}）;

重构角度路由到angular-ui-router

2 个答案: