Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Mateo Cuervo
Mateo Cuervo
2,511 Points
Posted by Mateo Cuervo
Mateo Cuervo
2,511 Points

should I avoid jade if I use angular in future projects?

^

1 Answer

Balázs Buri
Balázs Buri
8,799 Points
Balázs Buri
Balázs Buri
8,799 Points

You can absolutely use Jade alongside AngularJS if you prefer Jade's much cleaner syntax. However you have to keep in mind that you'll have to avoid using some of Jade's features in favor of Angular. Examples:

  • repeating: you'll use ng-repeat instead of Jade's similar functionality
  • partials**: you'll use angular's directives which will load their own templates
  • if: you'll use ng-if instead of if in Jade

Basicly you'll use Jade to script static template files with a much cleaner and readable syntax. Then you'll compile those with GulpJS for example and include them as static HTML in your release. This is where Jade's part of the work is over. Your Angular app will load the resulting HTML files and use them as templates. Populate them with dynamic data, hide parts, nest templates into eachother etc.

Remember: A good angular app only downloads an html template once and the reuses it from cache (until the user refreshes the page for some reason). After everything is cached an Angular app should only get json data from the server (and images, videos etc. but not HTML). That's why Jade's dynamic recreation of HTML based on logic loses it's meaning.

**Of course there are exceptions. Imagine you have 3 custom input directives: input, combo, datepicker with their own templates. Each is different but they share a common part: label and error label. Now using angular here to load those from a separate file would be an overkill and a waste of resources. Using Jade you can compile your "_inputheader.jade" into all of those templates!

Hope this helps.