Angular 路由不会加载 templateUrl答案

【问题标题】：Angular route won't load templateUrlAngular 路由不会加载 templateUrl
【发布时间】：2014-07-31 15:57:05
【问题描述】：

我似乎无法使用 angularjs 路由加载 templateUrl。
使用 django 和 angularjs。
我所做的是转到 127.0.0.1:8000/phones/，它会将我重定向到 127.0.0.1:8000/phones/#/
然后，我刷新，仔细检查。
在这两种情况下（第一次和刷新后）我只看到 TESTING 字符串。代码如下：

index.html

{% load staticfiles %}
<!DOCTYPE html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js">        </script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
        <script>
            var phones = angular.module('phones', ['ngRoute']);
            phones.config(function($interpolateProvider){
                $interpolateProvider.startSymbol('{[{');
                $interpolateProvider.endSymbol('}]}');
            });
            phones.config(['$routeProvider', function($routeProvider) {
                $routeProvider.
                    when('/', {
                        templateUrl: "{% static "partials/first.html" %}",
                    }).otherwise({
                        redirectTo: "/"
                    });
            }]);
        </script>
    </head>
    <body ng-app="phones">
        <div ng-view></div>
        TESTING
    </body>
</html>

first.html

HELLO

从运行服务器控制台：

[31/Jul/2014 18:40:46] "GET /phones/ HTTP/1.1" 200 1488
[31/Jul/2014 18:40:48] "GET /phones/ HTTP/1.1" 200 1488
[31/Jul/2014 18:40:48] "GET /static/partials/first.html HTTP/1.1" 304 0

如您所见，angularjs 路由确实请求了 HTML，但仍然没有显示出来。

我的另一个问题是关于控制台输出。为什么它仅在我刷新时才发送（或仅显示）first.html 的 GET 请求？我希望路由在第一次请求 first.html..

编辑添加浏览器的控制台：

TypeError: undefined is not a function
    at v (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js:6:357)
    at g.$broadcast (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:102:324)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js:11:179
    at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:91:121)
    at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:91:121)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:92:288
    at g.$eval     (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:100:198)
    at g.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:98:82)
    at g.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:101:12)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:66:321) angular.js:9037

EDIT #2 - 在更改为非缩小角度后添加浏览器的控制台：

TypeError: undefined is not a function
    at update (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js:871:25)
    at Scope.$broadcast (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js:11803:28)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js:552:26
    at wrappedCallback (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js:10549:81)
    at wrappedCallback (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js:10549:81)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js:10635:26
    at Scope.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js:11528:28)
    at Scope.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js:11373:31)
    at Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js:11634:24)
    at done (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js:7635:45)

感谢您的宝贵时间

【问题讨论】：

#/ 由 Angular 的 routeProvider 在您设置 html5mode(false) 时自动添加，这是默认设置。您是否从浏览器控制台收到任何错误？
在 EDIT 之后添加了浏览器的控制台。关于主题标签，我知道，但是为什么我的 runserver 控制台仅在刷新时才显示 GET 请求？
尝试包含非缩小版本以进行调试，并查看控制台错误会将您带到何处。此外，如果您想缩小您的应用程序，您需要将 phones.config(function($interpolateProvider){ 更改为 phones.config(['$interpolateProvider', function($interpolateProvider){
@kiswa，正如您从第二次编辑中看到的那样，它让我得到了同样的结果。我真的不明白为什么这个简单的事情不起作用？？

标签： javascript django angularjs angularjs-routing angular-template

【解决方案1】：

您包含的 AngularJS 版本错误。

改变这个：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js">        </script>

到这里：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js">        </script>

这花了太长时间才弄清楚！

【讨论】：