templating in angular.js - inheritance

Question

as a server-side web framework user (I use Django), I like the way the templates are organized. Page title, css, js, header and footer of the base template are defined as blocks and can be overriden in the child templates.

What is angular's way of doing this?

The content of each page is of course provided by ng-view, other than that, I can't do much. The title tag for example is outside of the view, and I can't change it dynamically.

It would be good to give me an example code of a full-scale project to see how the templates are organized. Most example projects out there are small and don't need inheritance in templates.

Answer 1

Django's templating is really nice, but remember that Angular is primarily intended for building SPAs (single page applications), so it's conceptually different. In a typical Angular project you'll have your server-side framework generate the base template, then routing is handed off to Angular for everything else, and content sections are conditionally included based on routes.

The one piece of similarity you have between Django and Angular templates is the ng-include directive, which lets you suck in bits of reusable html. But there is nothing similar to Django's {{block}} or {{block super}} system.

You could write a custom directive to bring in extra css/javascript rather than using a {{block extrahead}}.

For dynamic title tags, you'll need to make sure your controller element is set above the head element, otherwise it will be out of scope and thus unreachable. We do it like this in the base template:

<title data-ng-bind="title">Oursite</title>

And then in the controller for that URL:

$rootScope.title = 'Dashboard | Oursite';

Other suggested approaches in this thread.