AnguarJS Routing funktioniert nicht wie erwartet

Question

Ich habe eine Liste von Blog-Posts und ich möchte in der Lage sein, auf den Titel zu klicken und es dynamisch zum richtigen Posting umleiten zu lassen.

Bisher funktioniert es außer wenn ich auf dem Anker klicken getaggt Titel es Umleitungen an:

blog/#/post/:post 

statt

blog#/post/:post 

Ich habe versucht, die href Daten-ng- zu ändern href, mit target = "_ self" und versuchte, die href Ändern = "#/post/{{Beitrag}}" und href = "/ post/{{Beitrag}}"

Routen:

(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' 
      }); 

    } 


})(); 

Eintrag anzeigen:

(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']); 

    }); 



})(); 

LISTING VIEW:

<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> 

Probleme, wo ich schief gelaufen ist. Ich vermute stark, dass es ein kleiner Tippfehler oder etwas mit meinem SPA location/locationProvider in app.js ist, aber es sieht in meinen anderen Apps genauso aus, es sei denn, meine Augen täuschen mich (das könnte total passieren!)

Answer 1

Was ich tat dies für eine Korrektur war einfach:

die Auflistung nach Ansicht der Anker geändert:

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

den /blog# Abschnitt in der href enthalten, so dass ich habe:

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

Einfache Lösung, denn nur der Blogteil oder die Webseite meiner Website ist das angularJS, alles andere ist nicht so, der Router wurde nicht aufgerufen, es zu routen, bis es /blog# als Teil der App sah.