Ionic 2 Tutorial
Now that you have Ionic and its dependencies installed, you can build your first app! This section will guide you through the process of starting a new application, adding pages, navigating between those pages, and more. Let’s get started!
Ionic uses TypeScript for its code. If you’re unfamiliar with TypeScript, take a look at this page.
Starting a New Ionic 2 App
Starting a new app is easy! From your command line, run this command:
$ ionic start MyIonic2Project tutorial --v2
startwill tell the CLI create a new app.
MyIonic2Projectwill be the directory name and the app name from your project.
tutorialwill be the starter template for your project.
--v2tells the CLI that you want a 2.0 project.
If the tutorial template isn’t something you want to use, Ionic has a few templates available:
tabs: a simple 3 tab layout
sidemenu: a layout with a swipable menu on the side
blank: a bare starter with a single page
super: starter project with over 14 ready to use page designs
tutorial: a guided starter project
If you don’t specify a template by running
ionic start MyIonic2Project --v2, the tabs template will be used.
Viewing the app in a browser
Now, you can
cd into the folder that was created. To get a quick preview of your app in the browser, use the
$ cd MyIonic2Project/ $ ionic serve
You should see the welcome message shown above if everything was installed successfully.
In the next section, let’s go over the project structure created by the
ionic start command.