Angular fails to load template

Question

I'm trying to compartmentalize an Angular app and running into issues getting the ngView working properly. The route seems to be configured correctly, as when I log its properties I get: $route, $routeParams, and $location, I get:

Object {routes: Object, reload: function, updateParams: function}

Object {}

and

LocationHtml5Url {$$html5: true, $$protocol: "http", $$host: "localhost", $$port: 3000, $$parse: function…}

I read here that the $routeParams can appear empty due to its aynchrynous nature, so I don't think thats an issue, but I'm not sure what I'm missing.

Heres the err message:

GET http://localhost:3000/partials/projectBlocks 404 (Not Found)

I know I'm supposed to be routing relative to the root of my app, which I believe I am, so I'm not sure why its looking for the partial in what appears to be the ../public/.../ folder (app is typical express structure)

Heres my code:

jade view (in ./views)

div(ng-controller='projects')

div(ng-view)

partial view (./views/partials)

p hey you found me!

controller (in /public/ directory)

    angular.module('mean-man')
    .controller('projects', ['$scope', '$http', '$route', '$routeParams', '$location', function($scope, $http, $route, $routeParams, $location){

    console.log($route);
    console.log($routeParams);
    console.log($location);
    this.$route = $route;
    this.$location = $location;
    this.$routeParams = $routeParams;

angular app.js file (in /public/ directory)

(function(){
angular.module('mean-man', ['ngRoute','ngAnimate','mm.foundation'])
    .config(['$routeProvider', '$locationProvider',
             function($routeProvider, $locationProvider){
                 $routeProvider
                 .when('/:member', {
                    templateUrl: 'partials/projectBlocks',
                     controller: 'projects',
                     controllerAs: 'project'
                 });
                 $locationProvider.html5Mode({enabled:true,requireBase:false});
             }]);

})();

I was going off the AngularJS official documentation and this site, so my code may be a mix of the two, thanks for any help / references!

It doesn't, actually I added that line in because of a recommendation I found in another answer, although I can't find the link now — adrian_reimer, Mar 23 '15 at 20:06
Oh so it looks like that path actual doesnt exist, which it doesnt. That file is inside of views right? so the templateUrl should be 'views/partials/projectBlocks.html' — ribsies, Mar 23 '15 at 20:08
yup thats it. my app structure is as follows: views are in ./views/ partials are: ./views/partials and my angular app is in: /public/javascripts/app. Oh but my file is projectBlocks.jade, does it need to be an .html extension? — adrian_reimer, Mar 23 '15 at 20:10

score 0 · Answer 1 · answered Mar 23 '15 at 21:34

AngularJS won't compile the Jade templates for you. You have it setup to look at 'partials/projectBlocks', and since I assume you are using '/public' for your static server directory, it's going to expect a file at '/public/partials/projectBlocks' relative to your project's root directory.

To solve this problem, you need to either setup some middleware that will check if the request is looking for a file in the partials directory, and if so, compile it using Jade so that it will exist when the request reaches the static server middleware, or, manually compile the Jade into HTML using something like HTML2Jade and create a new file in the '/public/partials' directory called 'projectBlocks'. AngularJS will not assume an HTML extension, so if you make the file called 'projectBlocks.html', you must change the template URL to 'partials/projectBlocks.html'

After a quick Google search, you can use Connect Jade to accomplish the first suggestion I made above. Simply follow the instructions in the README, and it will act as a Jade compiler and static server for that directory.

Yup I know that it won't compile the Jade though. In many examples online you can see them reference their jade files by simply not adding the .jade extension when pointing to them in their views folder. I ended up finding the solution after a bit more digging in another question, but thanks for the suggestions! — adrian_reimer, Mar 23 '15 at 23:44

score 0 · Answer 2 · edited May 23 '17 at 12:13

I ended up finding the solution in another answer here:

Express and AngularJS - web page freezes when attempting to open home page

The short of it is I got myself confused between my Express routers and Angular routers. I had moved my partials/projectBlocks around while debugging trying to find the correct file structure because the one I'd created didn't seem to work. But, when I got it connected it would stall out the browser. Turns out I left out the handler for the actual Angular request, causing it to never go through and timing out.

Angular fails to load template

2 Answers2