AngularJS Маршрутизация с использованием ui-router

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' 
}) 

Когда я попробовал этот способ Угловым рассматривают как /about и /login как родного государство и дают мне "about" и "login" в государственном 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>