By Gary simon - Jan 18, 2017
Within the last several months, I have been very focused on writing and recording Angular 2 content. Now, I'm excited to start shifting emphasis, at least for a little bit, onto Ionic 2, which compliments Angular much like jelly compliments peanut butter!
Because Ionic 2 is built on top of Angular 2, I would highly advise you to watch (or read) our Angular 2 Fundamentals course. Don't worry, it's free, and it will make your life only about 1,000x easier when you're attempting to learn Ionic.
Some people like watching videos, and others like reading; so we've provided both. Please subscribe to our youtube channel.
Ionic is an open-source SDK framework for building and deploying hybrid mobile apps for Android, iOS and Windows platforms. You can use the standard web technologies that you're already familiar with (HTML, CSS/SASS, JS) to build a single app that's usable across multiple platforms.
Not only that, it can also harness the power of Apache Cordova to add native functionality in a wide variety of manners (such as accessing the phone's camera, GPS, and more).
So, that's what makes it a hybrid mobile app framework. On one hand, it's built with standard web technologies, but on the other, you can hook into native functionality of the target device platform.
At the end, your app is accessible just like any other native app in an app store. Users can find it in the app store, download it, and access it on their phone.
Before you can install Ionic 2, you'll need Nodejs 6 or greater. Visit the installation page, and choose the installer based on your OS.
You will also need to make sure the Node Package Manager (npm) is included with the installation. Don't worry, this is enabled by default on the last screen of the Nodejs installation process.
Once Nodejs is installed with npm, you can proceed to the next step.
Open up your console of choice (on Windows, I use Cmder) and type the following into the console.
$ npm install -g ionic cordova
This command is only needed to run once on your machine as long as you use the -g (global) flag. It installs the Ionic CLI (Command Line Interface) along with Cordova, which is needed to build and deploy your app natively.
Once this is complete, you're now ready to start your first Ionic project.
With your console still open, type the following:
$ ionic start firstProject blank --v2
Let's break down this command:
Once the above command has completed, type:
$ cd firstProject
You're now ready to serve your first Ionic 2 app!
Run the following command inside of the firstProject folder:
$ ionic serve
This command will start a local development server that you can use to preview your app in the browser while developing and testing. It will automatically launch the project in your browser and it will look like this if all goes smooth:
The ionic serve command accepts another of options. To view them all, type ionic -h in the console. Below are the most notable options:
Exit out of ionic serve by hitting control-c and typing y for yes. Then run:
$ ionic serve -l
This will serve the app in lab mode. This will give you a much better idea of what the app will look like on different mobile devices.
Since you're familiar with Angular 2 already, the project structure will look quite familiar. There are some differences, however.
> hooks > node_modules > plugins > resources > src > app app.component.ts app.html app.module.ts app.scss main.ts > assets > pages > theme > www
The bulk of your work is going to occur in the /src folder, which is why I revealed what's inside. As you can see, it's almost identical to your standard Angular 2 project structure.
The only differences here, lies in the fact that we have a pages, assets, and themes folder. Again, nothing especial here; it's just a different organizational structure.
Also, you will note that instead of a CSS file, we have a SASS (scss) file. That's because, by default, sass is used when the Ionic CLI generates a new project. This is a small bonus!
After installation, you can see it's fairly straight forward to create a new project with the Ionic CLI. In the next lesson, we're going to take an in-depth look at Ionic Components.