「AngularJS x Django」の版間の差分
ナビゲーションに移動
検索に移動
(ページの作成:「==AngularJS x Django== [AngularJS][Django] ===テンプレートの共存させたい=== *Djangoのテンプレートと、AngularJSのテンプレートを共存さ…」) |
|||
| 1行目: | 1行目: | ||
==AngularJS x Django== | ==AngularJS x Django== | ||
| − | [AngularJS][Django] | + | [[AngularJS][Django]] |
===テンプレートの共存させたい=== | ===テンプレートの共存させたい=== | ||
| 6行目: | 6行目: | ||
*テンプレートタグの衝突 | *テンプレートタグの衝突 | ||
** {% verbatim %} ～ {% endverbatim % } の間は Djangoテンプレートの展開は無効になる | ** {% verbatim %} ～ {% endverbatim % } の間は Djangoテンプレートの展開は無効になる | ||
| − | + | <!DOCTYPE html> | |
| − | + | <html ng-app> | |
| − | + | <head> | |
| − | + | <meta charset="UTF-8"> | |
| − | + | <title>PhraseIt.info</title> | |
| − | + | </head> | |
| − | + | <body> | |
{% csrf_token %} | {% csrf_token %} | ||
{% verbatim %} | {% verbatim %} | ||
| − | + | <h1>{{'PhraseIt.info'}}</h1> | |
{% endverbatim %} | {% endverbatim %} | ||
{% if DEBUG %} | {% if DEBUG %} | ||
| − | + | <script type="text/javascript" src="{{ STATIC_URL }}js/angularjs/1.3.15/angular.min.js"></script> | |
{% else %} | {% else %} | ||
| − | + | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> | |
{% endif %} | {% endif %} | ||
| − | + | </body> | |
| − | + | </html> | |
*crsfトークンの利用 | *crsfトークンの利用 | ||
** {% csrf_token %} を設定したうえで、DjangoのCSRFトークンを送信するようにconfigで設定する | ** {% csrf_token %} を設定したうえで、DjangoのCSRFトークンを送信するようにconfigで設定する | ||
2020年2月15日 (土) 08:00時点における版
AngularJS x Django
[[AngularJS][Django]]
テンプレートの共存させたい
- Djangoのテンプレートと、AngularJSのテンプレートを共存させたい
- テンプレートタグの衝突
- {% verbatim %} ～ {% endverbatim % } の間は Djangoテンプレートの展開は無効になる
<!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 URLjs/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';
}]);
© 2006 矢木浩人
