Angular route won't load templateUrl
-
22-12-2019 - |
Question
I can't seem to load the templateUrl using the angularjs routing.
Using django and angularjs.
What I do is go to 127.0.0.1:8000/phones/, it redirects me to 127.0.0.1:8000/phones/#/
Then, I refresh, to double check.
In both cases (first time and after refresh) I just see the TESTING string. Here's the code:
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
From the runserver console:
[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
As you can see, the angularjs routing does requests the HTML , but still it doesn't get displayed.
Another question I have is regarding the console output. Why does it send (or just show) the GET request for first.html only when I refresh? I'm expecting the routing to request the first.html on first time..
EDIT Adding the browser's console:
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 - adding browser's console after changing to the not minify angular:
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)
Thanks for your time
Solution
You're including the wrong version of AngularJS.
Change this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"> </script>
to this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"> </script>
That took way too long to figure out!