「AngularJS x Django」の版間の差分
ナビゲーションに移動
検索に移動
| (同じ利用者による、間の2版が非表示) | |||
| 1行目: | 1行目: | ||
| − | ==AngularJS x Django== | + | ==[[AngularJS x Django]]== |
| − | [[AngularJS]][[Django]] | + | [[AngularJS]] | [[Django]] | |
===テンプレートの共存させたい=== | ===テンプレートの共存させたい=== | ||
| − | * | + | *Djangoのテンプレートと、[[AngularJS]]のテンプレートを共存させたい |
*テンプレートタグの衝突 | *テンプレートタグの衝突 | ||
| − | ** {% verbatim %} ～ {% endverbatim % } の間は | + | ** {% verbatim %} ～ {% endverbatim % } の間は [[Django]]テンプレートの展開は無効になる |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html ng-app> | <html ng-app> | ||
| 20行目: | 20行目: | ||
{% endverbatim %} | {% endverbatim %} | ||
{% if DEBUG %} | {% if DEBUG %} | ||
| − | <script type="text/javascript" src="{{ | + | <script type="text/javascript" src="{{ STATIC_U[[R]]L }}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> | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> | ||
| 27行目: | 27行目: | ||
</html> | </html> | ||
*crsfトークンの利用 | *crsfトークンの利用 | ||
| − | ** {% csrf_token %} | + | ** {% csrf_token %} を設定したうえで、[[Django]]のCSRFトークンを送信するようにconfigで設定する |
| − | *https://docs.angularjs.org/api/ng/ | + | *https://docs.angularjs.org/api/ng/pro[[vi]]der/$httpPro[[vi]]der |
*http://django-docs-ja.readthedocs.org/en/latest/ref/contrib/csrf.html | *http://django-docs-ja.readthedocs.org/en/latest/ref/contrib/csrf.html | ||
app.config(['$httpProvider', function ($httpProvider) { | app.config(['$httpProvider', function ($httpProvider) { | ||
| − | $httpProvider.defaults. | + | $httpProvider.defaults.xsrf[[Header]]Name = 'X-CSRFToken'; |
| − | $httpProvider.defaults. | + | $httpProvider.defaults.xsrf[[Cookie]]Name = 'csrftoken'; |
}]); | }]); | ||
2020年2月16日 (日) 04:22時点における最新版
AngularJS x 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_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';
}]);
© 2006 矢木浩人
