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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.