AngularJS Module 'ui.router' is not available for my Djangular project

Question

Django is a python web frameworks, AngularUI Router is an AngularJS module for heroic routing. Together they fight crime.

Or they would if it could find the 'ui.router' module.

Here're my imports:

  <script src="{% static 'angular.js' %}"></script>
  <script src="{% static 'angular-route.js' %}"/>
  <script src="{% static 'angular-ui-router.js' %}"></script>
  <script src="{% static 'angular-cookies.js' %}"></script>
  <script src="{% static '/djangular/app.js' %}"></script>
  <script src="{% static 'js/app.js' %}"></script>
  <script src="{% static 'js/services.js' %}"></script>
  <script src="{% static 'js/controllers.js' %}"></script>
  <script src="{% static 'js/filters.js' %}"></script>
  <script src="{% static 'js/directives.js' %}"></script>

Here the {% static 'path/to/script' %} notation searches a list of paths for my static file.

Here they are:

D:\Django_Projects\nwod_characters\static
D:\Django_Projects\nwod_characters\static\css
D:\Django_Projects\nwod_characters\static\fonts
D:\Django_Projects\nwod_characters\static\img
D:\Django_Projects\nwod_characters\static\js
D:\Django_Projects\nwod_characters\static\js\app # angular-ui-router.js lives here
D:\Django_Projects\nwod_characters\static\svg
D:\Django_Projects\nwod_characters\characters\app
D:\Django_Projects\nwod_characters\characters\app\css
D:\Django_Projects\nwod_characters\characters\app\js
D:\Django_Projects\nwod_characters\characters\app\partials

And proof angular-ui-router exists, from Sublime:

And here's a snippet from my app.js

angular.module('characters', ['djangular','ui.router',
    'characters.filters', 'characters.services', 'characters.directives', 'characters.controllers'])
    .config(['$stateProvider','DjangoProperties', 
    function($stateProvider, DjangoProperties, $urlRouterProvider) {

    $urlRouterProvider.otherwise("/users");

  // Now set up the states
      $stateProvider
        .state('users', {
          url: "/users",
          templateUrl: "partials/users.html"
        })

I've tried to set up this file correctly, but I'm not 100% sure. JavaScript is not my native language! In my understanding, the file angular-ui-router.js exports the module ui.router , that has the providers '$stateProvider' and $urlRouterProvider . Is that right? If so what am I doing wrong?

I've also looked at the plunkr provided by AngularUI Routing. They configure their app slightly different, but I think the result should be the same:

 <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
....
var myapp = angular.module('myapp', ["ui.router"])
    myapp.config(function($stateProvider, $urlRouterProvider){

So where am I going wrong that angular can't load the ui-router module?

Answer 1

The problem is here:

<script src="{% static 'angular-route.js' %}"/>
<script src="{% static 'angular-ui-router.js' %}"></script>

The first line is an attempt at a self closing script tag. This doesn't work .

Answer 2

There is an error in the parameters for your config definition, you have forgotten to add '$urlRouterProvider' to list of parameters in the list.

angular.module('characters', ['djangular','ui.router',
    'characters.filters', 'characters.services', 'characters.directives', 'characters.controllers'])
    .config(['$stateProvider','DjangoProperties', '$urlRouterProvider',
    function($stateProvider, DjangoProperties, $urlRouterProvider) {

    $urlRouterProvider.otherwise("/users");

  // Now set up the states
      $stateProvider
        .state('users', {
          url: "/users",
          templateUrl: "partials/users.html"
        })