Using ng-template


#1

Why all examples use ng-template with ion-nav-bar instead of putting the code in separate files?

Pages are loaded by the URLs given. One simple way to create templates in Angular is to put them directly into your HTML file and use the syntax.

Example


#2

My guess would be for the sake of simplicity.


#3

You do not need to request the little template file from the filesystem!

But if i only need a template or a ionic modal only one time -> i use the ng-template approach.
If i can reuse it, i am using different template files.

Greetz, bengtler.


#4

Other reason it’s because with the ng-template and UI Router you can update just small parts of your page like small components without refreshing all the page. And other reason it’s that with ng-template will be “cached”, it’s faster to load.


#5

@matheusrocha89
yeah but you can also use templates in different files to build up your views and update only the sub-views.
I thought templates included via states and ng-include get also cached.


#6

I don’t know if they will be cached if they are in different files…I think it is too :slight_smile: If it is this is great cause you can organize better your code.


#7

@matheusrocha89 @bengtler Thank you for your answers :smile:


#8

You’re welcome. The community is here to help and learn with each one.


#9

I’m pretty new at Ionic and beginner with ui-router so forgive my n00bish questions.

I just found out about this way of organising the app and find the template caching to be a great thing. However, I usually like to split common pieces of markup in separate files because having a huge .js full of Html (wow, that was new :P) may be difficult to read/navigate.

I would like to have my header, menus and other pieces of code each in its separate file on a well organised folder structure but can’t see anywhere on the web any best practices with this approach. Eg: I make plenty of use of directives in angular and this again seems avoided in Ionic although it may be a good idea (like having a directive for the ToDo items in the ng-repeat from the samples, etc)

Any recommandations on this approach? Any samples that may use this splitting with Ionic?