使用ui路由器的AngularJS路由

Question

有沒有可能在角度上具有以下路由？
我使用的UI路由器進行路由選擇，角版本是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' 
}) 

當我試圖這樣的角度考慮都​​和/login爲家鄉並給我"about"和"login"狀態PARAMS有無論如何覆蓋這個具有指定的網址？

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>