Creating a HelloWorld app via CLI

It's quickest to start your app using existing templates. Ionic gives you three standard templates out of the box via the command line:

• Blank: This template has a simple one page with minimal JavaScript code.
• Tabs: This template has multiple pages with routes. A route URL goes to one tab or tabs.
• Sidemenu: This is template with the left and/or right menu and with center content area.

Note

There are two other additional templates: maps and salesforce. But these are very specific to apps using Google Maps or for integration with the Salesforce.com API.

How to do it…

To set up the app with a blank template from Ionic, use this command:

$ ionic start HelloWorld_Blank blank

Note

If you don't have an account in http://ionic.io/, the command line will ask for it. You could either press y or n to continue. It's not required to have an account at this step.

If you replace blank with tabs, it will create a tab template:

$ ionic start HelloWorld_Tabs tabs

Similarly, this command will create an app with a sidemenu:

$ ionic start HelloWorld_Sidemenu sidemenu

The sidemenu template is the most common template as it provides a very nice routing example with different pages in the templates folder under /www.

Additional guidance for the Ionic CLI is available on the GitHub page:

https://github.com/driftyco/ionic-cli

How it works…

This chapter will show you how to quickly start your codebase and visually see the result. More detail about AngularJS and its template structure will be discussed across various chapters in this book. However, the following are the core concepts:

• Controller: Manage variables and models in the scope and trigger others, such as services or states.
• Directive: Where you manipulate the DOM, since the directive is bound to a DOM object.
• Service: Abstraction to manage models or collections of complex logic beside get/set required.
• Filter: Mainly used to process an expression in the template and return some data (that is, rounding number, add currency) by using the format {{ expression | filter }}. For example, {{amount | currency}} will return $100 if the amount variable is 100.

The project folder structure will look like the following:

You will spend most of your time in the /www folder, because that's where your application logic and views will be placed.

By default from the Ionic template, the AngularJS module name is called starter. You will see something like this in app.js, which is the bootstrap file for the entire app:

angular.module('starter', ['ionic', 'ngCordova', 'starter.controllers', 'starter.services', 'starter.directives', 'starter.filters'])

This basically declares starter to be included in ng-app="starter" of index.html. We would always have ionic and ngCordova (as in other examples from this book, although ngCordova is not essential). The other modules are required and listed in the array of string [...] as well. They can be defined in separate files.

Note that if you double click on the index.html file to open in the browser, it will show a blank page. This doesn't mean the app isn't working. The reason is that the AngularJS component of Ionic dynamically loads all the .js files and this behavior requires server access via an HTTP protocol (http://). If you open a file locally, the browser automatically treats it as a file protocol (file://) and therefore AngularJS will not have the ability to load additional .js modules to run the app properly. There are several methods of running the app that will be discussed.