AngularJS1.5 + Django に挑戦してみる 1 AnguraJSの設定
概要
AngularJS1.5 + Django に挑戦してみる 1 AnguraJSの設定
参考動画
www.codingforentrepreneurs.com
Downloading Try AngularJS1.5
- 以下のgithubのコードをzipファイルでダウンロードする。
- 以下のgithubのコードをgit cloneする
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')), ]