AngularJS routing doesnt work

Question

I'm new to AngularJS and I'm currently building a small application. I want my URL's like this /index (without the .html). I tried to use NgRoute for that, but it doesn't seem to work out well. When i go to /establishments, it says the route doesn't exists. Here is my code:

app.js

var app = angular.module('khApp', ['ngRoute','establishmentModule', 'queryModule', 'buildingBlockModule', 'categoryModule']);
app.config(['$routeProvider', function($routeProvider)
{
  $routeProvider
    .when('establishments', {controller:'testController', templateUrl: '../html/establishments.html'})

}]);

app.controller('testController', ['$http', function($http)
{


}]);

index.html

    <div  ng-controller="testController as test" class="container">
        hi 
        <a href="establishments">
            <button class="btn btn-default">Start</button>
        </a>
    </div>

  <ng-view></ng-view>

<script type="text/javascript" src="../../bower_components/angular/angular.js"></script> 
<script type="text/javascript" src="../../bower_components/angular-route/angular-route.js"></script> 
<script type="text/javascript" src="../js/app.js"></script>
<script type="text/javascript" src="../js/buildingblock.js"></script>
<script type="text/javascript" src="../js/category.js"></script>
<script type="text/javascript" src="../js/establishment.js"></script>
<script type="text/javascript" src="../js/query.js"></script> 


</body>
</html>

What am i doing wrong? Thanks in advance!

What URL are you entering in the browser? Full URL please (though you can omit the actual host name) — mason
– mason, Commented Sep 18, 2015 at 15:15
@henktenk I think you may misunderstand a bit about how angular is designed to work in general, and specifically how the angular router works. If you would like, we can start a chat and I can give you some pointers, or you can find me most days in the general javascript chat. — Claies
– Claies, Commented Sep 18, 2015 at 15:30

War10ck · Accepted Answer · 2015-09-18 15:21:18Z

1

Depending on how your router is configured, typically you need to target routes beginning with a slash like so:

app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider
            .when('establishments', {
                controller:'testController',
                templateUrl: '../html/establishments.html'
            });
}]);

In addition, in your HTML, I think your HTML anchor tags need to begin with the hash navigation like so:

<a href="#/establishments">
    <button class="btn btn-default">Start</button>
</a>

Reference: AngularJS Documentation Tutorial 7 - Routing & Multiple Views

edited Sep 18, 2015 at 15:21

answered Sep 18, 2015 at 15:15

War10ck

12.5k7 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

henktenk Over a year ago

This solution works, but it loads the establishment.html into the index.html. What i'm aiming for is that the route loads an entire new page, establishment.html in this case.

War10ck Over a year ago

In that case, I think all you need to do then is have establishments.html in your anchor tag as your href. The router is meant to be used for the single page applications (spa) development style. In this case, when the page navigates, all previous JS processing will be lost. You'll need to include the relevant parts of your code on the establishments.html page as well. Using a router to navigate between two completely different pages will be pointless.

henktenk Over a year ago

Oh thanks, that's too bad. But how would you accomplish nice URL's while navigating through different pages, such as company/establishments loading establishments.html?

War10ck Over a year ago

It sounds like you're looking for an MVC style architecture pattern. Not completely sure though. Using the AngularJS router or something like sammy.js will allow for client hash based (or with HTML 5 history based) navigation to a sort of restful style url. SEO friendly urls like what you're describing executed from the server only usually occur by rewriting the url on the server to load a controller which in turn loads a model and view, thus utilizing the MVC pattern.

mason · Accepted Answer · 2015-09-18 15:30:02Z

1

AngularJS routing utilizes the fragment identifier (the # in the URL) to get its routes. That's because it can't manipulate the full URL without causing the browser to request a new page, thus making it not a SPA.

So the URL you need to request should be the form of <path to root>#/establishments. Assuming index.html is in /application/app/html, the URL to request would be:

/application/app/html/index.html#/establishments

If you also want to support the URL localhost:port/application/app/html/establishments then you need to configure your server side routing to perform a redirect to /application/app/html/index.html#/establishments.

answered Sep 18, 2015 at 15:30

mason

32.8k12 gold badges83 silver badges127 bronze badges

Comments

Abhay Pore · Accepted Answer · 2015-09-18 15:48:07Z

0

#/establishments is what you need in your anchor tag

<a href="#/establishments">
<button class="btn btn-default">Start</button>
</a>

your route will be something like this:

app.config(['$routeProvider',
function($routeProvider) {
    $routeProvider
        .when('establishments', {
            controller:'testController',
            templateUrl: '../html/establishments.html'
        });
}]);

answered Sep 18, 2015 at 15:48

Abhay Pore

758 bronze badges

Collectives™ on Stack Overflow

AngularJS routing doesnt work

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related