In 3 steps, you can easily setup a single-page application with an AngularJS frontend and backed by the Django Framework:
Setup Django
On your Django’s urls.py
file:
urlpatterns = patterns("",
("^admin/", include(admin.site.urls)),
# Handle all other URLs via AngularJS.
url(r'^.*$', TemplateView.as_view(
template_name="index.html"), name="home"
),
)
Mezzanine
-
[Optional] If you want to integrate AngularJS with the Django’s Mezzanine CMS, make sure Mezzanine’s routes are defined before AngularJS’ catch-all “home” route:
urlpatterns = patterns("", ("^admin/", include(admin.site.urls)), # Mezzanine pages. ("^", include("mezzanine.urls")), # Handle all other URLs via AngularJS. url(r'^.*$', TemplateView.as_view( template_name="index.html"), name="home" ), )
Setup AngularJS
Enable HTML5 Mode in your AngularJS configuration module:
angular.module('app').config(
function ($routeProvider, locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/static/app/views/home.html',
})
.when('/profile/:profileId', {
templateUrl: '/static/app/views/profile.html',
controller: 'ProfileCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
}
);
- This also works with the ui-router.
Setup the HTML
Set the base tag in your main index.html
file:
<!doctype html>
<html class="no-js" ng-app="app">
<head>
<!-- HTML5 Mode. -->
<base href="/">
</head>
<body>
<!-- etc -->
</body>
</html>
These three steps will enable AngularJS to handle your application’s frontend and Django to take care of the backend. Before deploying to production, make sure you have a proper strategy for serving static files in production.