ngRoute doesn't seem to work
angularjs, angularjs-ng-route
Solution
You have typos inside of your `when` calls:
Example:
templateURL: '/partials/workspace_view.html',
should be
templateUrl: '/partials/workspace_view.html',
(notice the difference in caps, templateURL changes to templateUrl)
Problem
I have a web app that doesn't seem to work at all if I try to use ngRoute approach to changing primary page view. The routing config looks like: ``` var app; app = angular.module('genehaxx', ['ngGrid','ngRoute', 'ngSanitize', 'ui.bootstrap','genehaxx.filters', 'genehaxx.services']) .config(function($routeProvider){ //route setup $routeProvider .when('/workflows', { templateURL: '/partials/workspace_view.html', controller: 'MainController' }) .when('/jobs', { templateURL: '/partials/submissions_view.html' , controller: 'MainController' }) .when('/', { templateURL: '/partials/analyses_view.html', controller: 'MainController' }) .when('/analyses', { redirectTo: '/' }) .otherwise({ redirectTo: '/' }); }); function MainController($scope, $modal, $rootScope, User, Data, Workflow, Step){ //lots of proprietary code here.. } ``` I have tried it with and without the '/' in front of partials. I have tried it both with its normal web-server reverse proxied under nginx and directly under http-server from its directory. In both cases there is no evidence whatsoever that the partials pages are ever requested from the server. The main view is a bit hairy to post in entirety but the relevant bits look like: ``` <!doctype html> <html lang="en" ng-app="genehaxx" > <head> <meta charset="utf-8"> <title>Welcome to Genengine!</title> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="css/app.css"/> <link rel="stylesheet" href="css/ng-grid.css"> <script src="lib/jquery-2.0.2.js"></script> <script src="libs/angular/angular.js"></script> <script src="libs/angular-route/angular-route.min.js"></script> <script src="libs/angular-sanitize/angular-sanitize.js"></script> <script src="lib/transition.js"></script> <script src="lib/bootstrap-custom/ui-bootstrap-custom-tpls-0.10.0.js"></script> <script src="lib/ng-grid-2.0.7.debug.js"></script> <script src="js/app.js"></script> <script src="js/filters.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script> <script src="js/objects.js"></script> <script src="js/services2.js"></script> <script src="js/dropdownToggle.js"></script> </head> <body> <div id="main"> <div ng-view></div> </div> </body> </html> ``` I have left off the navbar stuff as it seems irrelevant and I get the same results clicking it or directly entering the url with #whatever. The /libs directories have the latest angular, angular-route, angulare-sanitize from bower. Small samples I tried plugging in my libraries and partials seem to work which is even more frustrating. I have been stumped on this for days. I hacked around it in production with mess of ng-includes and some "clever" code but I would rather get this working. Anything pop out? When I say it doesn't work, again I mean that I see no evidence that any routing occurred in that these partials are never requested from the server.