5

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?

jonschlinkert
  • 10,872
  • 4
  • 43
  • 50
mr_fred
  • 61
  • 3
  • Possible duplicate of [How can I change the Handlebars syntax to differentiate from the Angular template syntax?](http://stackoverflow.com/questions/31601499/how-can-i-change-the-handlebars-syntax-to-differentiate-from-the-angular-templat) – Tilt Jul 29 '16 at 09:56

3 Answers3

3

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.

doowb
  • 3,372
  • 1
  • 17
  • 25
1

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.

stephenwil
  • 514
  • 1
  • 5
  • 18
1

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 }}
Tilt
  • 647
  • 1
  • 10
  • 23