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)
