Ionic 3 Tutorials

Sobre este curso

in this lesson we’re going to talk about how to get ionic to set up on your machine and we’re going to walk through creating a new ionic to project and then we’re going to talk through some of the

files and folders that are in an ionic to project and what exactly they’re doing and to install ionic – I’d recommend going to this page on the ionic website just follow the

instructions here to get it set up but essentially you’ll just need to install node and run the install command once you’ve finished doing that and everything’s finished installing you’ll

be able to create a new project by using the ionic start command in your command line and we’re going to do that right now to create our to-do application okay so once everything is installed open up

your command prompt or terminal item whatever you prefer to use and we’re going to run the command to generate our project now and to do that we write ionic start and then the name of our

project which we are going to call our neck – to do and then you can also specify a starter template to use but it’s going to use the blank template which is just a standard one-page

nothing a template but there’s others you can use – like a tabs template and a side menu if you prefer and we also need to use the v2 flag to specify that we want to create an ionic 2 project and an

ionic 1 project so hit enter and that will start generating your project okay once that’s finished generating you should see a screen with some messages like this and your project will have

been created now so you can change into that by using the CD command so write CD ionic 2 to do and it’ll take us into the project directory from there we can run ionic serve which will actually display

our application in the browser for us so once iron xserve finishes running you should see you app in the browser now are we going to see that the default blank template that I was talking about

from here if you go into inspect to bring up the debugger we can actually run it through the emulator in the Chrome browser so if you hit this button here that will toggle the emulator on

and off and then we can actually see what it will look like on a device so right now it’s set to a Galaxy s5 which is an Android device so we’re getting the material design Android styling if

we switch that to an iPhone 5 and hit refresh you can see that now we’ve got the iPhone styling instead I was going to set it to the galaxy throughout this tutorial but you can set it to whichever

you prefer now that we can see that application is generated and working we’re going to open up the project in a text editor or IDE whatever you prefer and take a look at the project itself so

I just use sublime but you can use whatever you prefer and this is what our our nectar project looks like when it’s first being created there’s a lot of files and folders here and a lot of them

won’t really matter to you at least not in the beginning we have some folders here that are specific to Cordova and if you’re not aware Cordova is the framework that

wraps uronic to application in a native wrapper and that’s what allows it to be installed onto a phone and also to access native API s but as far as development goes for a lot of it you

won’t really need to worry about any of that so the hooks folder platforms plugins that’s all part of Cordova the node modules folder is all the dependencies

for the project again you’ll never have to touch this folder at all you might install some more dependencies later on down the track but that’s not something you need to worry about right now the

main two folders you need to actually work with here well rather as one folder you really need to work with which is the source and then also the WWE folder which

you’re not going to be editing at all but this is your bulk ionic to application so essentially the way it works is that we will be coding inside of the source folder and we’re going to

be using a typescript rather than JavaScript for the coding because we’re using typescript which is very similar to JavaScript it just adds a few extra features to it but typescript doesn’t

actually run through browsers by default it needs to be transpired into normal JavaScript code so that’s why we have this separate WW folder where basically when we build our application the

transpiler will go through all this typescript code put it together and then it spits out the output here and that’s what actually runs through the browser so you can see there’s an index to HTML

file here so just like any web site you have the index file which will be run through the browser and that’s what will load in all the scripts and styling and so on to actually run the website or in

this case the app but I want to reiterate again that you shouldn’t edit anything inside this www folder when your app is built it will be overwritten so if you make changes in here

next time you do a build they’re all going to disappear instead all of the changes should happen within this source folder and you’ll see that we have an index.html in here as well so if you do

want to make a change to index dot HTML which probably won’t ever be required but make sure you do it inside the source folder and not the index dot HTML file inside the wwm similarly we also

have an assets folder which is used to store things like images or any other kind of static assets maybe JSON files things like that and again to make sure you put them in the source folder and

not the assets folder that’s inside of ww so let’s just go through a few more of the things inside of the source folder here we have the apt module ts file

which is quite important basically this is responsible for importing all of the dependencies for the application basically if you create any pages so right now we just have a home page but

soon we will be adding in a edit to do page as well you have to make sure that those pages are imported here and also that you add them to the declarations array and to the entry components array

you may also want to import other things like providers we will be creating a data provider for example which will handle saving data from our application into storage and then also retrieving

that data from storage so in that case we would again import that file here and then add it to the providers around so essentially pages go here and here and providers go here then we have the app

component ES file and this sets up the route component of the application so an ionic 2 project or angular 2 projects are heavily based on components so essentially component is a chunk of code

that handles some tasks so in our case we will be creating a lot of pages which are components so they’re going to be different screens on our application but they don’t have to be pages they can be

anything so the route component is basically the first component that is loaded in the application and in the case of an ionic 2 project it’s responsible for setting up the root page

so here you can see that we’re importing the home page and then we’re setting it as the root page here so what this will do is take that home page which has been auto-generated for us and make that the

initial page that’s displayed in the application if we wanted to instead say create a login page for our application instead of displaying that home page we would import that login page here and

then set the root page to login page instead usually you won’t really do much inside this file you may sometimes but most of the time it’s just going to be setting

up that initial root page now we have an app dot s CSS file here that’s for creating and any CSS Styles that you want to apply to your entire application and we have a main dot dev D s and a

main dot product ES file these are two files you don’t really need to worry about at all it’s just responsible for bootstrapping the application in production mode it’ll

use the production file in dev mode uses dev but you don’t and really need to edit these at all we have the pages folder which stores all the pages in our application we’ll have a separate folder

for every page that we create so right now we just have the one home page but you’ll notice we have three files for the home page so a component is generally made up of a type script file

which defines the class definition it’s going to import any things we need we’re going to talk more about this a bit later but essentially this is the logic for the component we have the template

file now which is essentially the HTML that’s going to create the view for the component and then we have a scss file which again can be used to apply some styles to that component so when we

create more pages and we will in this example we’re going to create an edit to do page that’s going to show up in its own folder here then we have the theme folder which simply holds this variable

store a CSS file you can use this to change some values in the application you may want to come in here and change the background color for example or any of these colors we can use these primary

secondary danger and so on colors throughout the application and it’s really nice and neat way to tidy up the code a bit rather than having to manually apply styles for these values

each time if this all looks a bit foreign to you might be worth just looking at what asses just very quickly but essentially it allows us to do things in CSS like

create our variables which otherwise you can’t do with CSS so there are probably a few more files which you may end up using that I haven’t discussed just yet but those are the main things you will

need to know right away and if you can sort of grasp what I’ve just talked about there you should be pretty comfortable with moving forward creating your own pages and starting to edit

things just to get us started we’re just going to make a quick change to the home dot HTML file as you can see in the browser here apparently says ionic blank the world is your oyster and so on so we

can make a change here so we’ll change that to to do instead because that’s going to be the title with our application and if we save that ionic actually has library loading so you can

see some stuff happen there so if we go back into the browser its refresh right away so as you’re coding you can make some changes in here so that switch back to the browser and you can see your

changes apply right away