使用ngRoute的角度路由对某些路由不起作用

时间:2016-08-06 19:58:48

标签: angularjs node.js routing ngroute

在我的单页应用程序中,我使用了ngRoute进行角度路由。但我面临角度路由的一些问题。

配置:

app.config(function($routeProvider,$locationProvider){
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');
    $routeProvider
        .when('/product',{
            templateUrl : 'views/product/template/product.html',
            controller  : 'productCtrl'
        })
        .when('/product/add',{
            templateUrl : 'views/product/template/add-product.html',
            controller  : 'productCtrl'
        })
});

当我的路由路径是/ product时,一切正常。但是当我的路由路径是/ product / add时,它似乎是一个错误。但如果“/ product / add”  只用“/ add”替换然后该路线也可以。所以我不知道路由“/ product / add”的主要问题是什么。

错误:

http://localhost:3000/product/views/product/template/add-product.html 404 (Not Found)

在这里我看到了一个问题。其他路线似乎是:

http://localhost:3000/views/product/template/product.html

但错误路由在服务器链接后有/产品。

需要一些澄清&这个问题的解决方案。

提前致谢

1 个答案:

答案 0 :(得分:1)

使用错误页面正确配置路由。你可以按照这个小提琴的例子。

HTML

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:ads="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ProgressBar
            android:id="@+id/progressBar1"
            style="?android:attr/progressBarStyleLarge"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            android:indeterminate="false"
            android:layout_gravity="center" />

        <WebView
            android:id="@+id/webView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>

        <com.google.android.gms.ads.AdView
            android:id="@+id/adView"
            android:layout_gravity="bottom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            ads:adSize="SMART_BANNER"
            ads:adUnitId="@string/banner_ad_unit_id">
        </com.google.android.gms.ads.AdView>

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:itemIconTint="#d20b0d"
        app:itemTextColor="#333"
        app:menu="@menu/navigation_items" />
</android.support.v4.widget.DrawerLayout>

<div ng-controller="MainCtrl">
  <ul>
    <li><a href="/product">product</a></li>
    <li><a href="/product/add">add</a></li>
    <li><a href="/other">Other</a></li>
  </ul>
  <ng-view></ng-view>
</div>

了解更多https://jsfiddle.net/zahiruldu/jLdce3vj/186/

您可以使用UI路由器正确处理父路由,从而为您提供先进的嵌套路由功能。