How to set a default state with Angular ui-router

最近使用了 Angular Js ui-route 來作我的js demo 的 navigation

之後發現一個問題
就是當URL 輸入錯的時間便會出現問題
那麼怎樣可以把設定一個把這些Request 直接連到一個page not found

解決方法十分簡單

我們可以在定義這個Module 設計route的時候設定 “$urlRouterProvider
之後在module內定義一個Default route 將去到的路徑 $urlRouterProvider.otherwise
e.g.

  $urlRouterProvider.otherwise('/home');
//或
  $urlRouterProvider.otherwise('/page-not-found');

便可以了
e.g.

var jsDemoApp = angular.module('jsDemoApp', ['ui.router']);

// configure our routes
jsDemoApp.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function ($locationProvider, $stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        // HOME PAGE ========================================
        .state('home', {
            url: '/home',
            templateUrl: '/modules/js-demo/views/index.html',
            abtract: true
        })
        // ABOUT PAGE
        .state('about', {
            url: '/about',
            templateUrl: '/modules/js-demo/views/about.html',
            abtract: true
        });
  }]);

Hope you find it useful

Leave a Reply