QuickTip: Django and AngularJS Conflicting Interpolation Symbols
In this post we will give you information about QuickTip: Django and AngularJS Conflicting Interpolation Symbols. Hear we will give you detail about QuickTip: Django and AngularJS Conflicting Interpolation SymbolsAnd how to use it also give you demo for it if it is necessary.
When using the Django framework with the AngularJS MVC framework for building modern single page applications or SPAs, one of the issues you will encouter is related to both frameworks using the same symbols for template tags i.e { { and } }. So in this quick tip post we’ll see how to change the interpolation symbols in AngularJS to avoid these conflicts.
Luckliy for us, AngularJS provides the $interpolateProvider provider which allows developers to customize the interpolation symbols which default to { { and } }.
Used for configuring the interpolation markup. Defaults to .This feature is sometimes used to mix different markup languages, e.g. to wrap an AngularJS template within a Python Jinja template (or any other template language). Mixing templating languages is very dangerous. The embedding template language will not safely escape AngularJS expressions, so any user-controlled values in the template will cause Cross Site Scripting (XSS) security bugs! — https://docs.angularjs.org/api/ng/provider/$interpolateProvider
Simple AngularJS Example
Let’s see a simple example:
Go ahead and create a base template ng-base.html file in your templates folder then add the following content
{ % load staticfiles % }<!DOCTYPE html><htmllang="en"ng-app='demoApp'><head><basehref="/"><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Integrate Angular 1.6.6 with Django</title><script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js'></script><script src='{ % static "js/app.js" % }'></script></head><body><divclass='content'> { % block content % }{ % endblock content % } </div><divng-controller="TestController as ctrl"> {$ ctrl.mymodel $} </div></body></html>Next create js/app.js in your project’s static folder and add the following code to create a new AngularJS app and inject $interpolateProvider in the config function.
'use strict';varapp=angular.module('demoApp',[]);app.config(function($locationProvider,$interpolateProvider){$locationProvider.html5Mode({enabled:true});$interpolateProvider.startSymbol('{$');$interpolateProvider.endSymbol('$}');});app.controller('TestController',function(){this.mymodel="I'm using the custom symbols";});So we have inject the interpolation provider $interpolateProvider then used two methods $interpolateProvider.startSymbol('{$'); and $interpolateProvider.endSymbol('$}'); to change the default sysmbols to custom ones.
Now you can use { { and } } for Django templates and {$ and $} for AngularJS templates.
Hope this code and post will helped you for implement QuickTip: Django and AngularJS Conflicting Interpolation Symbols. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs