Coding

IONIC 2 FULL APP (1/2) THE BASICS | Ionic 2 + Angular to build a full Mobile Application

  • 00:00:02 welcome to this video welcome to a brand
  • 00:00:04 new topic on this channel
  • 00:00:06 ionic q a framework which allows you to
  • 00:00:08 use your angular 2 knowledge which you
  • 00:00:10 probably use to create web apps to build
  • 00:00:13 native mobile apps with it these are
  • 00:00:16 apps running natively on iOS or Android
  • 00:00:19 devices sounds awesome it is this is
  • 00:00:22 what we're going to build in this first
  • 00:00:23 basic video we're going to enhance this
  • 00:00:26 app in the next video of this mini
  • 00:00:28 series here this app allows us to add a
  • 00:00:32 new place and for example this could be
  • 00:00:35 to spread river and Berlin and then you
  • 00:00:39 can see it here on the front page add it
  • 00:00:42 to this list and with this we could add
  • 00:00:44 another place like let's say the
  • 00:00:46 englischer garten a nice park in munich
  • 00:00:49 now these are places added and watch
  • 00:00:52 this might look like a very simple app
  • 00:00:54 it covers a lot of the key concepts
  • 00:00:56 ionic to offers like how navigation
  • 00:00:59 works how you add components how you
  • 00:01:01 store your data and how you can use
  • 00:01:04 angler asyou to create such a mobile app
  • 00:01:07 now if you want to learn much more about
  • 00:01:10 ionic you right now have a look at my
  • 00:01:12 full over 14 hours 5 star rated course
  • 00:01:15 on udemy which you can get with a huge
  • 00:01:18 discount by following the link in the
  • 00:01:20 video description if you're not
  • 00:01:21 interested in this well just stick
  • 00:01:24 around and we will build this simple app
  • 00:01:26 and enhance it in the next video with
  • 00:01:28 some native device features adding
  • 00:01:30 Google Maps to it and more so let's dive
  • 00:01:33 into this
  • 00:01:36 to get started with our ionic 2
  • 00:01:39 application we're going to build we need
  • 00:01:41 to install the ionic CLI this is a tool
  • 00:01:44 which makes it easy to create new ionic
  • 00:01:46 projects and manage them first now for
  • 00:01:50 this you will need node jf installed on
  • 00:01:52 your machine simply because this seal I
  • 00:01:55 use this notes package manager to manage
  • 00:01:57 the dependencies and all the node.js
  • 00:02:00 itself to spin up a nice little
  • 00:02:01 development server which hosts your app
  • 00:02:04 might sound strange since it's a mobile
  • 00:02:07 app yet but you will see what I mean in
  • 00:02:09 a second so make sure that you have
  • 00:02:11 noches installed and then you should
  • 00:02:14 install globally on your machine with
  • 00:02:17 NPM install – gee you should install
  • 00:02:20 ionic and Cordova now Cordova is the
  • 00:02:24 framework which will handle the web app
  • 00:02:27 to native app compilation step and ionic
  • 00:02:31 as the framework which creates the web
  • 00:02:33 app which gives you a lot of nice
  • 00:02:35 components and features to use which
  • 00:02:37 makes creating a nice looking mobile app
  • 00:02:40 very simple and it will also give you an
  • 00:02:43 easy tool to have all in one workflow
  • 00:02:46 which will compile your app your angular
  • 00:02:48 app to a mobile app first and then to a
  • 00:02:52 native app through Cordova so you don't
  • 00:02:54 have to use Cordova directly now on a
  • 00:02:57 Mac and Linux you probably need to put
  • 00:03:00 sudo in front of this for this to work
  • 00:03:02 on Windows you probably don't and I just
  • 00:03:05 enter my password and now just we'll run
  • 00:03:07 it through and we'll install both
  • 00:03:09 packages globally on my machine now I'll
  • 00:03:11 be back once this finishes and then
  • 00:03:13 we're ready to create our first
  • 00:03:15 application our ionic project the
  • 00:03:19 installation of those textures finishes
  • 00:03:21 for me and as a next step you should
  • 00:03:23 navigate into the folder where you want
  • 00:03:25 to locate your ionic project now I
  • 00:03:28 already am in such a folder make sure
  • 00:03:30 you go there to in the terminal and then
  • 00:03:33 you can simply run ionic start to create
  • 00:03:36 a new ionic project then you specify
  • 00:03:39 your project name and I will name it my
  • 00:03:42 places since this will be the name of
  • 00:03:44 the app we create here then you can also
  • 00:03:47 choose which template to use
  • 00:03:49 I
  • 00:03:49 we'll start with a blank template other
  • 00:03:51 options would be tabs to start with some
  • 00:03:54 tabs at the bottom or side menu to start
  • 00:03:57 with a side menu and then they're
  • 00:04:00 important at – there should be two –
  • 00:04:02 make sure it's anionic – project and not
  • 00:04:04 ionic one now with this you just hit
  • 00:04:07 enter and this will now pull down the
  • 00:04:11 blank template and set up the project
  • 00:04:13 for you well as it says here this may
  • 00:04:16 take a couple of minutes so I'll be back
  • 00:04:18 once this is finished – okay so do the
  • 00:04:21 app setup finish for me here so next I
  • 00:04:23 can navigate in today's newly created
  • 00:04:26 folder and there we can simply run ionic
  • 00:04:28 serve and this will now do something
  • 00:04:31 very interesting it will spin up a
  • 00:04:33 development server or first of all it
  • 00:04:36 will compile our angular q code to a web
  • 00:04:38 app and there is some basic in order to
  • 00:04:40 code with which this blank project ships
  • 00:04:42 with but then it will spin up this
  • 00:04:44 development server and it should
  • 00:04:46 automatically open up a tab in your
  • 00:04:48 browser this su tab it should open if it
  • 00:04:51 doesn't make sure you navigate to local
  • 00:04:53 host a 2100 or whichever hosted mentions
  • 00:04:57 down here manually now here you see your
  • 00:05:00 app and this now certainly sounds
  • 00:05:03 strange because you probably imagine
  • 00:05:06 that you create a native mobile app with
  • 00:05:09 ionic and you kind of do you can now
  • 00:05:12 easily compile this to a mobile app but
  • 00:05:14 right now it only is a web app looking
  • 00:05:17 like a mobile app and behaving like a
  • 00:05:19 mobile app they'll of course some
  • 00:05:21 features like the device camera will not
  • 00:05:24 be available here it is a great mode for
  • 00:05:27 testing your app and actually it is the
  • 00:05:29 only mode I will use here because
  • 00:05:31 compiling it to a native app thereafter
  • 00:05:33 is really simple for development most of
  • 00:05:37 the time this is all you need of course
  • 00:05:39 you will need a real device if you want
  • 00:05:41 to test some built-in features like the
  • 00:05:43 camera now it still looks strange though
  • 00:05:47 having it I could put on the full width
  • 00:05:49 of a screen like this now that's not
  • 00:05:51 really how a mobile app looks like
  • 00:05:53 therefore in Chrome and I recommend
  • 00:05:55 chrome for this you can open up the
  • 00:05:58 developer tools and there if you click
  • 00:06:00 on this button which which looks like a
  • 00:06:02 mobile phone
  • 00:06:03 tablet toggle device toolbar it says if
  • 00:06:06 you click on this you now view this app
  • 00:06:09 like running in a mobile device and this
  • 00:06:12 works with any webpage not just with
  • 00:06:14 ionic you project you cannot shoot your
  • 00:06:17 device here like the iPhone 6
  • 00:06:19 make sure to reload the page if you do
  • 00:06:21 change it though and you will now view
  • 00:06:23 it how it would look like on such a
  • 00:06:26 device and it will also switch to the
  • 00:06:28 right beam so material design for
  • 00:06:31 Android devices and the iOS design for
  • 00:06:33 iPhones and this is pretty awesome and
  • 00:06:36 as I mentioned this is how I will
  • 00:06:38 develop this app testing it in this view
  • 00:06:41 now with this you see we got some
  • 00:06:43 boilerplate code or some text here
  • 00:06:45 basically that's just the starting text
  • 00:06:48 II blank project ships with we will of
  • 00:06:50 course change this to adjust to our
  • 00:06:52 needs and to not work with that anymore
  • 00:06:55 now as I mentioned I want to create an
  • 00:06:59 app of simple app which allows the user
  • 00:07:00 to add some places basically the place
  • 00:07:03 where he currently is at and well store
  • 00:07:06 it in this app does all I want you to do
  • 00:07:08 very simple now for that let's open this
  • 00:07:11 app in an editor and start working on it
  • 00:07:14 I open the app and webstorm the editor
  • 00:07:16 of my choice I still have this process
  • 00:07:20 this ionic search process running here
  • 00:07:22 and you should keep it running because
  • 00:07:23 it will automatically recompile your
  • 00:07:25 code and reload your webpage whenever
  • 00:07:28 you change something so very useful
  • 00:07:30 without this running you won't see your
  • 00:07:32 changes reflected in your app and
  • 00:07:34 actually you won't see that app running
  • 00:07:37 the browser here either
  • 00:07:38 now with that I opened it here and you
  • 00:07:41 see we get a couple of different folders
  • 00:07:43 and files now I won't walk through them
  • 00:07:46 in high detail basically the most
  • 00:07:49 important folder for apps of the source
  • 00:07:51 folder which is where we store our
  • 00:07:53 source code and where we basically write
  • 00:07:56 our app now the other folders node
  • 00:07:58 modules manages our dependencies
  • 00:08:00 platforms management key platforms you
  • 00:08:02 can build the app for and you can add
  • 00:08:04 platforms through the ionic CLI you can
  • 00:08:07 find more information on this in the
  • 00:08:09 official documentation to which you will
  • 00:08:11 find a link in the video description if
  • 00:08:13 you want to do want to dive deeper into
  • 00:08:15 this plugins that is
  • 00:08:16 important if you want to use some
  • 00:08:18 built-in device features resources here
  • 00:08:21 you can store some icons and splash
  • 00:08:23 screens you want to use for your app
  • 00:08:24 when you create it and the www folder
  • 00:08:28 hold your web app so that's in between
  • 00:08:30 step between the source folder which
  • 00:08:32 stores the angular app and the native
  • 00:08:35 mobile app created through Cordova in
  • 00:08:37 the end so again we'll focus on the
  • 00:08:40 source folder here and then there it's
  • 00:08:42 the app folder which contains our main
  • 00:08:45 component the app component which gets
  • 00:08:47 started and then we have this pages
  • 00:08:49 folder here too now the pages folder is
  • 00:08:52 the key folder for an ionic app because
  • 00:08:55 my ionic app basically consists of
  • 00:08:57 multiple pages now what you see here is
  • 00:09:00 a page it's the only page we have thus
  • 00:09:03 far but it is a page and therefore it
  • 00:09:06 makes sense that we find this home
  • 00:09:08 component as you can see if you click
  • 00:09:10 into the typescript file and it has this
  • 00:09:12 decorator so this is what we can see
  • 00:09:14 this home component here in the pages
  • 00:09:16 folder
  • 00:09:16 each ionic page is just the angular
  • 00:09:19 component it's just called page because
  • 00:09:22 logically ionic to this framework
  • 00:09:24 manages a stack of such pages for you I
  • 00:09:27 will come back to this so this is key
  • 00:09:31 component the only component we actually
  • 00:09:33 see right now besides the root component
  • 00:09:35 which is only responsible for starting
  • 00:09:37 up our application and initializing the
  • 00:09:39 ionic to navigation the ionic to
  • 00:09:42 navigation that's something else which
  • 00:09:44 is very important if you have a look at
  • 00:09:46 your app component template you see that
  • 00:09:49 it only has this iron nav element
  • 00:09:51 whether you somehow seem to define some
  • 00:09:54 root page root page refers to the root
  • 00:09:56 page property in our app component here
  • 00:09:59 and in the end it stores a reference to
  • 00:10:01 this home page so this sample seems to
  • 00:10:04 be responsible for loading this home
  • 00:10:06 page at the start and it does it's
  • 00:10:09 important to understand how ionic to
  • 00:10:11 navigation works the ionic tube rain
  • 00:10:15 Burak manages all the navigation for you
  • 00:10:17 and it does so by managing a stack of
  • 00:10:20 pages this means that you have a couple
  • 00:10:23 of different pages in this case only one
  • 00:10:25 but you could have more and you always
  • 00:10:27 view the topmost page
  • 00:10:30 on this stack of pages ioniq you manages
  • 00:10:33 for you and if you change your page you
  • 00:10:36 simply push it on top of this stack so
  • 00:10:39 then this will be the page you view and
  • 00:10:41 of course you can go back by popping off
  • 00:10:43 a page removing it from the top of the
  • 00:10:45 stack and again since you always view
  • 00:10:48 the topmost page this means you will see
  • 00:10:50 the page below it and this management of
  • 00:10:53 the stack of pages is done for you by
  • 00:10:56 ionic you now that is all which happens
  • 00:10:59 here in the app component this stack of
  • 00:11:01 pages gets initialized by implementing
  • 00:11:04 this built in this component here iron
  • 00:11:07 app with which ionic you ships which
  • 00:11:09 initializes the stack of pages therefore
  • 00:11:13 we basically say hey the bottom most
  • 00:11:15 page should be the root page or the page
  • 00:11:18 stored in this root page property which
  • 00:11:20 again is this home page so we pop off
  • 00:11:22 all other pages we have non right now
  • 00:11:25 but if we were to have multiple pages we
  • 00:11:28 could only go fds to the home page which
  • 00:11:31 is our base page or well home page off
  • 00:11:34 yet now enough up there about those
  • 00:11:37 pages let's add some new pages to see
  • 00:11:40 how we can play around with that feature
  • 00:11:42 now I will add new pages through the
  • 00:11:45 ionic CLI and for this I will open up my
  • 00:11:47 terminal in my IDE this is a normal
  • 00:11:49 terminal window and there I can use the
  • 00:11:52 ionic CLI again to create a new page by
  • 00:11:55 using the generate command and want to
  • 00:11:58 generate a page and this page should be
  • 00:12:01 called new place because I want to have
  • 00:12:04 a page where the user is able to add a
  • 00:12:06 new place to his collection of places I
  • 00:12:08 will simply hit enter and this will
  • 00:12:11 store or will create a new folder in the
  • 00:12:14 pages folder
  • 00:12:15 didn't you place folder which in the end
  • 00:12:17 simply will again hold my typescript
  • 00:12:19 file the template and if you wondered
  • 00:12:22 this s CSS files course holds to styling
  • 00:12:25 for this page ionic just happens to use
  • 00:12:29 s CSS but you can write normal CSS code
  • 00:12:33 in there what important note you don't
  • 00:12:36 have to add adhere to your style URL
  • 00:12:39 property in your component decorator yet
  • 00:12:42 like you would have to
  • 00:12:43 normal angular app here it uses a
  • 00:12:47 different system it uses the SPSS
  • 00:12:49 feature of nesting styles or selectors
  • 00:12:53 and it always ships with this base
  • 00:12:55 selector which is the selector of the
  • 00:12:58 page you created like your page new
  • 00:13:00 place it's just a selector of this page
  • 00:13:03 as you can see here and therefore any
  • 00:13:05 Styles you write inside of this outer
  • 00:13:08 selector and this is important a styles
  • 00:13:11 which go in there will automatically be
  • 00:13:13 only applied to this pages template so
  • 00:13:17 it's using a CSS instead of the angular
  • 00:13:20 model of attaching Styles you could use
  • 00:13:23 the angular way of doing it I will stick
  • 00:13:25 to D both in SPSS way now with this new
  • 00:13:29 page added in the template of this page
  • 00:13:32 I will remove this comment at the top
  • 00:13:34 and I will change title to add place
  • 00:13:38 maybe and then there in the content I
  • 00:13:41 will for now simply add a new paragraph
  • 00:13:44 where it say add a place however we will
  • 00:13:46 change this later on now we get a new
  • 00:13:49 page it would be nice to view it now so
  • 00:13:52 let's go back to our home page our home
  • 00:13:54 template and there in the template I
  • 00:13:58 will remove all the content and I will
  • 00:14:00 add a button now this button should say
  • 00:14:04 add a place and I will change this later
  • 00:14:07 too
  • 00:14:08 and when we click this button I want to
  • 00:14:11 load this new page and I actually will
  • 00:14:14 add a click listener for this and say on
  • 00:14:17 load new place or whatever you want to
  • 00:14:21 say and this method now of course needs
  • 00:14:24 to be implemented in the typescript file
  • 00:14:26 of the home page so there I will add
  • 00:14:28 this method and I want to go to this new
  • 00:14:32 place page we just added important make
  • 00:14:35 sure to also add it to your app module
  • 00:14:37 the CLI does not do this automatically
  • 00:14:40 so here we should add the new place page
  • 00:14:43 and also add the import at the top and
  • 00:14:46 add a to entry components now entry
  • 00:14:49 components this might be something you
  • 00:14:50 don't know from your normal angular app
  • 00:14:53 there you really need an tree
  • 00:14:55 because this is an array where you
  • 00:14:58 inform angular about the components
  • 00:15:02 you're about to load normally you don't
  • 00:15:04 need to inform angular because you
  • 00:15:06 either load components by adding them in
  • 00:15:09 another template through their selector
  • 00:15:11 or by loading them through the angular
  • 00:15:13 router now both is not the case here
  • 00:15:17 we're not using the angular router we
  • 00:15:19 don't use it by default in an ionic app
  • 00:15:21 and we're not using this page by
  • 00:15:25 selector instead as you will see in a
  • 00:15:27 second we load it differently through a
  • 00:15:29 concept introduced by the ionic tube
  • 00:15:32 framework therefore angular is not able
  • 00:15:35 to detect that we're about to load it
  • 00:15:36 and obviously single reason why we have
  • 00:15:38 to add it here in the entry components
  • 00:15:40 we inform angular
  • 00:15:42 hey this page is about to be loaded you
  • 00:15:45 won't see it coming but it will happen
  • 00:15:47 back to the it will happen thing how
  • 00:15:51 does it happen back to the home type
  • 00:15:54 script file where we added this method I
  • 00:15:56 just mentioned that we will use a
  • 00:15:59 concept introduced by ionic 2 to load a
  • 00:16:02 new page and this concept uses this
  • 00:16:05 stack of pages now this stack of pages
  • 00:16:08 if managed through a navigation
  • 00:16:11 controller and conveniently it's already
  • 00:16:15 injected here by default by the copy use
  • 00:16:17 this boilerplate this blank template
  • 00:16:20 into our home types books file if it
  • 00:16:23 were not make sure that you add this
  • 00:16:25 injection give it any name you like but
  • 00:16:28 make sure it's of type nav controller
  • 00:16:30 which needs to be imported from ionic
  • 00:16:32 angular now with this injected here what
  • 00:16:36 you can do is you can now access the
  • 00:16:40 snap controller and there you have a
  • 00:16:43 push method remember that I told you
  • 00:16:46 that we have the stack of pages where
  • 00:16:48 you push new pages or pop them off the
  • 00:16:51 stack well here we're on the Porsche new
  • 00:16:54 pages part I push a new page and the
  • 00:16:57 page I wanna push is my new place page
  • 00:17:00 and you simply push a reference to this
  • 00:17:02 page which gets imported here at the top
  • 00:17:05 make sure to add this import with this
  • 00:17:08 and place
  • 00:17:09 we should now see something if we click
  • 00:17:12 this button so save this project keep in
  • 00:17:15 mind we still have this ionic serve
  • 00:17:17 project process running automatically
  • 00:17:19 recompiling our app and therefore we now
  • 00:17:21 see this button if you click the button
  • 00:17:24 we indeed go to the new page to our add
  • 00:17:27 a place page and we also automatically
  • 00:17:31 get this back button which you can press
  • 00:17:34 to go back this is all managed by ionic
  • 00:17:37 you this is this stack of pages concept
  • 00:17:40 of navigation concept ionic 2 introduces
  • 00:17:42 now this button clearly doesn't look
  • 00:17:45 very pretty we can change this by going
  • 00:17:47 back to the home template and in there I
  • 00:17:51 will add the iron button directive which
  • 00:17:53 basically tells ionic you hey treat this
  • 00:17:56 as a button and give it a nice look too
  • 00:17:59 and by simply adding this directive a
  • 00:18:02 just looks now much better now we still
  • 00:18:05 get the same behavior but a nice-looking
  • 00:18:07 button so we get this possibility of
  • 00:18:10 going to the place however having this
  • 00:18:13 button right here it's not super pretty
  • 00:18:16 it would be nice to have a plus I can
  • 00:18:19 here in the menu bar at the top which we
  • 00:18:21 could click and then go to the new place
  • 00:18:23 page and what we are done adding a place
  • 00:18:26 we're taken back to this main page here
  • 00:18:29 and there we see what a list of all our
  • 00:18:32 places for example so well let's work on
  • 00:18:36 this and you add such a plus I will
  • 00:18:40 first of all remove this this but here
  • 00:18:44 in my template like this and go to the
  • 00:18:48 menu bar give it another title like
  • 00:18:50 awesome places maybe and then in the
  • 00:18:54 iron mask for element and I met for is
  • 00:18:57 as all elements starting with I and –
  • 00:19:02 element a component ionic you ships with
  • 00:19:05 now this is responsible for rendering
  • 00:19:07 the navbar which is also the place where
  • 00:19:09 ionic 2 will automatically add the back
  • 00:19:11 button and here we get the iron buttons
  • 00:19:14 element we can add another built-in
  • 00:19:16 component in is buttons we simply add a
  • 00:19:20 button with the iron button direct
  • 00:19:23 and we give this any text you want or in
  • 00:19:27 this case not a text but instead I can
  • 00:19:30 now let's visit the ionic to dogs which
  • 00:19:35 are some great dogs and you should
  • 00:19:37 definitely have a look at them if you're
  • 00:19:39 looking for a specific component because
  • 00:19:41 as you can see if you click on
  • 00:19:43 components there are a lot of components
  • 00:19:45 there also are some built-in icons which
  • 00:19:48 you can find down here under ion icons
  • 00:19:51 and here you can see a list of icons you
  • 00:19:54 can use in any ionic you app like the
  • 00:19:56 add icon which is the I can we need so I
  • 00:20:00 will simply open this and you can also
  • 00:20:02 see how to use it and let me just copy
  • 00:20:05 this code here so we basically use this
  • 00:20:08 built in ion icon component and back in
  • 00:20:11 my button I will add this inside of the
  • 00:20:14 button element so this button will now
  • 00:20:16 hold on icon therefore I will add the
  • 00:20:20 icon only directive to the button which
  • 00:20:23 males will make sure that the styling is
  • 00:20:25 alright now we should have a plus button
  • 00:20:28 and if we have a look at our running app
  • 00:20:30 we need see it here however I want to
  • 00:20:33 have it on the right the nice thing is
  • 00:20:36 with the IL buttons wrapper we can add a
  • 00:20:40 end directive we could also add start
  • 00:20:44 and started and just define where it
  • 00:20:47 should be positioned now end is not
  • 00:20:49 necessarily on the right it depends on
  • 00:20:52 the platform this app is running on for
  • 00:20:54 iOS it will be on the right if you want
  • 00:20:56 to force this to be on the right you
  • 00:20:59 would have to add the right directive
  • 00:21:01 but again
  • 00:21:02 I will stick to the interactive to use
  • 00:21:04 the platform specific definition of
  • 00:21:07 where the end of this menu bar is well
  • 00:21:10 animal days you see it's on the right of
  • 00:21:12 course nothing happens if I click it
  • 00:21:14 because I haven't added the click
  • 00:21:16 listener so let me quickly add this
  • 00:21:18 again by adding well click and then
  • 00:21:21 target the on how did I call it unload
  • 00:21:26 new place method we implemented a while
  • 00:21:29 ago although not here but to the button
  • 00:21:32 this is important add to the bottom of
  • 00:21:34 the icon so a
  • 00:21:36 if this reloads now and we click on this
  • 00:21:39 you see it's working again but now
  • 00:21:41 through the plus icon in our menu bar
  • 00:21:43 this is an important first step and you
  • 00:21:46 already learned a lot about how
  • 00:21:47 navigation works and how you can switch
  • 00:21:50 between pages now let's add a basic a
  • 00:21:54 very simple form which allows the user
  • 00:21:56 to define a new place then store it in a
  • 00:22:00 service for now and display it on the
  • 00:22:02 front page we will improve this later on
  • 00:22:06 now for this I will go to my new place
  • 00:22:09 HTML file and in there I want you render
  • 00:22:13 a form now this means I will add the
  • 00:22:17 form element built in HTML element
  • 00:22:20 remove the action though because I don't
  • 00:22:22 want to send an HTTP request inside of
  • 00:22:26 this form I now want to have my form
  • 00:22:29 fields and I will enhance this but for
  • 00:22:33 now I only want to have a title now
  • 00:22:36 since this is all I want I will add iron
  • 00:22:40 item this is a wrapper which will make
  • 00:22:42 sure that my title looks all right
  • 00:22:45 and I will add iron label where I will
  • 00:22:48 say title and then I will add iron input
  • 00:22:52 again if you want to learn more about
  • 00:22:54 all the available components I want to
  • 00:22:56 choose ships with make sure you have a
  • 00:22:58 look at this components documentation
  • 00:23:00 and they're under inputs for example you
  • 00:23:03 find how to style the inputs differently
  • 00:23:06 which options you have how to implement
  • 00:23:08 different types of inputs and so on now
  • 00:23:12 I will go with a very simple one where I
  • 00:23:14 will simply make this of type text so
  • 00:23:18 like a normal HTML input just well using
  • 00:23:21 this building I and input which acts as
  • 00:23:24 a wrapper you could say and if I now
  • 00:23:26 save this let's have a look at our page
  • 00:23:29 this looks alright I can enter some
  • 00:23:31 information here of course also want to
  • 00:23:34 add a button in this form so below my
  • 00:23:37 iron item here I will quickly add a
  • 00:23:40 normal button with the iron button
  • 00:23:42 directives though and there I will also
  • 00:23:45 add another directive the block
  • 00:23:46 directive which will basically make sure
  • 00:23:49 that the
  • 00:23:49 spans the full width of my view here I
  • 00:23:53 will simply say create or no let's say
  • 00:23:57 add place this button your should also
  • 00:24:00 have a type of submit because it should
  • 00:24:04 in the end submit this form whoops here
  • 00:24:07 so this is now the button allowing me to
  • 00:24:09 submit the form and on this I and input
  • 00:24:13 I will now add a name title because it
  • 00:24:16 holds the title of this place and
  • 00:24:18 ngmodel because I want to use the
  • 00:24:21 template driven approach this is vanilla
  • 00:24:23 angular two you could say has nothing to
  • 00:24:26 do with ionic two I'm using the template
  • 00:24:28 driven approach angular 2 offers me when
  • 00:24:30 it comes to while you're doing my forms
  • 00:24:33 and reading the values in my force so
  • 00:24:37 this now retrieves or allows me to
  • 00:24:40 retrieve the title property the form
  • 00:24:42 object in JavaScript is created
  • 00:24:45 automatically by angular all I have to
  • 00:24:48 do is I have to add the ng submit
  • 00:24:51 listener on my form object also provided
  • 00:24:54 by angular cube and or angular in
  • 00:24:57 general and on this listener I want to
  • 00:25:01 execute the on add place method so since
  • 00:25:06 this is using the data security template
  • 00:25:08 driven approach I also want to pass the
  • 00:25:11 form and I can get access by placing a
  • 00:25:13 local reference on this form element and
  • 00:25:16 then setting this equal to ng form this
  • 00:25:19 will give me access to the form object
  • 00:25:21 created by angular in the background and
  • 00:25:24 I can simply pass form value cutest on
  • 00:25:28 add place method and well as a little
  • 00:25:31 enhancement I'll add the disabled
  • 00:25:33 property binding to my button and
  • 00:25:35 disable the button as long as the form
  • 00:25:39 is not valid so by checking if not full
  • 00:25:41 valid so this will disable the button
  • 00:25:44 and I will add a new required arm
  • 00:25:50 directive here or attribute to design
  • 00:25:54 input queue add this required validator
  • 00:25:56 to my angular form
  • 00:25:58 so with that I'll implement the on add
  • 00:26:00 place method in my component
  • 00:26:03 and there you see our already got a
  • 00:26:05 couple of boiler blades so I will remove
  • 00:26:08 the comment here at the top this was all
  • 00:26:11 added because we use the ionic CLI to
  • 00:26:13 generate this page I will remove this
  • 00:26:16 does hook here this lifecycle hook and
  • 00:26:19 it will also remove the two injected arm
  • 00:26:22 things here features of anionic because
  • 00:26:25 I want you add them manually if I need
  • 00:26:27 them so in on that place I know that I
  • 00:26:30 will get my form value and this value
  • 00:26:33 will be a JavaScript object which will
  • 00:26:36 only hold at idle which is of type
  • 00:26:38 string I know it is because my form has
  • 00:26:40 this title field and no other input so
  • 00:26:44 with this I will get this value object
  • 00:26:47 now I want you add this place I want to
  • 00:26:51 store this place and for this I will
  • 00:26:54 create a service I will create a new
  • 00:26:56 folder in my ionic you project I will
  • 00:26:59 name it services and then there I will
  • 00:27:02 treat a new file which I will simply
  • 00:27:04 name places and now you could name it
  • 00:27:07 place about service of he has to follow
  • 00:27:09 this angular naming convention or you
  • 00:27:12 could argue since a displaced in the
  • 00:27:13 services folder anyway anyways you could
  • 00:27:16 omit the service part here I will leave
  • 00:27:19 it in there so I will simply hit OK and
  • 00:27:21 now in this service I will or in this
  • 00:27:24 file or export a class named not under
  • 00:27:27 recipes places service and there I want
  • 00:27:32 to manage my places now I will add a
  • 00:27:37 places property maybe make this private
  • 00:27:41 private places and now this should hold
  • 00:27:45 an array of places and for now a place
  • 00:27:47 should be a JavaScript object which has
  • 00:27:49 a title of type string and again it's an
  • 00:27:53 array of such places at the beginning
  • 00:27:55 it's an empty array though so this part
  • 00:27:57 here is only the type definition if
  • 00:27:59 you're confused what this means again
  • 00:28:01 I'm just defining the displaces property
  • 00:28:03 should store an array of JavaScript
  • 00:28:06 objects which only have a title which
  • 00:28:07 will be of type string now then I want
  • 00:28:11 you add a method which says add place
  • 00:28:13 where I know it will receive a new place
  • 00:28:16 which again
  • 00:28:17 the title of type string which will
  • 00:28:21 access my places array and push this new
  • 00:28:24 place on it and I will have a get places
  • 00:28:27 method here I simply want to return this
  • 00:28:31 places or maybe return this places slice
  • 00:28:35 like this which will create a copy of
  • 00:28:37 this array make sure that I don't return
  • 00:28:39 a reference to the same place in memory
  • 00:28:41 but a brand new array object so that
  • 00:28:45 this is really a private property
  • 00:28:46 because otherwise you would be able to
  • 00:28:48 well change this places array will
  • 00:28:52 return here and change this places array
  • 00:28:54 in there too we prevent this from
  • 00:28:56 happening by slicing it entirely and
  • 00:28:59 therefore creating a copy so we get this
  • 00:29:01 place of service and app module I should
  • 00:29:05 provide it so that we can access it
  • 00:29:07 application wide so any providers array
  • 00:29:09 I will add my places service reference
  • 00:29:12 and import place of service at the top
  • 00:29:14 here and now with this in place a lot of
  • 00:29:18 places right with this in place I will
  • 00:29:21 go back to my new place type script file
  • 00:29:24 and then check this place of service so
  • 00:29:27 here my places service of type place of
  • 00:29:32 service make sure to add the import
  • 00:29:34 allows me to well be accessed here place
  • 00:29:38 of service and call add place and I will
  • 00:29:41 simply pass value because again a place
  • 00:29:45 right now is only an object of a title
  • 00:29:48 of type string well this is just what
  • 00:29:50 value is so this should allow me to
  • 00:29:52 store it in the places service of course
  • 00:29:56 you also want to view it and let's view
  • 00:29:58 it on our home page now to view it there
  • 00:30:02 too to start simple I'll go to my type
  • 00:30:05 script file inject my places service
  • 00:30:09 there cue place a service make sure to
  • 00:30:13 add the import and what this injected I
  • 00:30:17 now want to get all those places
  • 00:30:21 now retrieving them is not super simple
  • 00:30:24 actually because if I were to retrieve
  • 00:30:27 them in a constructor this would not be
  • 00:30:30 stated whenever we rerender the view now
  • 00:30:34 a better place to fetch our places is
  • 00:30:38 might be ng Odin you could say but
  • 00:30:41 they're still NGO dinh it is only
  • 00:30:43 executed when this component is
  • 00:30:45 initialized however when we go to add a
  • 00:30:48 new place this new place page is pushed
  • 00:30:51 on top of the stack but the old place so
  • 00:30:53 – – the old page D home page it's not
  • 00:30:56 destroyed so it will not be recreated
  • 00:30:59 whenever we return to this page that of
  • 00:31:02 course means that if our place has
  • 00:31:04 changed whilst we have been away on the
  • 00:31:07 add a new place page for example and
  • 00:31:09 then we go back we won't see our new
  • 00:31:11 place being added be reflected in this
  • 00:31:14 home page so this won't work either now
  • 00:31:17 a nice solution would be to use one of
  • 00:31:22 Jana Q's built-in hooks I on view will
  • 00:31:26 enter there are a couple of these hooks
  • 00:31:29 and you can learn more about them in the
  • 00:31:31 official documentation under API and
  • 00:31:34 there if you scroll down to nap
  • 00:31:37 controller you can if you scroll down
  • 00:31:40 there Q learn more about how to use the
  • 00:31:43 controller how to work with the
  • 00:31:45 navigation in general and then how you
  • 00:31:47 can hook into specific events for
  • 00:31:50 example will enter is executed whenever
  • 00:31:53 this page is about to enter no matter if
  • 00:31:56 it was still cached still on the stack
  • 00:31:59 of pages or if it was destroyed and
  • 00:32:01 recreated so I am you will enter sounds
  • 00:32:04 like the perfect place to load our
  • 00:32:07 places that means I will add my own
  • 00:32:10 property here places in the home page
  • 00:32:12 which again is an object which looks
  • 00:32:16 like this and yes you could create an
  • 00:32:18 interface and outsourced there I will
  • 00:32:21 come back to this later now for now this
  • 00:32:25 is my places array and this means that
  • 00:32:29 here in I'm you will enter which is
  • 00:32:31 executed whatever just page enters I can
  • 00:32:34 WIPs set my places here equal to the
  • 00:32:38 places I get from the place of service
  • 00:32:42 with the get places method
  • 00:32:44 this should now ensure that whenever we
  • 00:32:46 view this page we update it now with
  • 00:32:50 that in the home dot HTML file for now I
  • 00:32:53 will create a simple unordered list we
  • 00:32:56 will improve this and I will loop
  • 00:32:58 through all my places with ng4 so let's
  • 00:33:01 place all places and remember this is
  • 00:33:04 just an object with a title property so
  • 00:33:06 I can say price play a place title here
  • 00:33:09 to output the title of each place again
  • 00:33:11 we will improve this visually later now
  • 00:33:15 with this in place of place again let's
  • 00:33:18 save this let's go back to the app and
  • 00:33:21 add a new place test ok nothing happens
  • 00:33:25 because we don't do anything else than
  • 00:33:27 adding it when we click this button but
  • 00:33:29 if we go back we did see it here and if
  • 00:33:32 I add another place the same is the case
  • 00:33:35 so this works now remaining steps for
  • 00:33:39 this videos for this video are I want
  • 00:33:42 you have this list look nicer and I want
  • 00:33:45 you to navigate back automatically when
  • 00:33:47 I click add place well let's start with
  • 00:33:50 navigate back part a new place in this
  • 00:33:53 component here when we add a new place I
  • 00:33:55 want to go back to the home page well I
  • 00:33:58 already told you that you manage your
  • 00:34:00 stack of pages by pushing and popping
  • 00:34:03 now pushing is not what we need here I
  • 00:34:05 don't want to push the home page instead
  • 00:34:08 the home page is below our current page
  • 00:34:10 so to get there we need to pop the
  • 00:34:13 topmost page so for this I will simply
  • 00:34:15 inject my nav controller again give it
  • 00:34:19 any name you like but make sure it's of
  • 00:34:21 type nav controller
  • 00:34:22 and make sure to import nav controller
  • 00:34:25 from ionic angular up there now with
  • 00:34:28 this I can simply use nav controller and
  • 00:34:31 call the pop method to do just that to
  • 00:34:35 pop the current page of the stack and we
  • 00:34:39 should be able to see this every let our
  • 00:34:42 app reload of course all our places will
  • 00:34:44 be lost because you own only store them
  • 00:34:46 in a service for now if I add a new
  • 00:34:49 place we're taken back instantly awesome
  • 00:34:52 now let's improve how this looks how
  • 00:34:54 does list looks and if we have a look at
  • 00:34:56 our document
  • 00:34:57 in the components you see that lists are
  • 00:35:01 such a common thing they have their own
  • 00:35:03 components we can use and I will only
  • 00:35:05 create a basic list but again you can
  • 00:35:08 dive deeper into this documentation here
  • 00:35:10 and learn more about lists so here we
  • 00:35:14 can see how to create such a list item
  • 00:35:16 though this one would hold a clickable
  • 00:35:18 one I don't need that but the theory is
  • 00:35:22 the same in my home template I will
  • 00:35:25 remove the unordered list here this HTML
  • 00:35:28 element instead I will add the iron list
  • 00:35:31 wrapper component shipping with ionic
  • 00:35:34 Cube and I will add I an item in there
  • 00:35:37 now this iron item is what I want to
  • 00:35:40 replicate with the for loop so that
  • 00:35:42 place of places should replicate it and
  • 00:35:44 then in there well I will simply output
  • 00:35:48 place title and again consult the
  • 00:35:51 official documentation to learn how you
  • 00:35:53 can enhance that you can create complex
  • 00:35:55 items with multiple lines and headings
  • 00:35:58 and much more again I will keep keep it
  • 00:36:01 simple have such a list and if we now
  • 00:36:03 return to the app and add like a
  • 00:36:06 favorite place like for example in
  • 00:36:09 Berlin the spray that's a river in
  • 00:36:14 Berlin you see this looks alright now
  • 00:36:17 let's add a favorite place from Munich
  • 00:36:19 which would be the English a garden
  • 00:36:21 English garden a big park there looks
  • 00:36:25 alright we have our places here we have
  • 00:36:27 a nice-looking list we got a basic
  • 00:36:30 application now there are things we can
  • 00:36:32 improve though we're storing the places
  • 00:36:35 in a service which means whenever we
  • 00:36:38 reload the page we restart the app they
  • 00:36:41 will be lost we should use some
  • 00:36:44 persistent storage instead additionally
  • 00:36:47 since we're talking about places
  • 00:36:49 wouldn't it be nice if we had Google
  • 00:36:52 Maps integrated on our app and could
  • 00:36:55 well let's say could get get the place
  • 00:36:58 we're currently at using a native device
  • 00:37:01 feature locating ourselves and then
  • 00:37:03 displaying this place on the app that
  • 00:37:06 would be cool so in order to implement
  • 00:37:09 this feature I will
  • 00:37:12 – – adding third-party packages using
  • 00:37:15 native device features and using native
  • 00:37:17 device storage in the next video on
  • 00:37:19 ionic you hopefully see you there if you
  • 00:37:22 want to learn much more about ionic 2
  • 00:37:25 also consider the course I was
  • 00:37:27 mentioning at the beginning of this
  • 00:37:28 video so see you in the next video bye