best way to handle templates in angular2.

[Vincent zhu]

I wonder how you guys organize the templates when we don't use inline template in angular2.

Using templateUrl will load the file one by one, which is not good way to go in production, can we embed the templates into one file and load it?

I used to do it in angular1 by $templateCache and $compile.

since we are using angular2 now, what's the way to go?

thanks for any ideas!

[Manfred Steyer]

Hi Vincent,


I've seen bundling-solutions that inline the template in the component by transforming templateUrl to template.

Wishes,

Manfred

[Vincent Zhu]

Thanks, It seems these bundling tools are for angular1?

[HeavyMery]

For Angular 1.X, We can use grunt(or gulp) plugin to embed templates to $templateCache.
e.g. grunt-angular-templates, gulp-angular-embed-templates

It seems that gulp-angular-embed-templates is working for Angular 2.X.

http://stackoverflow.com/questions/29457885/how-do-i-add-js-html-files-to-a-template-in-angular-2-like-templatecache

Also Angular 2.X with TypeScript, we can use Multi-line template strings.

1. template:`
2. <h1>{{title}}</h1>
3. <h2>{{hero.name}} details!</h2>
4. <div><label>id: </label>{{hero.id}}</div>
5. <div><label>name: </label>{{hero.name}}</div>
6. `

https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

2016-01-01 22:09 GMT+09:00 Vincent Zhu <zhu...@gmail.com>:

Thanks, It seems these bundling tools are for angular1?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Manfred Steyer]

Hi Vincent,

I've also seen a bundling solution for angular 2. I think, it was part of some starter-kit for angular 2. Perhaps this is what you are searching for:

https://github.com/ludohenin/gulp-inline-ng2-template

Another solution is to bundle templates into javascript-bundles. In this case, the template is put into a string-variable that can be loaded via require and passed to the template-property. This could be done via webpack. Here you find a starter-kit for angular 2 that shows how to do that:

https://github.com/AngularClass/angular2-webpack-starter

Wishes,

Manfred

[Eric Martinez]

Vincent,

in future releases there will be offline compilation which means the HTML will be part of the JS, or in separated files. You can read this comment.

[Vincent Zhu]

thanks, Manfred, that's very helpful!

[Vincent Zhu]

good news! thanks, hope the team can streamline the whole process....

[Vincent Zhu]

yes, right. the gulp-angular-embed-templates does work with angular2. thanks.