3

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:

static files screenshot

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?

AncientSwordRage
  • 7,086
  • 19
  • 90
  • 173

2 Answers2

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.

Community
  • 1
  • 1
AncientSwordRage
  • 7,086
  • 19
  • 90
  • 173
0

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"
        })
thedoctor
  • 1,498
  • 1
  • 12
  • 12
  • 1
    What is the error you are getting? You can adopt either approach (i.e. explicitly give the list of dependencies as strings in array format, or just define the function as has been done in the plunkr), you will only notice the different if you minimize the javascript. In that case the plunkr version will stop working, because as part of minimization all the parameter names will be renamed and angular won't know what value to inject; The array approach is to provide explicit strings, which will not be rewritten on minization so the dependencies can still be injected. – thedoctor Feb 24 '15 at 10:18
  • You have a couple of characters modules which are dependencies of your module, can you drill down into the error to see if it's one. It's not massively user friendly, but you should be able to pin point where the problem is. – thedoctor Feb 24 '15 at 10:29
  • Found the error: I was assuming my script tags were self closing! – AncientSwordRage Feb 24 '15 at 10:40