自定义 angularjs 路线 url

Question

目前我正在使用 Angular Js 路由这种方式并且它工作正常。

config(["$routeProvider", function ($routeProvider, $mdThemingProvider) {
        $routeProvider
            .when('/', {
                templateUrl: '/templates/home.html',
                controller: 'smu72Controller'
            })
       .when('/contact', {
           templateUrl: '/templates/contact.html',
           controller: 'smu72Controller'
       })
            .when('/objects', {
                templateUrl: '/templates/objects.html',
                controller: 'smu72Controller'
            })
            .when('/objects/:objectId', {
                templateUrl: '/templates/object.html',
                controller: 'smu72Controller'
            })
            .when('/services', {
                templateUrl: '/templates/services.html',
                controller: 'smu72Controller'
            })
        .otherwise({
            redirectTo: "/"
        });
    }
    ]);

但是使用这段代码，我的代码看起来很丑，而且对 urls 和 host/index.html#sectionname 不友好，我应该如何更改它以获得路由 url 作为 host/sectionname？

P.S。我在 Index.html 页面上使用 ng-view 获取 div 的模板。

Answer 1

通过使用$locationProvider模块并将html5Mode设置为true（使用HTML5HistoryAPI）我们摆脱了丑陋的 #

config(function($routeProvider, $locationProvider) {
    $routeProvider
            .when('/', {
                 templateUrl: '/templates/home.html',
                 controller: 'smu72Controller'
             })
    /* your all other route specifications */

    $locationProvider.html5Mode(true);
}

Answer 2

默认情况下 Angular 使用一种称为 hashbang 模式的东西，您可以关闭它并使用 HTML5 模式 - 这样您可以获得漂亮的 url - 但它在旧浏览器中不起作用。要打开它，请将下面的行放在应用程序的配置部分 - 记住注入 $locationProvider.

$locationProvider.html5Mode(true);

在此处阅读更多内容 https://docs.angularjs.org/guide/$location .

自定义 angularjs 路线 url

Custom angularjs route url

angularjs

angular-routing