Django REST + Angular Router

Question:

Objective : to implement routing on the angular side, on the Django REST side – only work with your own api.

The question arose, how to coordinate the work of urls.py in Django and routerProvider in Angular, and where to put the templates? How to specify the path to templates templateUrl? Now the templates are in the corresponding application templates folder myapp/templates/

Basically hmtl connect angular-route.js and js:

var app = angular('myApp', ['ngRouter']);
app.config(function($routerProvider) {
   $routeProvider
        .when('/', {
             controller: 'someController1',
             templateUrl: 'template1.html'
        }
        .when('/page1/:id', {
             controller: 'someController2',
             templateUrl: 'template2.html'
        }

});

I also connect js with someController1 and someController2 controllers.

In Django REST urls.py:

urlpatterns = [
   url(r'myapi/'), include('myapp.urls')),
] + static.static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Update: In settings.py in TEMPLATE_CONTEXT_PROCESSORS added two entries: 'django.core.context_processors.media' и 'django.core.context_processors.static'.

In urls.py:

urlpatterns = [
   url(r'^myapi/', include("myapi.urls")),
   ] + static.static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) + static.static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Переместил шаблоны в /static/myapp/templates/
В шаблонах, вернее, в base.html, который подключаю во всех шаблонах, добавил в head:
<script>
    var app = angular.module('myApp', ['ngRouter']);   
    app.constant('DJANGO_SETTINGS', {
            staticUrl: '{{ STATIC_URL }}',
            mediaUrl: '{{ MEDIA_URL }}'
        });
    app.config(stateConfig);
    stateConfig.$inject = ['$routerProvider', 'DJANGO_SETTINGS'];

function stateConfig($stateProvider, DJANGO_SETTINGS) {
       $routeProvider
        .when('/', {
             controller: 'someController1',
             templateUrl: DJANGO_SETTINGS.staticUrl + 'myapp/templates/template1.html'
        }
        .when('/page1/:id', {
             controller: 'someController2',
             templateUrl: DJANGO_SETTINGS.staticUrl + 'myapp/templates/template2.html'
        }
};

Throws AttributeError at / 'str' object has no attribute 'resolve'

Update 2:

Redesigned to:

angular('myApp', ['ngRouter']);
angular
    .module('myApp')
    .config(stateConfig);

stateConfig.$inject = ['$routerProvider', 'DJANGO_SETTINGS'];

function stateConfig($stateProvider, DJANGO_SETTINGS) {
       $routeProvider
        .when('/', {
             controller: 'someController1',
             templateUrl: DJANGO_SETTINGS.staticUrl + 'myapp/templates/template1.html'
        }
        .when('/page1/:id', {
             controller: 'someController2',
             templateUrl: DJANGO_SETTINGS.staticUrl + 'myapp/templates/template2.html'
        }
};

The same mistake.

Update 3:

Added import: from django.conf.urls import patterns and remade urlpatterns = [...] + ... to urlpatterns = patterns(...) + ... The urls.py for the application is similar. Now this error is gone. The question remains, how and where to register a redirect for the site root? I registered it in the angular routing, and left it in django urls only for my api , but if I open the root of the site, then an error occurs that there is no such page, because the root / not registered in urls.py. In other words – how to coordinate url.py in django and routing in angular?

Answer:

First option:

It is possible to pass path to STATIC and MEDIA and django template to angular.js app. In the django settings, add two entries to TEMPLATE_CONTEXT_PROCESSORS: 'django.core.context_processors.media' and 'django.core.context_processors.static'

At the time of development, add url processing for static to urlpatterns :

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

In the head of the django template, add a constant for the angular application:

<script>
    angular.module('myApp')
        .constant('DJANGO_SETTINGS', {
            staticUrl: '{{ STATIC_URL }}',
            mediaUrl: '{{ MEDIA_URL }}'
        });
</script>

In an angular application, work as with a regular constant, inject wherever you want, add it as a prefix to templates, and so on. Place the templates themselves in the static directory of the Djang application, for example, in static / myapp / templates /

angular('myApp', ['ngRouter']);
angular
    .module('myApp')
    .config(stateConfig);

stateConfig.$inject = ['$routerProvider', 'DJANGO_SETTINGS'];

function stateConfig($stateProvider, DJANGO_SETTINGS) {
       $routeProvider
        .when('/', {
             controller: 'someController1',
             templateUrl: DJANGO_SETTINGS.staticUrl + 'myapp/templates/template1.html'
        }
        .when('/page1/:id', {
             controller: 'someController2',
             templateUrl: DJANGO_SETTINGS.staticUrl + 'myapp/templates/template2.html'
        }
};

Second option:

Develop angular app using $ templateCache . Usually all templates are collected in one large file, in which they are added in turn to templateCache, templateUrl is the key.

var myApp = angular.module('myApp');
myApp.run(function($templateCache) {
  $templateCache.put('template1.html', '<тут содержимое шаблона>');
});

Well, and the third option: generate js using django, then there will be no problems with the paths and you can dynamically create a router very easily. But a very controversial solution is obtained.

Post Views: 2
Scroll to Top