href angularjs not routing

Question

I have defined my href links like this:

   <div id="left-menu">
      <div class="sub-left-menu scroll">
        <ul class="nav nav-list">
            <li><div class="left-bg"></div></li>
            <li class="time">
              <h1 class="animated fadeInLeft">21:00</h1>
              <p class="animated fadeInRight">Sat,October 1st 2029</p>
            </li>
            <li class="active ripple">
              <a href="#hosts">
                  <span class="fa-home fa"></span> Dashboard
              </a>
            </li>
            <li class="ripple">
                <a href="hosts/hosts.html">
                    <span class="fa fa-calendar-o"></span> Calendar
                </a>
            </li>
          </ul>
        </div>
    </div>

However when I click on the <a> tags it does not seem to pull back the content held within the my hosts.html file. The url in the browser also does not change with the base url being http://localhost/dashboard/#/main and when I click host the desired output should be http://localhost/dashboard/#/hosts with the correct content displaying. Here is the theme pack I am using http://akivaron.github.io/miminium/

Here are my angularjs files starting with the app itself 'dashApp'

'use strict'

// Declare app level module which depends on views, and components
angular.module('dashApp', [
  'ngRoute',
  'dashApp.main',
  'dashApp.hosts'
])

.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider
    .otherwise({redirectTo: '/main'});
}]);

here is my main:

'use strict'

angular.module('dashApp.main', ['ngRoute'])

.config(['$routeProvider', function($routeProvider){
  $routeProvider.when('/main', {
    templateUrl: 'main/main.html',
    controller: 'mainController'
  })
}])

.controller('mainController', function($scope, $http, $window){

});

and here is my hosts file:

'use strict'

angular.module('dashApp.hosts', ['ngRoute'])

.config(['$routeProvider', function($routeProvider){
  $routeProvider.when('/hosts', {
    templateUrl: 'hosts/hosts.html',
    controller: 'hostsController'
  })
}])

.controller('hostsController', function($scope, $http, $window){
});

and here is the project structure: https://gyazo.com/fb5e2a2651fe8cc460fde783237ddd9c

charlietfl · Accepted Answer · 2016-05-28 23:00:12Z

1

Remove the trailing / in the href's. They need to match the url in your routing config

Example

<a class="tree-toggle nav-header" href="#/main/" target="_self">

Should be

<a class="tree-toggle nav-header" href="#/main" >

answered May 28, 2016 at 23:00

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

7 Comments

DorkMonstuh Over a year ago

This did not seem to solve the problem, it still does the same thing as mentioned in my post

charlietfl Over a year ago

Are you sure template path is correct? Add a route change error handler and get error details. Also have you included an ng-view in main page?

DorkMonstuh Over a year ago

where do I implement this? In the app or the main module?

Gregg Over a year ago

This answer should fix your problem. You have your routes wrong in the hrefs.

DorkMonstuh Over a year ago

@charlietfl error handler, I do have an ng-view in my main page

|

Gonzalo.- · Accepted Answer · 2017-11-28 03:54:02Z

1

"Href" links should be inside ng-app and ng-view also inside the app. Like Below

<div ng-app="myApp" ng-controller="myController">
    <a href="#/home">home</a>
    <a href="#/book">books</a>
    <div ng-view></div>
</div>

first of all check the above then update your js file like below:-

var app=angular.module("myApp",['ngRoute']);
app.config('$routeProvider',function($routeProvider){
$routeProvider
   .when('/home',{
     templateUrl:'path/some.html'
    })
});

feel free to ask if any doubt.

edited Nov 28, 2017 at 3:54

Gonzalo.-

12.7k5 gold badges53 silver badges84 bronze badges

answered Dec 7, 2016 at 17:10

Rahul Kumar

1459 bronze badges

Comments

lithium · Accepted Answer · 2016-05-29 18:10:56Z

0

I think you should remove the hash.

<a class="tree-toggle nav-header" href="/main">link</a>

answered May 29, 2016 at 18:10

lithium

2291 silver badge7 bronze badges

5 Comments

DorkMonstuh Over a year ago

That did not work either, I have tried putting in a static url to google and that did not work either when I clicked on it

lithium Over a year ago

Maybe ng-href should have a different output. I'm sorry I can't try right now.

DorkMonstuh Over a year ago

Nope that did not work either, when I click on the links it does not do anything at all.

lithium Over a year ago

can you try to make a jsfiddle, plunkr or codepen of your exact code, would be esier to understand.

DorkMonstuh Over a year ago

I don't think this is an angular problem, I can right click and open in new tab and this works. I think maybe a css problem? something over the top of my links that is preventing me from clicking them? I am using a theme pack and trying to integrate it with angular, I will update the post with the current HTML markup and the themepack I am using

Collectives™ on Stack Overflow

href angularjs not routing

3 Answers 3

7 Comments

Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

5 Comments

Related