mr_fred
mr_fred

Reputation: 61

Assemble (static Site generator) With Angular JS

I want to create a site using assemble, yeoman, and angularJS. The plan is that assemble will handle content and AngularJS will handle dynamic content via a REST API. Are the two compatible, is this a good choice of architecture? My concern is with the templating engine Assemble uses (HandleBars) and whether it is compatible with AngularJS as they both seem to use {{}}. I have only started investigating but am struggling to find examples of people using a similar architecture. How do i scaffold with Yeoman?

Upvotes: 5

Views: 2071

Answers (3)

Tilt
Tilt

Reputation: 677

Assemble uses Handlebars (among others) to render templates, so you can use its syntax to escape Angular templates in a .hbs file, this way:

\{{ qty * cost | currency }}

Upvotes: 1

stephenwil
stephenwil

Reputation: 534

I've done similar for a client for a retail site, to create a basis, custom CMS.

Originally I had the idea that all the items for sale (the data i.e model) would be represented via the data files - a mix of .json and yaml. (At least the client could edit the yaml file with some ease as it is sort of human readable).

A later improvement was to allow the client to edit the stock via a webpage - rather than editing the data files directly - Angular was ideal for this to have a webapp that basically allowed editing the data / upload and transform images, etc via a much nicer interface.

Upvotes: 1

doowb
doowb

Reputation: 3372

I'm doing something similar and to handle the issue with the template delimiters I use the angular interpolateProvider to change the delimiters for angular.

var app = angular.module('app', []).config(function ($interpolateProvider) {

    $interpolateProvider.startSymbol('{%');
    $interpolateProvider.endSymbol('%}');

});

I'm not sure if you can configure Yeoman to automatically use the new delimiters when running some of the scaffolds, but I hope this helps separate your templates from the assemble templates.

Upvotes: 3

Related Questions