Scribd
Upload
51 views6 pages

Ionic 2 Tutorials PDF

Uploaded by

gen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
51 views6 pages

Ionic 2 Tutorials PDF

Uploaded by

gen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Table

of Contents
Introduction 1.1
Getting Started 1.2
App Structure 1.3

1
Introduction

Ionic 2
Ionic 2 is a complete framework to create native like mobile and web apps using web
technologies HTML, CSS or SASS, Javascript or Typescript.

There is also a ionic 1 version of the framework that uses angluar 1.0 but now Angular 2 is
final and having a lots of new features and number of imporvements. see Angular 2
Features.

In this tutorial series we are going to start by bottom to create a ionic 2 app and topics
related to ionic 2 app developement.

Let's get started ! Have a nice coding ! :)

2
Getting Started

Getting Started
To create a new ionic 2 app you need to first install the following in your system.

1. Node JS
2. ionic & cordova from NPM

Download the node js(version greater then 6) from the offical website of node js and install it
in your system. After installation you need to install ionic from the NPM(node package
manager). Install ionic using following command.
npm install -g ionic

You need to also install cordova to use native plugins in your application. Install cordova
using following command.
npm install -g cordova

After this installation you can use ionic 2 cli to create new app. Create new ionic 2 app using
following command.
ionic start NewProject --v2 --ts

This will create new app with tabs template. This will create app with latest version of
ionic 2. At the time of writing this book it is RC 0. ts flag used to create ionic 2 app in
Typescript. v2 flag is used to create ionic 2 app.

This will take some time. Have cup of tea\/coffee (Depends on your internet speed)

This will create new directory NewProject and install required initial plugins and libraries.
There are some templates that you can use to create new app. Like,

ionic start NewTutorial tutorial --v2 --ts

This will create new app with tutorial template.

Now your new app is ready !! You can follow the instructions given by above command. First
thing we need to do is a running your app in browser. To run ionic 2 app in browser type
following command in your ionic 2 repository.

ionic serve

This will open the new browser window and start your newly created application.

Native plugins will not work in browser(ionic serve)

Congratulations, You have created a new ionic 2 app !

3
Getting Started

4
App Structure

App Structure

This is something that you can see in your editor when you are looking the first app. This is
screen shot from vscode editor.

This is directory structure is as per ionic 2 RC 0 version.

Look at the src folder:

Look at the nested folders of src folder:

5
App Structure

When you are doing ionic 2 app development you will mainly write your code under src
directory.

app directory contains the app sepecifc main files. Your application will start from here.
All the configuration will reside here.
assets directory contains the assets for your application
pages directory contains the pages\/screens for your application. Each page directory
will contain the html,scss and ts file.
theme directory contains the theme related files.

You might also like