AngularJS 使用 ui-router 进行路由

Question

是否可以在angular中进行如下路由？
我正在使用 ui-router 进行路由，Angular 版本是 1.4 FYI

.state('home', {
  url: '/:city',
  controller: 'HomeCtrl',
  templateUrl: 'templates/home.html'
}) 

.state('about', {
  url: '/about',
  controller: 'AboutCtrl',
  templateUrl: 'templates/about.html'
})

.state('login', {
  url: '/login',
  controller: 'LoginCtrl',
  templateUrl: 'templates/login.html'
})

当我尝试这种方式时，angular 正在考虑 /about 和 /login 作为 home state 并给我 "about" "login" 在 state params 中是否有覆盖它以具有指定的 url？

Answer 1

只需在 home 状态之前定义您的静态路由，这里有一个演示

var app = angular.module('app', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
  // what's the initial route? for the sake of example, it's `/almaty`
  $urlRouterProvider.otherwise("/almaty");
  $stateProvider
    .state('about', {
      url: '/about',
      template: '<h1>about</h1>'
    })
    .state('login', {
      url: '/login',
      template: '<h1>login</h1>'
    })
    .state('home', {
      url: '/:city',
      controller: function($scope, $stateParams) {
        $scope.stateCity = $stateParams.city
      },
      template: '<h1>city - {{stateCity}}</h1>'
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://unpkg.com/angular-ui-router@0.4.2/release/angular-ui-router.min.js"></script>

<div ng-app="app">
  <ul>
    <li>
      <a href="#/almaty">city Almaty</a>
    </li>
    <li>
      <a href="#/about">about</a>
    </li>
    <li>
      <a href="#/login">login</a>
    </li>
  </ul>
  <div ui-view></div>
</div>

AngularJS 使用 ui-router 进行路由

AngularJS Routing using ui-router

angularjs

angular-routing

angular-ui-router