読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

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

概要

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

参考動画

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が無事表示された!