Set Up Your Project
You have a few options for creating applications with Ionic. You can start with a blank Cordova template in Visual Studio and then add Ionic into your project as you would any other JavaScript library. You then hand-code your UI and JavaScript from scratch following the examples they set forth in their documentation. This is not a bad route to follow if you are building a custom application from the ground up.
Alternatively, you can start with an Ionic sample project. Ionic ships with three project templates for Cordova: blank, tabs based, and side menu. Blank is similar to the Visual Studio blank project (with Ionic installed). Tabs provides a tab-based user interface with a header and buttons at the bottom of the application. The header and button toolbar are fixed at the top and bottom of the application, but the content area will scroll (like a web page). Side menu uses a foldout menu pattern for navigation. You can start with one of these project templates and customize it to your needs. Each template is already set up to work and illustrate how to use common features. Or you can simply create your own user interface paradigm from scratch.
For our example, we are going to start with the tabs project template. However, this template is designed to work with the Ionic Cordova tools (and not necessarily the Visual Studio blank template). We can fix this. The following walks you through creating the Ionic tabs template and then stealing what you need for the Visual Studio default template to work as a tabs project template.
1. Start by launching a command prompt on your Windows machine. Remember, Node.js, NPM, Bower, and more all ship with Visual Studio 2015. We can use these tools to install Ionic and create a project based on their templates.
2. Inside the command prompt, type the following to do a global install of Ionic on your machine.
npm install – g ionic
3. Next, create a new project based on the tabs Ionic template.
Make sure you first use the command prompt to navigate to a folder where you want the application created. Then type the following to create a new Cordova tabs project with Ionic.
ionic start yourAppName tabs
4. Launch Visual Studio and create a new Cordova project based on JavaScript (using the blank template).
5. We now walk through a series of steps to align the Ionic template structure to structure defined in Visual Studio. Start by first creating a folder called lib in the www/scripts directory.
6. In File Explorer, navigate to the Ionic generated tabs project created earlier. Copy the ionic folder from www/lib/ to the new www/scripts/lib directory just created. This folder includes Ionic and Angular.
If you use the file system to copy and paste, be sure to use the Solution Explorer toolbar to show all files, find the ionic folder, right-click, and choose Include in Project.
7. Copy the application code (written for AngularJS) from the Ionic tabs template project directory www/js. Paste these three files (app.js, controller.js, and services.js) into the root of the www/scripts directory of your project.
You can delete the index.js file in the scripts directory. This sample will rely on AngularJS, so this file is not needed.
8. The Ionic template uses the AngularJS routing system for page navigation. This navigation is based on page templates (more on this to come). From the Ionic generated project, copy the www/templates folder and paste it into the www folder of the Cordova app.
9. The Ionic template includes a working shell for the application inside the file index.html. This file loads all of Ionic, the CSS, AngularJS, and more. Copy this page from the www folder in the Ionic template and overwrite www/index.html inside the Visual Studio Cordova sample.
10. Finally, open the newly pasted index.html file in Visual Studio. There are a number of references here you now have to edit to point to the new directory structure in Visual Studio. Figure 25.15 shows the modifications. (Modified lines are highlighted with the bookmark icon.) You can also see Solution Explorer, which includes the new directories and files for the project.
FIGURE 25.15 Edit index.html from the Ionic template to point to the items now in the new directory structure inside Visual Studio.
You can now run the application to see the results. Figure 25.16 shows the default Ionic tabs template being run from Visual Studio. We will now make use of this default template as we rebuild the sample application.
Ionic Visual Studio Templates
The code download for this book includes the three Ionic templates (blank, tab, and sidemenu) in both their default state (as generate by Ionic using the command-line) and as Visual Studio projects. We converted each template to its own Visual Studio 2015 Cordova project, including a shim for working with Ionic and Windows Phone/Store. (See “Running on Windows Phone” later in this section.)