Start the project
If you toggle to Test, you should see something like this:
Adding Extra Pages
Adding Content to the Pages
Starting to Code
Exporting from Ionic Creator
Getting Visual Studio Ready
Bringing the Ionic Project into Visual Studio
- Within the <head>:
- The meta viewport tag.
- The style for google map container (only if you will need it. If so, I would suggest to move it to your css folder instead anyway)
- Import the references to ionic.css and ionic.bundle.js (you don't have them yet and Visual Studio will warn you. We will fix it later)
- Add a reference to app.js (which does not exist yet)
- From the <script> tag:
- Within the <body>:
- Just copy the <body> itself with all its content. Be careful! You will still need the two references (cordova.js and platformOverrides.js) that Visual Studio created for you within the <body> tag. Make sure you keep them!
- ionic.css (click the download button)
- ionic.bundle.js (comes in the zip from the link above):
- cordova.js (there is nothing to do with this. It will be created by Visual Studio the first time you succesfully compile).
What is the Generated Code
In the <body> tag, the first thing you will notice is the <ion-nav-bar> and the <ion-nav-view>. Remove both leaving the parent <div> empty, as we are going to move some content here.
You will also find 3 <script> tags with an Id and a Type (templates in this case). The Id is the name of the page. Take the content of the first one (<ion-tabs>) and place it within the <div> we just emptied. The <script> that is now empty, can be completely removed.
The <ion-tabs> has 2 <ion-tab>. Each of them has an <ion-content> tag. Replace them with <ion-nav-view name="">. As name, for the first one put "attendees" and for the second one "register".
You have to also add the attribute ui-sref for every ion-tab like this:
<ion-tab title="Attendees" icon="ion-ios7-contact-outline" ui-sref="attendees">
<ion-tab title="Register" icon="ion-ios7-bookmarks" ui-sref="register">
The ui-sref attribute points to a state configured in the AngularUI Router, we will see it in the app.js file.
For the other 2 <script> tags, rename their Id to "attendeespage.html" and "registerpage.html".
Go to the app.js file. It is creating and angular module called "app" with Ionic as a dependency. The next thing you will see is the ".config". Ionic uses AngularUI Router and, as we said, uses the concept of states. Defining states is the next thing you find. You probably already noticed that the tamplates URLs are not correct because we changed them in the index.html file. Let's remove the one that belongs to the tabs (as it is not a template anymore, but our main view container) and change the other two accordingly to "attendeespage.html" and "registerpage.html".
Let's do a short explanation here on states:
- they have a name (the first string after the opening parenthesis). Remember the state we are pointing to with the ui-sref attribute?
- they have a URL. It helps us to create the nested navigation if needed (and even indicate that parameters will be passed). In this case, we don't have that scenario, so we forget about it.
- the templateUrl is the Id given to the template we want to use to represent the state graphycally.
The URLs will remain as they are (as we gave them the name already in Ionic Creator).
The last change is the "templateUrl". The "attendees" state would completely look as follows:
If you remember, we said in one ion-tab that it would contain an ion-nav-view named "attendees", as the view we just defined for the "attendees" state. And we are saying that the template we will use for displaying that view is the content of the script with Id "attendeespage.html".
About Nereo Lopez
Hi, this is Nereo. I've spent my first professional years as .Net Software Engineer, and then moved more into Agile Methodologies. Anyway, I keep playing with all the new technologies that appear, and specially love Hybrid Apps!