angular routing not working in Visual Studio 2015

Question

It seems that by asking this question, I am just beating a dead horse, but I have been through all the posts that I could find and still could not find an answer. I (and even a colleague) have spent countless hours trying to solve what seems to be a relatively basic concept. So , can I please get some help with my angularjs routing

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="foodApp">

<head>
    <meta charset="utf-8" />
    <title>What Do I Eat</title>

    <link href="/app/css/app.css" rel="stylesheet" />
    <link href="/Content/bootstrap.min.css" rel="stylesheet" />

    <script src="/Scripts/jquery-1.9.1.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/angular-resource.min.js"></script>
    <script src="/Scripts/angular-route.min.js"></script>
    <script src="/app/js/app.js"></script>

    <script src="/app/js/controllers/ExistingRestaurantController.js"></script>
    <script src="/app/js/controllers/NewExperienceController.js"></script>
    <script src="/app/js/controllers/NewRestaurantController.js"></script>
    <script src="/app/js/controllers/indexController.js"></script>
    <script src="/app/js/services/RestaurantData.Service.js"></script>
</head>

<body>
    <header class="container-fluid">
        <h1>What Do I Eat</h1>
    </header>
    <div class="container-fluid">
        <div class="navbar">
            <div class="navbar-inner">
                <ul class="nav">
                    <li><a href="#/myRest">My Restaurants</a></li>
                    <li><a href="#/addRest">Add Restaurant</a></li>
                    <li><a href="#/addExp">Add Experience</a></li>
                </ul>
            </div>
        </div>

        <ng-view></ng-view>

    </div>
    <footer class="container-fluid">
        whatever i want
    </footer>
</body>
</html>

app.js:

'use strict';

var foodApp = angular.module('foodApp', ['ngResource', 'ngRoute']);

foodApp.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider
            .when('/myRest',
            {
                templateUrl: '/templates/ExistingRestaurant.html',
                controller: 'ExistingRestaurantController'
            })
            .when('/addExp',
            {
                templateUrl: '/templates/NewExperience.html',
                controller: 'NewExperienceController'
            })
            .when('/addRest',
            {
                templateUrl: '/templates/NewRestaurant.html',
                controller: 'NewRestaurantController'
            });
    }
]);

ExistingRetaurantController.js

'use strict';

foodApp.controller('ExistingRestaurantController',
    function ExistingRestaurantController($scope) {

        $scope.restaurant = {
            name: 'Cheesecake Factory',
            food: 'Cheesecake',
            price: 6.95
        }
    }
);

ExistingRestaurant.html:

<div class="container-fluid">
    <h1>Existing Page!</h1>
</div>

