Angular and django integration

Question

I'm writing application with django and angular and I have following problem. After authentication in django I turn mvc view with angular app definition.

<div class="main">  
    <div class="main-inner">
        <div class="container" ng-app="povos" ng-view>
            {% block content %}{% endblock %}
            {% block scripts %}{% endblock %}
        </div>    
    </div>
</div>

<script src="/static/assets/js/bootstrap.js"></script>
<script src="/static/assets/js/angular.js"></script>
<script src="/static/assets/js/angular-route.js"></script>
<script src="/static/assets/js/angular-cookies.js"></script>
<script src="/static/spa_app/app.js"></script>
<script src="/static/spa_app/modules/messages/messages.module.js"></script>

My app.js looks like that:

angular.module('povos', ['povos.messages'])

And my messages module like following:

angular.module('povos.messages', ['ngRoute'])

.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/messages', {
        templateUrl: 'messages.html'
      })
  }])

My problem is that if I return that view and I try to request to /messages path I get:

Page not found (404)
Request Method: GET
Request URL:    http://127.0.0.1:8000/messages
Using the URLconf defined in povos.urls, Django tried these URL patterns, in this order:
(urls here)
The current URL, messages, didn't match any of these.

My browses call to django mvc app. I understand in this way. Is it possible not to call django only work on angular routeProvider? How to configure it? Sorry for my english but It is not my native language.

okm · Accepted Answer · 2014-07-27 10:15:36Z

3

You are serving the page through Django, so first ensure /messages/ is available in urls.py of Django.

After the root page and AngularJS files are loaded successfully, Angular starts to aware the URL:
by default it's in the hash form, thus only when the URL is /messages/#/messages, can the Angular router match the URL and render message.html.

/messages/#/messages
^        ^ ^       ^
|        | |       |
|        | |Angular Part  
|Django Part

answered Jul 27, 2014 at 10:15

okm

23.9k5 gold badges86 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular and django integration

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related