AngularJS et Django

Ce chapitre ne vous expliquera pas ce qu'est AngularJS - voir le lien suivant: Cours AngularJS - ni ce qu'est CoffeeScript - voir le lien suivant : Cours CoffeeScript - mais vous indiquera comment combiner ces technologies avec Django.

Dans l'exemple suivant vous verrez comment éviter le conflit des accolades Django et AngularJS : {{variable}}

Les paramètres indiqués vous permettent d'avoir une base pour travailler avec une base assez souple.

app = angular.module 'app', ['ngRoute', 'ngResource', 'ui.select', 'ngSanitize', 'ui.bootstrap', 'ngFileUpload']

app.config ($routeProvider, $interpolateProvider, $httpProvider, $resourceProvider) ->
   
  $httpProvider.interceptors.push 'httpInterceptor'
  $httpProvider.defaults.headers.common['X-CSRFToken'] = $.cookie('csrftoken')
  $httpProvider.defaults.xsrfCookieName = 'csrftoken';
  $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';

  $interpolateProvider.startSymbol '~{'
  $interpolateProvider.endSymbol '}~'
   
  $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
  $resourceProvider.defaults.stripTrailingSlashes = false
 
  $routeProvider
  .when '/dashboard', templateUrl: '/backoffice/dashboard', controller: 'DashboardController', title : 'Tableau de bord'
  .otherwise redirectTo: '/backoffice'
  return
app.factory 'httpInterceptor', ['$q', '$rootScope', ($q, $rootScope) -> 
  currentRequestsCount = 0
  return {
    request: (config) ->
      currentRequestsCount++
      return config || $q.when(config)
    ,
    response: (response) ->
      return response || $q.when(response)
    ,
    responseError: (response) ->
      return $q.reject response
  }
]

Notre template HTML index:

<!DOCTYPE HTML>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>{% block title %}Mon projet - {% endblock %}</title>
<link rel="stylesheet" type="text/css" href="/static/css.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  </head>
  <body>
  <div id="page" data-ng-view>
  {% block content %}Chargement...{% endblock %}
  </div>
  </body>
  <script src="/static/js.js"></script>
</html>

Créons maintenant notre controlleur AngularJS:

class DashboardController

  @$inject: ['$scope'] 
  @products = []

  constructor: (@scope) ->
    @scope.name = 'Olivier ENGEL'
    @scope.products = @get_products()
    @scope.add_product = @add_product

  get_products: =>
    products = []
    products.push {name: 'iPad 2015', price : 999.99}
    products.push {name: 'iPod 2000', price : 199.99}
    products

  add_product: =>
    @scope.products.push {name:'iMac', price: 1499.99}
    true

app.controller 'DashboardController', DashboardController

Et le template retour ajax:

<p>Bonjour ~{name}~</p>
<p>Les produits sélectionnés:</p>
<ul>
  <li ng-repeat="product in products">~{product.name}~</li>
</ul>
<button ng-click="add_product()">Ajouter un produit</button>

Configurons les urls

urlpatterns = [
    # Views angularjs
    url(r'^erp/$',           login_required(TemplateView.as_view(template_name='backoffice/index.html'))) ,
    url(r'^erp/dashboard$',  login_required(TemplateView.as_view(template_name='backoffice/dashboard.html'))) ,
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)