気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM、VOCALOIDについてのんびり書きます。

【Django】AngularJSを使う

AngularJS

AngularJS — Superheroic JavaScript MVW Framework

Djangoの設定

  • フォルダ構成はひとまず以下のとおり(ほぼstartproject実行直後の状態)
.(BASE_DIR)
`-- project
    |-- projectname
    |   |-- settings.py
        |-- urls.py
    |-- appname
    |-- templates
    |   |-- index.html
    |
    |-- static(STATICFILES_DIR)
    |   |-- js
    |       |-- angular.min.js
    |   
  • settings.pyに静的ファイルの場所を追記
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)
  • static/js配下に、angularのjsファイルを配置

  • urls.pyに追記

# 4行目付近
from django.views.generic import TemplateView

# 14行目付近:urlパターンの追記
   url('^index$', TemplateView.as_view(template_name='index.html')),

  • templates配下に、index.htmlを作成
    • angularJSとDjangoテンプレートの変数形式が同じであるためverbatimで囲む
    • verbatim・・・英語の意味としては「言葉どおり、そのまま」等。
{% load staticfiles %}
<!DOCTYPE html>
<html ng-app>
<head lang="ja">
    <meta charset="utf-8">
    <title>test</title>
    <script src="{% static 'js/angular.min.js' %}"></script>
</head>
<body>
    <input type="text" ng-model="yourName">
    {% verbatim %} {{ yourName }} {% endverbatim %}
</body>
</html>
python manage.py makemigrations

python manage.py migrate

python manage.py createsupseruser

python manage.py runserver

# http://localhost:8000/index にアクセス

2015/05/28 19:58追記
angular.min.jsのロード部分で、jsディレクトリの指定がなかったことに気づいたので追記