Template engine useful if using angular? - angularjs

i am building a single page application using node.js and angular.js.
I wonder if there is any advantage on using a template engine like jade or ejs since angular has the ng-include directive which let you inject html partials inside your main html page, and of course with angular you have two-way data binding. Any thought on this?

It’s good idea to use Jade (or another template engine) for all html pieces in your project even if you’re creating SPA with AngularJS. Jade allows you to generate templates easy and fast. Templates will be neat and easy-to-read.
As for include directive, stick to the following rule in Angular+Jade projects: use Jade’s include for reusing pieces of html when you create static templates, use ng-include for dynamic purposes when partials depend on the App’s state.

Related

AngularJS Routing All Within One HTML page

I am working with a serverless HTML so JavaScript cannot load other html content. I was wondering if there is an example of pulling the template from the DOM so that I can pack all my views into a single HTML file (i.e. without having to use string templates).
Would this work?
I am working with AngularJS 1.7.5 rather than the newer Angular 2.
I need it to work with Outlook/IE.
I was thinking of just getting the .InnerHTML of some base element. Advice, notes, concerns?

html templates in AngularJS modules

Is there a way to include html templates in AngularJS modules without putting them as strings into js code into the templateCache?
The way we've accomplished this is to write our html templates as standalone html files, then use a grunt task to crunch them into strings (handles all the escaping etc) and inject them into the template cache. best of both worlds, as the developers can work on individual HTML files all under source control, but we drastically reduce roundtrips to the server to pull the templates down to the app at runtime. (At the cost of up-front loading)
If you want to include one html in another, you can use ng-include directive of angularjs.
I have used this like below:
<div ng-include src = "'partials/myModule/myHtml.html'"></div>

Angular routing and dynamically loading controllers

We are creating a single page app with Angular routing.
The problem is that the Javascript with the controller(s) need to be referenced.
I want the js file to be downloaded dynamically on demand.
Is it mandatory to use a system like RequireJS ? Is there an alternative ?
AngularJS is just a wrapper over pure JS to make a system that's defined in its documentation (MVC, two-way binding, directive and so on). So, you can download the JS and bind the controller defined in the file to the angular app (ng-app). You don't need to use RequireJS to load the file, rather you can use pure JS to do the work.
Most people use requirejs but you can do it in pure JS.
stackoverflow.com/questions/7718935/load-scripts-asynchronously

Changing pages in AngularJS (under requireJS)

I'm a beginner in AngularJs and I have a simple question: How do I change pages in AngularJS?
Not using router (ng-view) in AngularJS since I need a new html page where there's no common templates. I tried to use "ng-href" but it doesn't work well, since the system works under requireJS and the new html doesnt contain any js or css that I need. (except I force to add them..)
Does anyone has got some idea?
you can achieve with some template engine like "Swig" http://paularmstrong.github.io/swig/ with has a layout template were you base js and css and you can extend it.

Underscore.js template on Java server

I'm building a single page web app when Backbone.js is my MV* framework. It requires Underscore.js so I wan't to use it as my template engine.
I set the template result as the view content to display in it's render function:
this.el.append( compiledTemplate );
I wonder about the right way to implement the template code:
Should it be a JS code that produce an HTML text?
Should it be an HTML file with a script tag to include the JS code?
How can I separate the display from the logic?
How can I write my CSS in a separate file (not in JS file)?
Well... this is what the Underscore template engine is, isn't it? so, no, your template should be HTML with interpolate tags.
Normally it is a DOM element whose content is the template, and, yes, it is used to be a script tag.
Force your self to only use interpolate Model attributes in your templates. You can pass especial pre-calculated attributes if you use any kind of Decorator technique.
There is not any Backbone or Underscore restriction to you not include your external CSS files as usual.

Resources