Solution for Angular. Js conflicts with Django labels, angular. jsdjango

Solution for Angular. Js conflicts with Django labels, angular. jsdjango

Preface

As we all know, Django and Angular use very similar tag systems. For example, they all use{{ content }}Variable name. Therefore, conflicts may occur when Django and Angular are used together. I found some solutions on the Internet. Now, let's share it with you. Let's take a look.

1. Change the default label of AngularJs

The following code changes Angular's original tag{[{ content }]}.

Modify Angular labels

myModule.config(function($interpolateProvider) { $interpolateProvider.startSymbol('{[{'); $interpolateProvider.endSymbol('}]}');});

This is a simple and intuitive method. The modified code is easier to read. It can be seen at a glance whether the Django label is Angular. The disadvantage is that it is easy to conflict with third-party plug-ins (if third-party plug-ins use commands and other places where tags are used ).

2. Tell Django not to render part of the template

Supported since Django 1.5{% verbatim %}Label (verbatim means literally translated), Django will not render verbatim label Package content:

{% verbatim %} {{if dying}}Still alive.{{/if}}{% endverbatim %}

This label does not support nesting, but you can add a name for the label:

{% verbatim myblock %} Avoid template rendering via the {% verbatim %}{% endverbatim %} block.{% endverbatim myblock %}

In this way, Django will look for the endverbatim of myblock as the end sign, and insert the verbatim tag in the middle, which will be processed as part of the myblock that is not explained.

The advantage of this solution is that it does not increase Code complexity and is supported by Django native, and does not affect Angular. The disadvantage is that many verbatim labels may be used in many places, making the template messy.

3. Use third-party plug-ins

Currently, I know django-angular. This plug-in provides the ability to mix django and angular labels.

While correctly parsing angular labels, you can continue to use tags such as django if.

{% load djng_tags %}{% angularjs ng %}<div{% if ng %} ng-repeat="item in items"{% endif %}> 
The disadvantage of this is that the introduction of plug-ins increases the complexity of the code, and everyone in the team needs to learn this writing method. I personally feel that it is easy to add errors.
I think the second method is more suitable. When writing variables, try to separate the front and back ends. django is responsible for returning static templates and handing data to angular, which is no big problem.
Summary
The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.