Should have nothing to do with Visual Studio. Are you working with the .NET MVC framework? If so, it uses the routing from the `RouteConfig.cs` file. From my experience, angular routing and the .NET MVC routing do not play nicely together - although I would imagine any two routing engines pitted against each other would have similar problems — mhodges, Jan 31 '17 at 16:40
@mhodges no, I started with a blank site. I added the VS 2015 for a reference to the WebServer as that was a topic on many of the other closely related questions. — Stryderr, Jan 31 '17 at 16:49
Try specifying `index.html` explictly in the url - if you haven't already, just thinking VS won't put it in by default if there are no default routes set up. — Matthew Cawley, Jan 31 '17 at 16:52
Also add a default route to your angular routing using `.otherwise({ redirectTo: "/myRest" });` or similar. — Matthew Cawley, Jan 31 '17 at 16:57
And... make note that the routes are case sensitive unless you add the `caseInsensitiveMatch: true` property to your routes - my guess is it's this one, the cause of many a headache!. — Matthew Cawley, Jan 31 '17 at 16:58
@MatthewCawley this is my starting Url : http://localhost:2421/app/index.html and strangely when i click a one of my links, this is the new Url: http://localhost:2421/app/index.html#!#%2FmyRest but absolutely nothing happens — Stryderr, Jan 31 '17 at 17:13
@MatthewCawley that is exactly how my URL looks. Is what is in the index.html (

Matthew Cawley · Answer 1 · 2017-01-31T20:13:03.210

I think the problem is the project structure. Index.html appears to be nested within app. I thought the easiest fix was to move index.html to the root of the project. So with a folder structure of:

I was able to getting working as follows..

In Index.html, I changed the links to be #!/ (hash-bang):

<!DOCTYPE html>
<html lang="en" ng-app="foodApp">

<head>
    <meta charset="utf-8" />
    <title>What Do I Eat</title>

    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/angular-resource.min.js"></script>
    <script src="/Scripts/angular-route.min.js"></script>
    <script src="/app/js/app.js"></script>

    <script src="/app/js/controllers/ExistingRestaurantController.js"></script>
    <script src="/app/js/controllers/NewExperienceController.js"></script>
    <script src="/app/js/controllers/NewRestaurantController.js"></script>
</head>

<body>
    <ul>
        <li><a href="#!/myRest">My Restaurants</a></li>
        <li><a href="#!/addRest">Add Restaurant</a></li>
        <li><a href="#!/addExp">Add Experience</a></li>
    </ul>

    <ng-view></ng-view>

</body>
</html>

Then in app.js I added the $locationProvider and set the hash-prefix to !. (I don't know why it's called hashPrefix because I always think it's a suffix, given that it comes after the hash, but I can live with it.)

'use strict';

var foodApp = angular.module('foodApp', ['ngResource', 'ngRoute']);

foodApp.config(['$routeProvider', '$locationProvider',
    function ($routeProvider, $locationProvider) {

        $locationProvider.hashPrefix("!");

        $routeProvider
            .when('/myRest',
            {
                templateUrl: '/app/templates/ExistingRestaurant.html',
                controller: 'ExistingRestaurantController'
            })
            .when('/addExp',
            {
                templateUrl: '/app/templates/NewExperience.html',
                controller: 'NewExperienceController'
            })
            .when('/addRest',
            {
                templateUrl: '/app/templates/NewRestaurant.html',
                controller: 'NewRestaurantController'
            });
    }
]);

Your start path then becomes:

http://localhost:63317/index.html

and changes to the following when clicking the links:

http://localhost:63317/index.html#!/myRest
http://localhost:63317/index.html#!/addRest
http://localhost:63317/index.html#!/addExp

You could also set `$locationProvider.hashPrefix('');` (empty string) and keep your links as `#/`, there is another thread on this here: http://stackoverflow.com/questions/41328840/angular-route-extra-in-url — Matthew Cawley, Jan 31 '17 at 23:28
I tried everything there and nothing worked, however, I did find my answer and posted it. Thank you for all your help! — Stryderr, Feb 02 '17 at 02:06
I tried again and, and the $locationProvider.hashPrefix( ' ' ); is what actually worked for version 1.6.1. thank you again! — Stryderr, Feb 02 '17 at 16:56
Yes I since realised myself that this is a problem tied to version 1.6 it's caught a few people out - including me! Pleased it's sorted anyway. — Matthew Cawley, Feb 02 '17 at 17:11

score 2 · Answer 2 · answered Feb 02 '17 at 02:03

2

Well after 4 days of searching, I finally figured out my own answer. I was using angular version 1.6.1. The moment I rolled it back to 1.2.1, everything worked fine. I shall continue to research to figure out best routing practices.

answered Feb 02 '17 at 02:03

Stryderr

41
6

Angular >1.6.x is significantly different from <1.5.x, so probably angular 1.5 will also work for you (1.2 is pretty old) – devqon Feb 02 '17 at 14:44
When I posted this, i hadn't tried running through the versions yet. I am currently trying to find a solution for >1.6.x. I have a few leads and will attempt them later this evening. Will keep this thread updated as I discover. – Stryderr Feb 02 '17 at 16:41
appModule.config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix(''); }]); – Stryderr Feb 02 '17 at 17:07

score 0 · Answer 3 · answered Feb 02 '17 at 14:40

0

Try rolling your angular version back until it works.

answered Feb 02 '17 at 14:40

Brad Firesheets

762
1
6
20

exactly what i did.. and worked perfectly, thank you! – Stryderr Feb 02 '17 at 14:41

angular routing not working in Visual Studio 2015

3 Answers3