- 追加された行はこのように表示されます。
- 削除された行は
このように表示されます。
!!!AngularJS x Django
[AngularJS][Django]
!!テンプレートの共存させたい
*Djangoのテンプレートと、AngularJSのテンプレートを共存させたい
*テンプレートタグの衝突
** {% verbatim %} ~ {% endverbatim % } の間は Djangoテンプレートの展開は無効になる
*crsfトークンの利用
** {% csrf_token %} を設定したうえで、
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>PhraseIt.info</title>
</head>
<body>
{% csrf_token %}
{% verbatim %}
<h1>{{'PhraseIt.info'}}</h1>
{% endverbatim %}
{% if DEBUG %}
<script type="text/javascript" src="{{ STATIC_URL }}js/angularjs/1.3.15/angular.min.js"></script>
{% else %}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
{% endif %}
</body>
</html>
*crsfトークンの利用
** {% csrf_token %} を設定したうえで、DjangoのCSRFトークンを送信するようにconfigで設定する
*https://docs.angularjs.org/api/ng/provider/$httpProvider
*http://django-docs-ja.readthedocs.org/en/latest/ref/contrib/csrf.html
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
}]);