AngularJS 路由器不加载在 `templateURL` 提供的页面答案

【问题标题】：AngularJS router does not load page served at `templateURL`AngularJS 路由器不加载在 `templateURL` 提供的页面
【发布时间】：2017-08-29 00:28:12
【问题描述】：

这是我的 HTML 页面（访问路径 / 时提供）：

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

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

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

<div ng-view></div>

这是提交表单时调用的内容：

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

    .config(['$locationProvider', function($locationProvider){
        $locationProvider.html5Mode(true);
    }])

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


self.loginUser = function(loginuser) {
    return $http.post("/custom-api-auth/login", loginuser)
    .then(function(response) {
        $location.url("/home");
    });
};

static/templates/mainPage.html是这个：

<html>
<head>
<base href="/" >
</head>
<h5>TESTTTTTTTT</h5>

我尝试对此进行测试并提交表单。 URL 更改为/home，但TESTTTTTTTT 不显示。当我通过地址栏手动将我的静态 URL 更改为 /static/templates/mainPage.html 然后按回车键时，mainPage.html 实际上确实出现了。当我将templateURL: 'static/templates/mainPage.html' 更改为template: '<h5>This is the default route</h5>' 时，This is the default route 会正确显示。

static/templates/mainPage.html怎么没有出现？

我使用 Django / DRF 作为我的后端，这是我的urls.py：

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()),
]

这是我的views.py：

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")

请注意，/home 服务于页面mainPage.html，而/ 服务于页面home.html（我知道有点混乱）。

【问题讨论】：

您的主 HTML 文件中是否有 <base href="/" > 标记？
@BenBeck 我刚刚将它添加到我的mainPage.html（我也编辑了帖子以反映更改）。
模板中通常没有 <html> 和 <head> 标记，因为它是在 <div> 和 ng-view 中加载的，这可能已经在 @ 内的页面上987654348@ 标签。如果删除这些标签会发生什么？
@Lex 哦，好吧。如果我从 mainPage.html 中删除 html 和 head 标签，它仍然是同样的问题（
TESTTTTTTTT
不显示）。

标签： angularjs django django-rest-framework ngroute angularjs-ng-route

【解决方案1】：

你的 $routeProvider 代码中不是 templateUrl，而不是 templateURL 吗？

参考：
$routeProvider documentation

【讨论】：

在处理诸如此类的愚蠢问题时，我已经失去了大半生，所以你并不孤单哈哈。