Джанго и AngularJS довольно смешались

Я пытаюсь сделать несколько диаграмм с AngularJS. я использую django а также djng смешать django и angular вместе. Я использовал это, потому что я думал, что это было очень удобно для проверки формы. Здесь я немного застрял.

Я думаю, что angularJS часть работает ( http://plnkr.co/edit/oOBYkkPhG6PWpkkxITKK?p=preview)

urls.py

from django.conf.urls import url
from . import views
from django.contrib.auth import views as auth_views

urlpatterns = [
    url(r'^connexion/$', views.connexion, name='connect'),
    url(r'^logout/$', views.deconnexion, name='deconnect'),
    url(r'^plot/$', views.plot, name='plot'),
]

view.py

def plot(request):
    return render(request, 'data/plot.html', locals())

plot.html

{% load static djng_tags %}
{% load bootstrap3 staticfiles%}
{% load bootstrap3 %}

<html lang="en" ng-app="plunker">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>



    <link rel="stylesheet" href='{% static "data/css/angular-chart.css" %}'>
    <link rel="stylesheet" href='{% static "djng/css/styles.css" %}' rel="stylesheet" />
    <link rel="stylesheet" href='{% static "djng/css/bootstrap3.css" %}' rel="stylesheet" />
    <link rel="stylesheet" href='{% static "data/css/data.css" %}'>


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/{% block angular_version %}1.3.20{% endblock %}/angular.min.js" type="text/javascript"></script>

     <script src="{% static 'djng/js/django-angular.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'data/js/chart.js'%}"></script>
    <script src="{% static 'data/js/plot.js'%}"></script>
    <script src="{% static 'data/js/angular-chart.js'%}"></script>
    <script type="text/javascript">
    </script>
  <body ng-controller="LineCtrl">
    <div class="container">
    <p>Hello {{data}}!</p>
        <p>Hello {{series}}!</p>

    <p>Hello {{labels}}!</p>


<canvas id="line" class="chart chart-line" chart-data="data"
  chart-labels="labels" chart-legend="true" chart-series="series"
  chart-click="onClick" >
</canvas> 


  </body>
</html>

plot.js

var app=angular.module("plunker", ["chart.js"]);
app.controller("LineCtrl", function ($scope) {

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };
});

chart.js и angular-chart.js находятся в папке my data/static/data/js или css. Они были загружены с официального github.

Я не знаю, что я делаю не так. Кажется, что даже область не может быть прочитана как .labels а также .series не доставай мне ничего Интересно, это как-то связано со злоупотреблением мной? djng

Источник

0 ответов

Другие вопросы по тегам