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
– Gocht, Commented Jun 16, 2015 at 21:38
that will be an angular one, I got it from w3schools.com/angular/tryit.asp?filename=try_ng_default — codyc4321
– codyc4321, Commented Jun 17, 2015 at 12:42

Community · Accepted Answer · 2017-05-23 12:22:23Z

1

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

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jun 16, 2015 at 21:46

Gocht

10.3k3 gold badges48 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

codyc4321 Over a year ago

where should I most likely be putting this myModule.config? Is in the base.htm upper level <script> tags good? Also, what is myModule referring to, the template I end up calling it from maybe?

Collectives™ on Stack Overflow

angular JS installed but not loading, in Django app

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related