best way to handle templates in angular2.

2,072 views
Skip to first unread message

Vincent zhu

unread,
Dec 31, 2015, 3:28:55 AM12/31/15
to AngularJS
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

unread,
Dec 31, 2015, 8:34:40 PM12/31/15
to AngularJS
Hi Vincent,


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

Wishes,
Manfred

Vincent Zhu

unread,
Jan 1, 2016, 8:09:50 AM1/1/16
to AngularJS
Thanks, It seems these bundling tools are for angular1?

HeavyMery

unread,
Jan 1, 2016, 10:07:00 AM1/1/16
to ang...@googlegroups.com
For Angular 1.X, We can use grunt(or gulp) plugin to embed templates to $templateCache.
e.g. grunt-angular-templatesgulp-angular-embed-templates

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

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

unread,
Jan 1, 2016, 12:04:49 PM1/1/16
to AngularJS
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:


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:


Wishes,
Manfred

Eric Martinez

unread,
Jan 1, 2016, 12:12:30 PM1/1/16
to AngularJS
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

unread,
Jan 1, 2016, 7:18:48 PM1/1/16
to AngularJS
thanks, Manfred, that's very helpful!

Vincent Zhu

unread,
Jan 1, 2016, 7:29:05 PM1/1/16
to AngularJS
good news! thanks, hope the team can streamline the whole process....

Vincent Zhu

unread,
Jan 1, 2016, 7:33:54 PM1/1/16
to AngularJS
yes, right. the gulp-angular-embed-templates does work with angular2. thanks.
Reply all
Reply to author
Forward
0 new messages