Ionic adding pages - ionic-framework

I just started using the ionic-framework and I know that with jQueryMobile you need to add the pages inside the same html with a page id and link to it.
But how do multiple pages work with the Ionic Framework?
On this example:
http://codepen.io/ionic/pen/AjgEB
I see that they use
<script id="file.html" type="text/ng-template">
Am I supposed to do it that way?

No. Normally, one adds the pages in separate files.
The above notation is just used for codepens or similar sites, where you can not add additional files into your online code.
You should take a look at an ionic starter app. Create one by writing
ionic start myApp
into your console.

This may be old post, but i created a tool with ability to generate ionic seed apps with all required pages. For ex., if you need a profile page for your app, using this tool, you can specify pages you need and it will generate the app with all necessary files and references in index.html.
Link for the tool:
http://ionic-sarav.rhcloud.com/#/ionicbuilder/home

Related

Friendly URLs in Ionic Framework

Are there friendly URLs in Ionic Framework? I tried to use ion-nav and ion-tabs components and my URL does not change if I navigate to pages
this.nav.push(Page1);
// or
this.nav.setRoot(Page1);
URL is always http://localhost/ (I need http://localhost/page1, http://localhost/page2 etc)
Unfortunately, the short answer is no. There is probably some scripting work-around that might be able to mimic this kind of behavior, but it is not something that is native to the framework.
The Ionic Navcontroller uses html5 to transition between pages like a phone app instead of a desktop web browser.
What I would suggest is this:
Build a debug-only page that has launch buttons to all of the pages that you want to go to directly. Set this as the root page when you enter the app, and add to it as you bring in more pages. (In fact, these debug pages morph into my "secret pages" during development where I hide useful information for future debugging)
This is what my current one looks like:
That's probably the closest to what you want using the native tools. Good Luck!

How to create a base template and use it to wrap other templates in Ionic framework?

I couldn't find anything about this. basically i want to create a base template, with all the head tag and container in body or menu, etc... so that other templates can extend it.
how would i achieve this with Ionic framework?
The way you have phrased your question leads one to think you have not quite understood how Ionic works...
A typical Ionic app has only one index.html file with a <head>. The rest of the .html files are just content templates to be rendered as the content of that page. So you don't need the "base template" you are asking about, that is all taken care of by Ionic, from the index.html.
I would suggest reading and following http://ionicframework.com/docs/guide/starting.html

How to implement typeahead using ionic without bootstrap

I'm new to Ionic and would like to implement a typeahead for displaying the users list without using Bootstrap and would love if provided with an example .
I was looking for something similar for an ionic app I was building. I can provide a few links that you can look at and choose the most appropriate for your case.
https://github.com/sn0opr/ionic-autocomplete
https://github.com/guylabs/ion-autocomplete
http://www.sitepoint.com/creating-a-typeahead-widget-with-angularjs/
The last link is written is great tutorial written in pure angular. The first two links are projects you need to include in your app and then use them as directives to achieve your goal. Cheers!

Multiple layers of zones on a page google tv jquery ui lib

I'm using google tv jquery ui library to build app. I want to build multi page in one html file. I follow example : http://gtv-resources.googlecode.com/svn/trunk/templates/html-01/index.html, but it using 2 html files to switch between app. Please show me example code to manage multi page in one html file, thanks
If you'd like to do multi page web using single html, you could use layers. You should look at examples BuildPhotoPages or BuildVideoPages here:
https://developers.google.com/tv/web/lib/jquery/
Thanks.

Google web toolkits - multiple pages

On the google website there an example of a simple GWT appliatoin, following is a link:
http://code.google.com/webtoolkit/doc/1.6/tutorial/create.html
The above application has a host page:StockWatcher.html
and StockWatcher.java is the entry point.
If I wanted to add more html pages to this application, we keep one single host page and the entry point will add different panels depending on which link the user clicked on? In this case, how to know which link the user clicked on? If I create a navigation panel and each link has a request parameter, then after the user clicks on the link, How to get the request parameter?
Are there any tutorials available online on how to create a fully functional application? The one example google provides is too simple.
Thanks so much in advance
You have two options to have multiple page web application using gwt.
1) Use gwt history feature and listen for the history change. In this approach at the initial page load itself browser downloads all the javascripts(Including the widgets which are not useful in current link). Still this can be avoided by using gwt code splitting.
2) Create multiple modules. In this case you have to create multiple html pages and GWT entry points. For each major functionality create a gwt module and link that with [modulename].html file. In this approach browser downloads only particular feature's javascript. Not all the javascripts.
Based on your application requirement you can pick one of the option. IMHO I would suggesst second option.