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!
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.
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.