使用 ui-router 的 AngularJS 路由

Question

Is it possible to have routing as follows in angular?
I'm using ui-router for routing, Angular version is 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'
})

When I tried this way angular is considering both /about and /login as home state and giving me "about" and "login" in state params is there anyway to override this to have urls as specified?

Answer 1

Just define your static routes before home state, here's a demo

 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>