【问题标题】:want to remove # from my angularjs application想从我的 angularjs 应用程序中删除 #
【发布时间】:2017-04-22 14:37:55
【问题描述】:

想从我的 angularjs 应用程序中删除 # 我试过 $locationProvider,但没有运气

这是我的配置:

var TechdefeatApp = angular.module('TechdefeatApp',['ui.router']);
TechdefeatApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise("/")

    $stateProvider
    .state('/', {
        url: "/",
        templateUrl: "app/components/home/homeView.html",
        controller:"homeController"
    })
    .state('post', {
        url: "/post/:seo_url",
        templateUrl: "app/components/post/postView.html",
        controller:"postController"
    })
}]);

我正在使用 ui-sref 调用 URL:

<a ui-sref="post({seo_url:post.seo_url})" title="{{post.title}}">{{post.title}}</a>

浏览器中的 URL 如下所示:

URL : http://jaancari.com/latest/#/post/un-ambassador-nikki-haley
URL : http://jaancari.com/latest/#/post/december-3-1984-bhopal-worst-industrial-accident-in-history

【问题讨论】:

    标签: angularjs angular-ui-router hashbang ui-sref location-provider


    【解决方案1】:

    它被称为hashbang。要删除它,您必须在 Angular 配置中启用 html5-mode,如下所示:

        var TechdefeatApp = angular.module('TechdefeatApp',['ui.router']);
        TechdefeatApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider ){
            $urlRouterProvider.otherwise("/")
    
            $stateProvider
            .state('/', {
                url: "/",
                templateUrl: "app/components/home/homeView.html",
                controller:"homeController"
            })
            .state('post', {
                url: "/post/:seo_url",
                templateUrl: "app/components/post/postView.html",
                controller:"postController"
            })
    
            $locationProvider.html5Mode(true);
        }]);
    

    您可以在此处阅读有关 hashbang 和 html-mode 的更多信息:https://docs.angularjs.org/guide/$location

    【讨论】:

    • 你的意思是我必须使用 $stateProvider 或 $locationProvider .?
    • 我用您的代码编辑我的答案...您只需注入 $locationProvider 并将 html5 模式设置为 true...这应该可以。添加 base-href 并告诉您的服务器将每个请求路由到 index.html 也是一个好主意 - 请参阅@Bangsi 的答案
    • 我通过引用 [Link ](stackoverflow.com/questions/14771091/…) 尝试了相同的 Long Back
    • 那么上面的代码你的结果是什么?有错误吗?什么都没发生,hashbang 还在吗?
    • 没有错误,什么都没有发生
    【解决方案2】:

    您是否尝试过以下方法

    $locationProvider 和 html5Mode

    在定义 Angular 应用程序和配置路由时执行此操作。

    $locationProvider.html5Mode(true);

    设置相对链接

    在文档的&lt;head&gt; 中设置&lt;base&gt;

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
    
        <base href="/">
    </head>
    

    更改 .htaccess

    RewriteEngine   On
    RewriteBase     /
    RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
    RewriteCond     %{REQUEST_FILENAME} !-f
    RewriteCond     %{REQUEST_FILENAME} !-d
    RewriteRule     ./index.html [L]
    

    【讨论】:

    • 我试过 $locationProvider.html5Mode(true);但没有运气。
    • @AbdulWaheed 我希望你也尝试其他方法
    • 是的,我也试过你的程序,但还是没有运气。
    猜你喜欢
    • 2017-09-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-11-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多