Template not loading in Angular route

Question

Issue is quite simple. I have been trying for hours now but just couldn't get the template to load via angularJS client side routing. Not using any server side routing.

So, used various combinations of paths. If I use "/home" in button href it straight away gives error that it couldn't find "/home". But with "#/home", I don't get that error but it still wouldn't load the template.

Any help would be greatly appreciated.

Created a new plunker: http://plnkr.co/edit/F7KoWbBuwsXOQLRPF0CN?p=preview

Template directory:

Project ---
           |
           |
          CSS
           |
           |
          JS
           |
           |
       templates---
                  |
                  |
                home.html

JS:

var myApp = angular.module("myApp",['ngRoute']);


myApp.controller('appController',function($scope,$http){
//mytext = 0; instantiating variables without using var gives referencing error due to "use strict";
      $scope.angular = angular;
      $scope.mytext = "Harsh";
      $scope.formSuccess = false;


    $http({method:"GET", url:"JS/carousel-data.json"}).
    success(function(data) {
    $scope.carouselData = angular.fromJson(data);   
    }).
    error(function(data) {
        console.log("Error loading images");
    });

myApp.config(function($routeProvider, $locationProvider) {

  $routeProvider
   .when('/home', {
    templateUrl: 'templates/home.html',
    controller: 'appController'
  })
  .when('/edit', {
    templateUrl: 'templates/home.html',
    controller: 'appController'
  });

});

HTML:

<body ng-controller="appController">
    <header id="pageHeader" class="col-md-12 col-sm-12 col-xs-12 header">


                <nav class="col-md-5 col-sm-6  col-xs-10 menu">
                    <ul class="nav nav-pills" id="menuLinks">

                        <li class="dropdown visible-xs">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Sapient <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                            <li><a href="#/home">Home</a></li>
                            <li><a href="#/edit">Edit</a></li>
                          </ul>
                        </li>

                        <li role="presentation" class="hidden-xs" ><a href="#/home">Home</a></li>
                        <li role="presentation" class="hidden-xs" ><a href="#/edit">Edit</a></li>
                    </ul>

                 </nav>

            </header>

<div ng-view></div>

</body>

I can see few errors in your code, it would be helpful if you can add the errors that you see in the console (If you are using Google Chrome, right click on any part of the page, Inspect element, then go the Console tab). There you can find more details about the error that's generated, can be just a path issue, or something different. — peppeocchi
– peppeocchi, Commented Jun 17, 2015 at 13:21
working in mine. Check again plnkr.co/edit/F7KoWbBuwsXOQLRPF0CN?p=preview — Harsh
– Harsh, Commented Jun 17, 2015 at 14:32

skubski · Accepted Answer · 2015-06-17 13:27:41Z

2

It's rather unclear how you've set up things? Is the HTML your index or is that your home.html?

Secondly you already declare the controllers of your pages to be appController, no need to define that with the ng-controller directive anymore.

Apart from that you're loading the same template on each href, could it be that you're just seeing the same page like declared?

  $routeProvider
   .when('/home', {
    templateUrl: 'templates/home.html', <---
    controller: 'appController' <---
  })
  .when('/edit', {
    templateUrl: 'templates/home.html', <---
    controller: '**appController'<--
  });

It should be noteworthy that there is a more extensive module for routing. You can find it at ui-router.

answered Jun 17, 2015 at 13:27

skubski

1,6162 gold badges21 silver badges27 bronze badges

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

6 Comments

Harsh Over a year ago

1) I am just doing a simple routing as a POC, so I want to load home.html on click of some anchor tag which points to /home. 2) Neglect controller and Edit part. That is just dummy controller. Main point is I want to route home.html to ng-view when anchor tag is clicked.

Harsh Over a year ago

Checkout. Created a new plunker for the problem.

Harsh Over a year ago

Thanks for trying. But this works in plunker but not in my system. I would give you upvote for trying.

skubski Over a year ago

I worked on your plunker a bit and I got it working the way I believe you intended it to work. Since I couldn't save it, I updated my plunker with the working code. (I left some comments in there too)

Harsh Over a year ago

Actually I already started working on your earlier provided template. Just copy pasted it. may be it was some unknown issue with my old code. So had to clean it and repaste the whole thing(old code again) into your format. So it is working now. Thanks. But I am still very much confused about how to use Urls in anchor tag. Whether to use # with Urls or not.

|

Collectives™ on Stack Overflow

Template not loading in Angular route

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related