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

概要

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

参考動画

www.codingforentrepreneurs.com

Downloading Try AngularJS1.5

• 以下のgithubのコードをzipファイルでダウンロードする。

GitHub - codingforentrepreneurs/Try-Angular-1.5: Learn AngularJS in this step-by-step series. The goal is to build something real while discussing the technology behind the code.

• 以下のgithubのコードをgit cloneする

GitHub - codingforentrepreneurs/Blog-API-with-Django-Rest-Framework: Blog API with Django Rest Framework

• Try angularのsrcと、config.ruをコピーして、Blog-API-with-Django-Rest-Frameworkの適当なフォルダ(ang_srcなど）を作成して、そこに配置する。

• ここで、rackupというコマンドを打つと、try angularのページが表示されるみたいなんだけど、コマンドがないと言われてしまう。多分これはそこまで重要じゃなさそうだしほっておこう。

Single Page App Template View

• イメージとしては、djangoのurls.pyを使って、angularjsの方のページに紐づけて、そちらを表示させるようにする。

• そのため、以下のように、angularjsの方で、できる箇所はコメントアウトする。

src/blog/urls.py

from django.conf import settings
from django.conf.urls import include, url
from django.conf.urls.static import static
from django.contrib import admin


from rest_framework_jwt.views import obtain_jwt_token

# from accounts.views import (login_view, register_view, logout_view)

urlpatterns = [
    
    url(r'^admin/', admin.site.urls),
    # url(r'^comments/', include("comments.urls", namespace='comments')),
    # 
    # url(r'^register/', register_view, name='register'),
    # url(r'^login/', login_view, name='login'),
    # url(r'^logout/', logout_view, name='logout'),
    # url(r'^', include("posts.urls", namespace='posts')),
    url(r'^api/auth/token/', obtain_jwt_token),
    url(r'^api/users/', include("accounts.api.urls", namespace='users-api')),
    url(r'^api/comments/', include("comments.api.urls", namespace='comments-api')),
    url(r'^api/posts/', include("posts.api.urls", namespace='posts-api')),
    #url(r'^posts/$', "<appname>.views.<function_name>"),
]

• さらに、angularjsのページの表示に必要な、from django.views.generic.base import TemplateViewをimportする。

• さらに、url(r'', TemplateView.as_view(template_name='ang/home.html')),というように、templateを指定する。

• tempaltesの中に、ang/home.htmlという空っぽのファイルを作成する。

• python manage.py runserverをすると空っぽのページが表示されるはず。

• url(r'', TemplateView.as_view(template_name='ang/home.html'))を一番最後に移動させる。

最終的に以下のようなコードになる。

blog/urls.py

from django.conf import settings
from django.conf.urls import include, url
from django.conf.urls.static import static
from django.contrib import admin
from django.views.generic.base import TemplateView
from rest_framework_jwt.views import obtain_jwt_token

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/auth/token/', obtain_jwt_token),
    url(r'^api/users/', include("accounts.api.urls", namespace='users-api')),
    url(r'^api/comments/', include("comments.api.urls", namespace='comments-api')),
    url(r'^api/posts/', include("posts.api.urls", namespace='posts-api')),
]

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

urlpatterns += [
    url(r'', TemplateView.as_view(template_name='ang/home.html')),
    ]