如何调整Angular js网址以使其易于使用?

时间:2018-09-20 10:46:40

标签: angularjs angular-ui-router

我们正在继续开发我们的网站,该网站在前端使用AngularJS,在后端使用Yii 1.1。

我们的应用程序允许用户创建自己的社区组 当用户单击名为“ ABC Group”(ID为9)的组时,网址为

http://ourwebsite.com/#/app/group/9/content/list

但是我们希望将其更改为:

http://ourwebsite.com/abcgroup/

我们正在使用ui-router

任何想法如何做到这一点? 另外,为什么angular完全使用“#”?

1 个答案:

答案 0 :(得分:1)

您必须注入 $ locationProvider 并将属性 html5Mode 设置为true,如下所示:-

$locationProvider.html5Mode(true);

例如:-

angular.module('myModule', [])
.config(['$routeProvider', '$locationProvider', function($routeProvider, 
$locationProvider) {

$routeProvider.
  when('/contact', {templateUrl: 'xyz/contact.html',   controller: mycontroller})
  .otherwise({redirectTo: '/home.html'});

$locationProvider.html5Mode(true);

}]);

即使您可以查看答案here

如果您使用的是 ui-router ,则可以使用 $ stateProvider

进行相同操作
angular.module('myModule', [])
.config(['$stateProvider', '$locationProvider', function($stateProvider, 
$locationProvider) {
$stateProvider
    .state("contact",
        {
            url: "xyz/contact",
            views: {
                'content': {
                    templateUrl: "Views/xyz/contact.html",
                    controller: "contactController"
                }
            }
        })
 $locationProvider.html5Mode(true);
]);