AngularJS1.5 + Django に挑戦してみる 1 AnguraJSの設定 その２

概要

AngularJS1.5 + Django に挑戦してみる 1 AnguraJSの設定　その２

参考動画

www.codingforentrepreneurs.com

Angular Templates in Django Part 1

• angフォルダと、その中に、init.py, views.pyを作成する。

• views.pyを以下のように設定してみる。

from django.shortcuts import render

def get_angular_template(request, path=None):
    return render(request, "ang/app/blog-list.html", {})
# templates/ang/app/blog-list.htmlのファイルは新しく作成する

• ang/app/blog-list.htmlに、try angularの方のblog-list.htmlのコードをそのままコピペする。

• さらに、index.htmlの内容を、templates/ang/home.htmlにコピペする。

• さらに、try angularのstaticfileの、img, js, jsonを、src/staticの中にコピペしてくる。

• これで、python manage.py collectstaticする。（ただこれだけでは、home.htmlの設定が不完全なので、そこを次に修正する。）

Static Files in Django & Angular

• syntax errorを修正する。

• home.htmlの先頭に、{% load staticfile %} を入れる。

• staticファイルを読み込むところは、'{% static" " %}'で囲む。

• src/static/js/app/core/post/post.service.jsのように、ファイル内でstaticファイルを参照にするような箇所も、static以下のルートになるように修正していく。

post.service.js

'use strict';

angular.
    module('post').
        factory('Post', function($resource){
            var url = '/static/json/posts.json' //staticを追加する。
...

Angular Templates in Django Part 2

• angularのtemplatesをurls.pyに紐づけるために以下のようなコードを、blog/urls.pyに差し込む。

...
from ang.views import get_angular_template

urlpatterns = [
...
    url(r'^api/templates/(?P<item>[A-Za-z0-9\_\-\.\/]+)\.html$', get_angular_template),
]
# ここの正規化の部分はよくわからない。。。

• ang/views.pyを以下のように修正する。ここのviews.pyは、多分、angularjsのhtmlファイルを読み込んで、urls.pyと結び付けるためのviewsか。

from django.shortcuts import render



def get_angular_template(request, item=None):
    print(item)
    return render(request, "ang/app/blog-list.html", {})

• この状態で、http://127.0.0.1:8000/api/templates/blog-list.templates.htmlにアクセスすると、blog-list.htmlが表示されるようになる。

• urls.pyの<item>[A-Za-z0-9\_\-\.\/]の部分が、angのhtmlファイルのファイル名に当たる部分だと思われる。

• views.pyをClass Based Viewに修正する。

import os

from django.conf import settings
from django.http import HttpResponse, Http404

from django.views.generic import View

from django.shortcuts import render

class AngularTemplateView(View):
    def get(self, request, item=None, *args, **kwargs):
        template_dir_path = settings.TEMPLATES[0]["DIRS"][0]#settingsの、TEMPLATESリストの最初の要素内の、DIRのリストの最初の要素
        final_path = os.path.join(template_dir_path, "ang", "app", item+".html")#
        try:
            html = open(final_path)
            return HttpResponse(html)
        except:
            raise Http404

• src/static/js/app/内にある、各componentsのtemplateUrlなどを、今回のdjangoのURLに合わせる。

src/static/js/app/blog-detail/blog-detail.component.js など

'use strict';

angular.module('blogDetail').
    component('blogDetail', {
        templateUrl: '/api/templates/blog-detail.html',
...

• tryangularの方にあるtemplatesのhtmlファイルをsrc/templates/ang/appにコピペする。

• app.config.js　の内容を少し修正する。

              when("/about", {
                templateUrl: "/api/templates/about.html"
              }).

• これで、localhostにアクセスすると、angularjsのtemplateが無事表示された！