AngularJS - Partials not getting loaded for paths other than /

Question

I have a simple Angularjs app that uses route provider. The home page renders fine (including the partials), but the partials on other routes aren't getting rendered (the index page loads fine, but the section corresponding to ngView is blank). Here's what I have:

$APP_HOME/public/javascripts/app.js

angular.module('myapp', ['ngRoute', 'ui.bootstrap', 'myapp.services'])
    .config([ '$routeProvider', function($routeProvider) {
            $routeProvider.
            when('/', {
                    templateUrl : 'partials/home.html',
                    controller : CarouselCtrl
            }).
            when('/add', {
                    templateUrl : 'partials/form.html',
                    controller : AddCtrl
            }).
            when('/about', {
                    templateUrl : 'partials/about.html',
                    controller : StaticCtrl
            }).
            when('/donate', {
                    templateUrl : 'partials/donate.html',
                    controller : PaymentCtrl
            }).
            otherwise({
                            redirectTo : '/'
                    });
            } ]);

Example link in the home page:

<li><a href="#/about">About</a></li>

The partials folder has the following files:

[root@localhost partials]# ls about.html donate.html form.html home.html

I have blank controllers for StaticCtrl and PaymentCtrl in the controllers.js file.

function StaticCtrl($scope){
}

function PaymentCtrl($scope){
}

All relevant js files have been included in the index page as well.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    <script src="/javascripts/app.js"></script>
    <script src="/javascripts/services.js"></script>
    <script src="/javascripts/controllers.js"></script>

Folder structure:

I use node.js as web server.

APP_HOME

[root@localhost]# ls
app.js  node_modules  package.json  public  README.md  routes  views

public:

[root@localhost public]# ls
css  images  javascripts  partials  stylesheets

javascripts:

[root@localhost javascripts]# ls
app.js  controllers.js  services.js

Initially, I thought it's the blank controller that's causing the issue, but it doesn't work with non-empty controllers either. Not sure what I'm missing. Please advise.

can you share your folder tree of index, app.js and partials?? — Santiago Rebella, Jan 19 '15 at 21:43

Santiago Rebella · Answer 1 · 2015-01-19T22:27:47.710

0

You are putting app.js in

$APP_HOME/public/partials/app.js

and relatively going to partials so you are searching for

$APP_HOME/public/partials/partials

move up a level app.js or take out the partials part of the paths

EDIT----

can you try preppending '/' to the templates paths?

edited Jan 19 '15 at 22:27

answered Jan 19 '15 at 21:26

Santiago Rebella

2,399
2
22
29

Sorry, typo. app.js is located in APP_HOME/public/javascripts folder and not under partials. Also, my home view is rendered fine. – user1452030 Jan 19 '15 at 21:37
Tried moving app.js one level up, but still no luck. – user1452030 Jan 19 '15 at 22:04
try to inspect where are the http get requests going – Santiago Rebella Jan 19 '15 at 22:31

score 0 · Answer 2 · answered Jan 20 '15 at 00:09

I tried tracing my GET requests and apparently, the partials ARE loading fine, but the content was hidden behind the bootstrap navbar. My home page has a carousel control and though a portion of that has been tucked under the navbar, it was visible, but for the other partials, they were a few lines of text, which weren't visible, at all.

Now, I need to figure out why the ngView is tucked under the navbar, but I guess that's outside the scope of this question.

Thanks everyone, for your time and support.

AngularJS - Partials not getting loaded for paths other than /

2 Answers2