Djangoroidの奮闘記

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

AngularJS1 + Django REST Frameworkに再挑戦 その1Django & AngularJS Project

概要

AngularJS1 + Django REST Frameworkに再挑戦 その1Django & AngularJS Project

参考動画

Django + AngularJS | Coding For Entrepreneurs

Git & Django Project

  • 以下の動画に従って、django projectをgit cloneする

Git & Django Project | Django + AngularJS | Coding For Entrepreneurs

Downloading Try AngularJS 1.5

  • 以下の動画に従って、angular projectをダウンロードする

Downloading Try AngularJS 1.5 | Django + AngularJS | Coding For Entrepreneurs

Single Page App Template View

  • src/blog/urls.pyの一部をコメントアウトする。viewは、angularJSの方に任せるので, django のviewの部分は削除しておく。
    # 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')),
  • Templateviewをimportして、angular用のhtmlを指定してみる。
...
from django.views.generic.base import TemplateView
...
urlpatterns = [
...
    url(r'', TemplateView.as_view(template_name='ang/home.html')),
]
  • 上記のtemplate view用のsrc/templates/ang/home.htmlを作成する。中身は空でOK。

  • localhost:8000にアクセスすると空白のページが表示される。これでOK。

  • ただし、localhost:8000/admin のようなURLでも空白のページが表示されるようになってしまっている。urls.pyを少し修正する。templateviewは最後に持ってくる。

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')),
]

...
urlpatterns += [
    url(r'', TemplateView.as_view(template_name='ang/home.html')),
]
  • angularが扱うページは、djangoが扱うapiviewなどの後に持ってくる。