CODEWITHSUNDEEP
javascripthtmlangularjs
alexrogers
alexrogers

Reputation: 1584

Simple hash bang example in Angular. Why is it not working?

html:

<a href="#!foo">foo</a>
<a href="#!bar">bar</a>
<div ng-view></div>

js:

angular.module('theApp', ['ngRoute'])
    .config(function($routeProvider, $locationProvider)  {
        $locationProvider.hashPrefix('!');
        $routeProvider
            .when('/foo', {
                title: 'foo',
                controller: 'foo'
            })
            .when('/bar', {
                title: 'bar',
                controller: 'bar'
            })
    })
    .controller('foo', function(){
        console.log('foo');
    })
    .controller('bar', function(){
        console.log('GGGGG');
    });

http://jsfiddle.net/sprhgucv/

Please could somebody let me know why do I not see anything logged when I click between the links?

I've only found one good example and that is what I have tried to implement but to no avail: http://fdietz.github.io/recipes-with-angular-js//urls-routing-and-partials/client-side-routing-with-hashbang-urls.html

Upvotes: 1

Views: 403

Answers (1)

Rob Louie
Rob Louie

Reputation: 2681

Yes, you need to include angular-route. Also, I couldn't get it to work without providing some sort of template, but otherwise your code should work. Here's a working jsfiddle: http://jsfiddle.net/y93oxopg/

routingExample.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.
when('/home', {
    template: '<div>HERE</div>',
    controller: 'HomeController'
}).
when('/about', {
    template: '<div>HERE2</div>',
    controller: 'AboutController'
}).
otherwise({
    redirectTo: '/home'
});

});

Upvotes: 1

Related Questions