AnguarJS Routing Not Working As Expected

Question

I have a listing of blog posts and I want to be able to click on the title and have it dynamically redirect to the proper posting.

So far it works except when I click on the anchor tagged title it redirects to:

blog/#/post/:post

rather than

blog#/post/:post

I've tried to change the href to data-ng-href, using target="_self" and tried changing the href="#/post/{{post}}" and href="/post/{{post}}"

Routes:

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

    }  


})();

Listing View:

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

Having trouble where I went wrong. I strongly suspect that it's some small typo or something with my SPA location/locationProvider in app.js but it looks the same in my other apps, unless my eyes are fooling me (which could be totally happening!)

score 0 · Accepted Answer · answered May 05 '16 at 20:10

What I did for a fix was simply this:

changed the listing view's anchor:

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

to include the /blog# portion in the href so that I have:

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

Simple fix, cause only the blog portion or webpage of my website is the angularJS, everything else is not so the routing was not being called to route it until it saw /blog# as part of the app.

AnguarJS Routing Not Working As Expected

1 Answers1