New ionic projects are created using the Ionic command-line interface. In this video, learn the commands needed to create a new project.
- [Instructor] Now that we've installed our dependencies, we're going to use the Ionic CLI to create our project. To start, let's make a new directory to house it. Since we're on Mac OS, we're going to use the terminal command mkdir. I'll call my directory "project." Now let's move into that project, and we'll clear the screen. Next let's use the Ionic CLI. Do ionic, pass it to start command to generate our project files. Let's name our project. I'll call mine feed.
We want it to be a version 2 project, so we'll do --v2, and we want to use the tabs template. Now Ionic allows you to use different templates to generate different base projects. The default is tabs. I'm putting it in explicitly. The other options are blank, which generates a blank project with no navigation or view setup. Or a side menu project, which generates an ionic app with a side menu on the left side. Let's go ahead and hit enter and start our application generator.
Users can also generate their own templates for the ionic command line interface. Now that that's finished, let's clear the screen and take a look at what it's created. We're going to change directory into our project's name. Mine was called feed. Now let's look at what we have in this directory. We'll ls or, on Windows, dir. To start off, we have several configuration files. We're not going to need to interact with those during this course. However, they would be useful to know later on in more advanced topics.
The first directory we come to is called hooks. This directory is used for any code that hooks into Cordova's build process. We're not going to making any of those, but it's still good to know. Let's clear the screen. We have node_modules, and then we have a platforms folder. This folder contains the platform-specific code for Ionic and Cordova. Ours contains only iOS, as that's the platform we're targeting. This folder will not be pre-generated on Windows. So be sure to add the specific platform you want to use.
On Windows, you will only be able to have Android and Windows Phone, as iOS is not available. Clear the screen. Next we'll take a look at the resources directory. This directory will contain our splash screen, icon, and any other platform-specific imagery we need to have. Next we have source, which we will come back to, and www. In our case, currently, www is empty, but that will house our html index file.
In previous versions of ionic, this is where you did your normal development. However, in version 2, it's changed to the source directory. So let's clear the screen and take a look in there. We're going to change directory into source, and then we'll list what's inside. We have an app directory, which contains our angular 2 core component and module type script, along with some scss and html. The next directory that matters to us is going to be the pages directory. Inside of here are the files we will mostly be working with.
This is where each of the app's screens are defined. For example, inside of pages/home, you'll find the code related to the home tab. This is where we're going to create our feed. In this directory, we have a home.ts, for our type script class definition, a home.scss, for our sassy css, and a home.html, for our views html. Let's clear the screen and list the directory one more time. As I mentioned before, www is where the index.html will live.
However, there is also one in this directory. You will also notice there's a service-worker.js file. This is an advanced topic that we will not be getting into. And lastly, we have the theme directory. We can take a look inside of that. We have a variables.scss. For more advanced topics, you can create your own themes that will apply over top of your application, to change its colors and behavior. We won't be getting into this, as it's a more advanced topic. But it's something good to be aware of. Let's clear the screen one more time.
Now let's see what our application looks like. Run ionic serve, and wait for that to build our application. The ionic app scripts we are using here, version 0.0.47, will not work on Windows. Be sure to have at least version 1.0 installed. You can easily do this through npm by running npm install -g ionic. Welcome to Ionic. As you can see, they've pre-generated a homepage, an about page, and a contact page.
In our application, we will be replacing this pre-generated content with our own. For example, this home tab will be replaced with our feed tab. And the other tabs will be replaced with our post tab. Now that we've seen what Ionic has pre-generated for us, let's go ahead and move on with getting our own project built. Let's go back to the terminal. Let's shut down the server and clear the screen. We're going to, again, type ionic serve. This time, we're going to do --lab.
This is going to open a new tab in our browser, and it's going to show us what our application is going to look like on a phone, without having to run a simulator. We can change the different platforms here. So now I have iOS, Android, and Windows Phone all running in the same browser tab, without having to use a single simulator. This is a very useful page for testing and should be used when needed. But enough with all this command line stuff.
Let's go ahead and jump back into creating our project.
- Installing the Ionic CLI
- Creating an Ionic project
- Setting up a Firebase project
- Creating the feed and post page
- Building a data provider
- Integrating AngularFire2
- Replacing a data provider with AngularFire2
- Detecting when your app loses network connection