AngularJS 路由未按预期工作

Question

我有一个博客列表 post，我希望能够单击标题并将其动态重定向到正确的 posting。

到目前为止它工作正常，除了当我点击它重定向到的锚标记标题时：

blog/#/post/:post

而不是

blog#/post/:post

我尝试将 href 更改为 data-ng-href，使用 target="_self" 并尝试更改 href="#/post/{{post}}" 和 href="/post/{{post}}"

路线：

(function(){

    'use strict';

    angular.module('ghpg')
    .config(Config); 

    Config.$inject = ['$routeProvider'];

    function Config($routeProvider){

        $routeProvider
            .when('/listing', {
                templateUrl: '/angular/views/listing.client.view.html'
            }).otherwise({
                redirectTo:'/'
            }).when('/post/:title',{
                templateUrl: '/angular/views/post.client.view.html',
                controller: 'postController',
                controllerAs: 'post'
            }).otherwise({
                redirectTo:'/listing'
            });

    }  


})();

列表视图：

    (function(){

    'use strict'; 

    angular
    .module('ghpg')
    .controller('listingController', listingController); 

    listingController.$inject = ['$scope', 'blogContent'];//,'blogContent'] //, 'blogContent'];  


    ////

    function listingController($scope,  blogContent){
        var vm = this;
        vm.articles = [];
        grabData();   

        function grabData(){
            return blogContent.getContent().then(function(data){
                    console.log(data.articles);
                    vm.articles = data.articles;
                    return vm.articles; 
                    },function(err){ 
                console.log(err); 
                vm.data = [];

                }); 
        }

    }


})();

App.js:

(function(){

    'use strict'; 

    var dependencies = [
        'ghpg', 
        'ngRoute'

    ];  

    angular.module('blogger', dependencies)
    .config(Config);  

    Config.$inject = ['$locationProvider'] 

    function Config($locationProvider){

        $locationProvider.hashPrefix('!'); 

    } 

    if (window.location.hash === '#_=_'){
        window.location.hash = '#!'; 

    } 


    //bootstrap angular

    angular.element(document).ready(function(){

        angular.bootstrap(document, ['ghpg']); 

    });



})();

列表视图：

<div class="container-fluid" data-ng-Controller="listingController as vm"> 
    <h2> Listings </h2>     
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-8">      
            <div class="post-listing" data-ng-repeat="post in vm.articles"> 
                <h3 class="article-title"><a target="_self" data-ng-href="/blog#/post/{{post.title}}"> {{ post.title  }} </a></h3>
                <div class="article-container">
                    <div class="article-date"><span class="article-date">{{ post.date }}</span></div>
                    <div class="article-post>"><span class="article-content"> {{ post.content }} </span></div> 
                </div> 
            </div>
        </div>  
    </div>  

</div>

我哪里出错了。我强烈怀疑这是我的 SPA location/locationProvider 在 app.js 中的一些小错字或其他问题，但它在我的其他应用程序中看起来是一样的，除非我的眼睛在愚弄我（这可能完全发生了！）

Answer 1

我所做的修复就是这样：

更改了列表视图的锚点：

        <h3 class="article-title"><a target="_self" data-ng-href="/post/{{post.title}}"> {{ post.title  }} </a></h3>

在 href 中包含 /blog# 部分，这样我就有了：

    <h3 class="article-title"><a target="_self" data-ng-href="/blog#/post/{{post.title}}"> {{ post.title  }} </a></h3>

简单修复，因为只有我网站的博客部分或网页是 angularJS，其他一切都不是，所以在看到 /blog# 作为一部分之前，不会调用路由来路由它的应用程序。

AngularJS 路由未按预期工作

AnguarJS Routing Not Working As Expected

angularjs

ngroute

angularjs-ng-route