AngularJS router does not load page served at `templateURL`


This is my HTML page (which gets served when accessing the path /):

<form ng-submit="ctrl.loginUser()" name="myLoginForm">
    <div class="form-group">
        <input type="text" name="uname" class="form-control" ng-model="ctrl.loginuser.username" required> 

    <div class="form-group">
        <input type="password" name="pwd" class="form-control" ng-model="ctrl.loginuser.password" required>

    <input type="submit" value="Login"> 

<div ng-view></div>

And this is what gets called when the form is submitted:

angular.module("BaseApp", [])
    .config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.xsrfCookieName = 'csrftoken';
        $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';

    .config(['$locationProvider', function($locationProvider){

.config(['$routeProvider', function($routeProvider) {
.when('/home', {
    templateURL: 'static/templates/mainPage.html'
.otherwise({redirectTo: '/'});

self.loginUser = function(loginuser) {
    return $"/custom-api-auth/login", loginuser)
    .then(function(response) {

static/templates/mainPage.html is this:

<base href="/" >

I tried testing this and submitting the form. The URL changes to /home, but TESTTTTTTTT doesn’t show up. When I manually change my static URL to /static/templates/mainPage.html through the address bar and then hit enter, mainPage.html does in fact appear. When I change templateURL: 'static/templates/mainPage.html' to template: '<h5>This is the default route</h5>', This is the default route does show up correctly.

How come static/templates/mainPage.html does not show up?

I am using Django / DRF as my backend, and this is my

from django.conf.urls import url
from django.conf.urls import include
from ebdjangoapp import views
from rest_framework import routers

router = routers.DefaultRouter()
router.register(r'stuffs', views.StuffViewSet)
router.register(r'users', views.UserViewSet)

urlpatterns = [
    url(r'^api/', include(router.urls)),

    # templates
    url(r'^$', views.HomePageView.as_view()),
    url(r'^home$', views.MainPageView.as_view()),

    # login logout
    url(r'^custom-api-auth/login$', views.login_view.as_view()),
    url(r'^custom-api-auth/logout$', views.logout_view.as_view()),

And this is my

class HomePageView(TemplateView):
    def get(self, request, *args, **kwargs):
        return TemplateResponse(request, "home.html")

class MainPageView(TemplateView):
    def get(self, request, *args, **kwargs):
        return TemplateResponse(request, "mainPage.html")

Note that /home serves the page mainPage.html and / serves the page home.html (a bit confusing I know).


Isn’t it templateUrl, not templateURL in your $routeProvider code?

$routeProvider documentation

Answered By – Bradley Taniguchi

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.