I love AngularJs MVC, but I hate writing HTML markup code. Lately I have been using Jade to minimize the amount of markup in my static pages. The question arises: can AngularJs be used easily inside Jade templates?
I am using a Nodejs-based Express server to power next-update-stats app. It is simple server keeping anonymous package version upgrade success information. It is meant to work with next-update to quickly check if updating a dependency to latest version breaks your package. The next-update-stats is a simple server keeping results and serving as a home page for the project. I wanted to add interactive search and data visualization to the home page. For example, a visitor could enter package name lodash to see if upgrading from 1.0.0 to 2.0.0 is usually successful or not.
Site index template
The main page is generated from layout.jade, I added a script tag to load the latest stable version of Angular from CDN and my specific script locally. The HTML element gets ng-app attribute to bootstrap the AngularJs application.
Then I added Express development setting to prettify the rendered HTML, otherwise it was hard to debug the generated page in the browser, see app.js
app.set('view engine', 'jade');
I also added search field and button to a div controlled by the application, see index.jade
The code worked right away, there were no issues with double quotes or Jade trying
to process handlebar variables, like
I will investigate using Jade templates as the primary AngularJs templates in the future posts.