angular JS installed but not loading, in Django app

Question

I have a practice app and Angular JS installed through NPM on my machine at work. I call it in my base.htm which all templates extend:

{% block main_header %}
<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Sitename</title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
        <link href="{% static "screen.css" %}" media="screen, projection" rel="stylesheet" type="text/css" />
        <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script type="text/javascript">
            {% block js %}{% endblock %}
        </script>
    </head>
{% endblock %}

I just tried reinstalling it to be certain, it is installed. At http://www.w3schools.com/angular/tryit.asp?filename=try_ng_default there is an example, and I put it in my django app at business_index.html as so:

{% extends 'base.htm' %}

{% block body_block %}

    ....some code

<div ng-app="">

    <p>Input something in the input box:</p>
    <p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
    <h1>Hello {{name}}</h1>

</div>

{% endblock %}

The some code beforehand isn't the problem, I temporarily deleted it and refreshed. Why is my text not displaying next to hellp like in the example? I must not have configured it well. Thank you

When you call `{{name}}` it is a django variable or angular one? — Gocht, Jun 16 '15 at 21:38
that will be an angular one, I got it from http://www.w3schools.com/angular/tryit.asp?filename=try_ng_default — codyc4321, Jun 17 '15 at 12:42

score 1 · Accepted Answer · edited May 23 '17 at 12:22

If you have never worked with Django + AngularJS before, I will assume that you are trying to use {{ variable }} in your template.

That syntax will try to render a Django variable from the view (passed by context_data).

You will need to change the AngularJS tags:

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

EDIT

Example:

var MyApp = angular.module('MyApp', []);

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

After you do this, when you want to call a variable or angular expression in your template you will use {[{angular_variable}]}, and when you want to call a Django variable you will use {{django_variable}}

Also you can see this answer and the AngularJS documentation for this topic

where should I most likely be putting this myModule.config? Is in the base.htm upper level — codyc4321, Jun 17 '15 at 12:43

angular JS installed but not loading, in Django app

1 Answers1