如何可以重定向到404頁面在Angular UI路由器

您好我在使用角度UI路由器實現404頁面時遇到問題當用戶在URL中沒有出現在應用中時輸入某些東西我必須顯示404找不到網頁頁面如何可以重定向到404頁面在Angular UI路由器

我試過

app.js

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

myapp.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/xxx/xxxoverview'); 

    $stateProvider.state('xxx', { 
     url:'/xxx', 
     templateUrl :'partials/xxx/xxxOverview.html', 
     controller:'xxxAccordionCtrl' 
    }) 
    .state('404', { 
     url:'/404', 
     templateUrl :'404.html' 

    });

我的實際設計

我得到如下回應

我期待

來源

2015-08-25 Ravindhar Konka

爲了得到你期待什麼，你需要寫你的佈局更好。

您的佈局是目前：

<div> 
    .. some layout code here 
    <div> navigation here </div> 
    <div ui-view></div> 
    ..some more layout 
</div>

爲了得到你想要的結果，你必須使用嵌套的UI的意見

<div> 
     .. outer layout 
     <div ui-view> 
      .. inner layout 
      <div> navigation here </div> 
      <div ui-view></div> 
      .. inner layout cont. 
     </div> 
     .. outer layout cont. 
</div>

，並相應地改變路由。

如果你給我幾分鐘，我會爲你準備一個plunkr。

因此，這對你是一個plunker： http://plnkr.co/edit/Y6PqRhrbvpEpWApm9lkS?p=preview

，這是我做

$stateProvider 
    .state('layout', { 
     template: 'my navigation <div ui-view></div>' 

    }) 
    .state('layout.page', { 
     url: '/page', 
     template: 'this is my content go see a missing page <a href="#/404">missing page link</a>' 
    }) 
    .state('404', { 
     url:'/404', 
     template: '404!!! page is missing' 
    });

正如你可以看到我有一個「抽象」的狀態稱爲「佈局」的代碼崩潰，它基本上定義了模板，但就是這樣！沒有網址，沒有控制器沒有什麼。

我在模板中添加導航，然後添加另一個ui-view。 - 注意我已經在我的index.html上有一個ui視圖。除此之外，index.html只要我關心就可以是空的。我在那裏添加了hello，所以你有一個參考點。

然後我的頁面是佈局內部的嵌套狀態。見狀態layout.page。這在angular-ui-router中非常棒。這樣你可以爲網站的不同部分設置不同的佈局。所以我的網頁只是通過嵌套狀態來使用佈局。

然後我有一個不同的狀態，我打電話給404. 由於它不從佈局繼承，它不會有導航。

來源

2015-08-25 10:55:26

當然@guy mograbi –

@RavindharKonka - 增加了plunker +解釋。如果您有任何問題，請告訴我。 –

我已經經歷了猛烈的但我怎麼纔能有效的URL。在plunker你給了鏈接導航404頁面但如果用戶輸入無效的用戶，那麼我想404頁面，你可以請幫我 –

你有你的index.html這樣的嗎？

<nav>You navigation</nav> 
<ui-view> </ui-view>

你可以把你<nav>You navigation</nav>在templateUrl :'partials/xxx/xxxOverview.html'

來源

2015-08-25 10:55:16

是@Ivan Coronado –

如何可以重定向到404頁面在Angular UI路由器

回答

相關問題