angularJS href route conflict

Question

Hello I have a common navigation bar for all my mvc pages. This is an MVC 4.0 app.

this is the model of breadcrumbs nav:

<div id="nav">
    <ul class="brdcm">
        @{ 
            Sample.Models.BreadCrumbsCollection cln = ViewBag.BreadCrumbs;
            if (cln != null)
            {
                for (int i = 0; i < cln.Count; i++)
                {
                    if (i == 0)
                    {
            <li class="last"><a href='@cln[i].Url'>@cln[i].Text</a></li>
                    }
                    else
                    {
            <li><a href='@cln[i].Url'>@cln[i].Text</a></li>
                    }
                }
            <li class="first">
                <img src='@cln.IconUrl' /></li>
            }}
    </ul>
</div>

in the view file the breadcrumbs its built like this:

@using sample.Models.Quotas;
@{   
    ViewBag.Title = "Construction Quote";
    Layout = "~/Views/Shared/_Layout.cshtml";
    Sample.Models.BreadCrumbsCollection cln = new Sample.Models.BreadCrumbsCollection();
    cln.Add(new Sample.Models.BredCrumb() { Text = "Construction Quote", Url = "/quote/"});

    //cln.Add(new Sample.Models.BredCrumb() { Text = "Construction Quote", Url = "/quote/" + q.QuoteId.ToString() });
    cln.Add(new Sample.Models.BredCrumb() { Text = "Quotes", Url = "/quotes" });
    cln.Add(new Sample.Models.BredCrumb() { Text = "Home", Url = "/" });
    cln.IconUrl = "/Images/msg_icon.png";
    ViewBag.BreadCrumbs = cln;
}

cs.app.js file looks like this:

var appModule = angular.module('SampleApp', ['ngResource', 'ngRoute', 'ngSanitize', 'ngCookies', 'ui.utils']);

appModule.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/Quote/:quoteId', { controller: ConstructionQuoteController });
    $locationProvider.html5Mode(true);
});

The issue I have is that all href links inside the app page work but have to be done through ng-click and added as a $scope in the script

href witten like this works:

<a href="" ng-click="gotoSummary()">Summary</a>

but this doesn't work:

cln.Add(new Sample.Models.BredCrumb() { Text = "Home", Url = "/" });

what this does is that all my main nav and footer links dont work as they are build with normal a href =

how can I change the model to use ng click when the div calls for the controller and still make it work for all other normal href links?

thank you for all your help

What happens when you click a link with just href? I suggest we focus on getting href working and only use ng-click when we need to do other things besides navigate. If you are using HTML 5 mode then you need to define every route serverside as well as clientside. The server needs to return the base page where angular is loaded for every url. Then angular can look at the url and do the rest. — Ben Wilde
when I click on a normal href the url on the address bar changes but doesn't redirect. — GTITC
so I just chanfed html5 from true to false and all links angular and not are working correcty. In what cases is it required to have html set to true? — GTITC
with html 5 mode off, all the angular routes have a # in them e.g. /#/whatever. With html 5 mode on, it removes the # from all the routes e.g. /whatever. so your href values need to reflect that. — Ben Wilde
for some reason as soon as I turned off htmlmode all links worked, all href links don't have the # and they still work — GTITC

sylwester sylwester · Accepted Answer · 2014-07-31T20:27:27

For Angular use # in links (please see here http://plnkr.co/edit/55jSlti81Xggk6tue1HW?p=preview)

 <a href="#/products/">Angular Product Link</a>

For 'Non Angular' use normal links

  <a href="/products/">Non Angular Product Link</a>

angularJS href route conflict

1 Answers