- 00:00:04 welcome to this course
- 00:00:05 i'm super excited to have you on board
- 00:00:08 in this course we're going to dive into
- 00:00:10 ionic
- 00:00:10 with angular as you will learn ionic is
- 00:00:13 an amazing framework
- 00:00:15 that helps you build mobile apps with
- 00:00:18 web technologies
- 00:00:19 and indeed in this course we'll learn it
- 00:00:21 from scratch you will learn all about
- 00:00:23 aeonic it's many components it offers
- 00:00:25 its building blocks it offers and we
- 00:00:27 will build real mobile apps that we
- 00:00:29 deploy to the apple app store and the
- 00:00:31 google play store at the end of this
- 00:00:33 course
- 00:00:34 but even better than that ionic allows
- 00:00:36 you to build
- 00:00:37 cross-platform applications which means
- 00:00:39 you have one code base
- 00:00:41 and you get mobile apps out of it as
- 00:00:43 well as a regular web app and that's
- 00:00:46 also what we'll cover in this course now
- 00:00:48 as i already mentioned
- 00:00:49 this course is about ionic and angular
- 00:00:52 angular being an amazing front-end
- 00:00:54 framework that makes building such apps
- 00:00:56 even easier
- 00:00:58 therefore in this course you get both
- 00:00:59 and you just need the angular basics you
- 00:01:01 don't need to know anything about ionic
- 00:01:03 and there even is an angular refresher
- 00:01:05 in this course
- 00:01:06 in case it's been some time since you
- 00:01:08 last worked with angular
- 00:01:09 i also strongly believe that you'll
- 00:01:11 learn way more
- 00:01:13 when you're building something practical
- 00:01:15 and that means that in this course we'll
- 00:01:16 build an entire course project
- 00:01:18 we'll plan it and then build it step by
- 00:01:20 step adding features like navigation
- 00:01:24 user interaction fetching user inputs
- 00:01:26 showing modals and alerts
- 00:01:28 adding authentication sending http
- 00:01:30 requests to the backend
- 00:01:32 using the device camera adding google
- 00:01:34 maps and so
- 00:01:35 much more now this is what's in the
- 00:01:38 course
- 00:01:38 who am i my name is maximilian
- 00:01:41 schwarzmuller and i'm a freelance web
- 00:01:43 developer
- 00:01:43 and five star rated instructor here on
- 00:01:45 udemy
- 00:01:46 i got many courses on web development
- 00:01:49 including the biggest and best selling
- 00:01:51 course on angular
- 00:01:53 i also created an ionic course in the
- 00:01:55 past discourse actually
- 00:01:57 but i did re-record it entirely when
- 00:02:00 ionic 4 was released
- 00:02:02 because that marked a breaking and
- 00:02:04 important change in the ionic history
- 00:02:06 as you will also learn in this course so
- 00:02:08 this course is fully up to date and it
- 00:02:10 uses the latest technologies and the
- 00:02:11 latest best practices
- 00:02:13 to allow you to build cross-platform
- 00:02:15 applications
- 00:02:16 with web technologies with ionic and
- 00:02:19 with angular
- 00:02:20 and with that let's dive right in and
- 00:02:23 let's learn
- 00:02:23 what exactly ionic is and how it works
- 00:02:30 so what is ionic in the past this would
- 00:02:34 have been a bit easier to answer
- 00:02:36 because ionic evolved quite a bit across
- 00:02:39 the last
- 00:02:40 years and i'll come back to a brief
- 00:02:42 history and future outlook
- 00:02:44 later in this module so assuming that
- 00:02:48 you don't know
- 00:02:48 anything about ionic which is fine this
- 00:02:51 course is for you
- 00:02:52 just as it is for people who know a
- 00:02:54 little bit about ionic or have worked
- 00:02:56 with
- 00:02:57 older versions of ionic ionic in the end
- 00:03:00 is all about having one code base
- 00:03:04 which is the code base for a web app and
- 00:03:06 therefore uses
- 00:03:07 html javascript and css so what you
- 00:03:09 would use to build
- 00:03:11 normal user interfaces in the web
- 00:03:14 and you use these tools and these
- 00:03:16 techniques and these languages which you
- 00:03:18 already know and take some magic to
- 00:03:21 which i will come back
- 00:03:22 in the next few seconds edit by ionic
- 00:03:26 to generate web apps progressive web
- 00:03:29 apps and i'll come back to what this is
- 00:03:30 in a second too
- 00:03:31 ios and android apps and if you want
- 00:03:33 even electron desktops
- 00:03:35 electron is a certain technology that
- 00:03:38 allows you to wrap a web app
- 00:03:40 into a desktop app so to say so you can
- 00:03:43 build
- 00:03:44 an app for different platforms with one
- 00:03:47 and the same code base
- 00:03:48 with minor adjustments as you will learn
- 00:03:50 in this course but really minor
- 00:03:52 adjustments
- 00:03:52 not big ones and that of course is a big
- 00:03:55 selling point
- 00:03:56 you can use your existing knowledge and
- 00:03:59 get different
- 00:04:00 apps which allows you to distribute your
- 00:04:02 app on different channels
- 00:04:04 now regarding that progressive web app
- 00:04:06 part a progressive web app in the end is
- 00:04:08 a normal web app that looks and feels a
- 00:04:11 bit like a native
- 00:04:12 mobile app it isn't a native mobile app
- 00:04:14 you don't distribute it through the app
- 00:04:16 stores
- 00:04:17 it's still a website which you can find
- 00:04:19 via google and so on
- 00:04:20 but it's optimized to be reliable which
- 00:04:23 means it even works
- 00:04:24 offline or parts of it work offline it
- 00:04:28 should be
- 00:04:28 fast and give the user instant feedback
- 00:04:31 upon actions
- 00:04:32 and you also want to have an engaging
- 00:04:34 app which is able to tap into some
- 00:04:36 native device features
- 00:04:38 like using the location of the user or
- 00:04:41 the camera
- 00:04:42 and with ionic you can build such a
- 00:04:44 progressive web app you can also build a
- 00:04:47 normal web app which
- 00:04:48 isn't particularly fast or which doesn't
- 00:04:51 tap into native device features
- 00:04:53 and you can also though get a real
- 00:04:56 native app out of it so that you can
- 00:04:58 really
- 00:04:58 target the broadest range of channels
- 00:05:02 possible now let's dive a bit deeper
- 00:05:05 into the ionic platform then
- 00:05:07 because it's nice that we know that with
- 00:05:09 ionic we can build such
- 00:05:10 cross-platform apps but what does this
- 00:05:13 mean what really
- 00:05:14 is ionic how does it do that what's this
- 00:05:16 magic ingredient
- 00:05:17 it adds the ionic platform
- 00:05:21 as we should call it is all about ionic
- 00:05:24 which in its core
- 00:05:26 is a set of web components now web
- 00:05:29 components on the other end are a
- 00:05:30 technique a technology supported by
- 00:05:33 modern browsers
- 00:05:34 which allows you to basically build your
- 00:05:36 own html
- 00:05:37 elements that behind the scenes have
- 00:05:40 more complex logic
- 00:05:41 something like a tabs component let's
- 00:05:43 say where the user can toggle between
- 00:05:45 different tabs
- 00:05:46 in the past you could build something
- 00:05:47 like this on your own by writing your
- 00:05:49 own html
- 00:05:50 adding your own css and adding your own
- 00:05:52 javascript logic
- 00:05:53 ionic gives you such a functionality
- 00:05:55 packaged up in a finished
- 00:05:57 ready-to-use web component and it has
- 00:05:59 lots of web components you can use
- 00:06:02 that is the core of ionic this suit of
- 00:06:05 nicely styled platform agnostic
- 00:06:09 and automatically adjusting so that you
- 00:06:11 automatically have to look off the
- 00:06:13 platform you're running on
- 00:06:15 web components which you can dump into
- 00:06:17 your web project
- 00:06:19 so these custom html elements could be
- 00:06:21 built by you
- 00:06:22 but with ionic you don't have to you get
- 00:06:24 a finished suit
- 00:06:25 of such web components now these web
- 00:06:28 components therefore are what you can
- 00:06:30 see on the screen
- 00:06:31 but ionic and the ionic ecosystem is
- 00:06:34 more than just that
- 00:06:35 because ionic is not just a suit of
- 00:06:37 components ionic is
- 00:06:39 also the name of the company who
- 00:06:41 developed or which developed these
- 00:06:43 components and this company has more
- 00:06:46 than just this component suit
- 00:06:48 it also worked on a tool named capacitor
- 00:06:51 now capacitor is essentially a tool
- 00:06:54 that is capable of taking your existing
- 00:06:56 web app
- 00:06:57 and wrapping it into a so called web
- 00:07:00 view
- 00:07:01 into a native mobile app so in the end
- 00:07:03 it gives you a native mobile app
- 00:07:05 that runs your web app inside of it but
- 00:07:08 in a way
- 00:07:09 that is indistinguishable for the user
- 00:07:11 to
- 00:07:12 a normal native app because it is a
- 00:07:14 normal native app
- 00:07:15 just with well a web app included in it
- 00:07:18 but it looks and feels like
- 00:07:20 a regular mobile app which you build
- 00:07:22 with native mobile controls
- 00:07:24 as you will see in this course and
- 00:07:26 that's amazing because this allows you
- 00:07:28 to take your web app
- 00:07:29 and convert it into a mobile app easily
- 00:07:32 now if you're a little bit more
- 00:07:33 experienced in this area you also might
- 00:07:35 know
- 00:07:35 cordova which is a similar tool doing
- 00:07:38 something similar
- 00:07:39 capacitor is basically a more modern
- 00:07:42 version of that
- 00:07:43 built from the ground up by the people
- 00:07:45 at ionic who have a lot of experience
- 00:07:47 with that
- 00:07:48 who used cordova in the past but now
- 00:07:50 have their own solution which we'll also
- 00:07:52 use in this course which is super fast
- 00:07:54 super easy to use and makes it really
- 00:07:56 easy to build native mobile apps
- 00:07:59 so this is the part that allows us to
- 00:08:01 use our web app and run it on a native
- 00:08:03 device as a native mobile app and not
- 00:08:06 just as a website opened in the browser
- 00:08:08 now last but not least the ioniq
- 00:08:11 platform
- 00:08:12 so the set of tools we use from the
- 00:08:14 ionic echo system
- 00:08:15 also has the ionic cli which stands for
- 00:08:18 command line interface
- 00:08:19 which can work with other clis like in
- 00:08:22 this course the angular cli which you
- 00:08:24 will use behind the scenes
- 00:08:26 which helps us create ionic projects
- 00:08:29 manage them use capacitor to convert our
- 00:08:32 web app into a mobile app
- 00:08:34 so basically which helps us with the
- 00:08:36 entire build workflow
- 00:08:38 that is the last important part from the
- 00:08:40 ionic world
- 00:08:41 we'll be using this makes developing
- 00:08:44 simply easier
- 00:08:45 faster and allows us to finally build
- 00:08:48 and
- 00:08:49 package our app up now this
- 00:08:52 is the ionic platform these are the
- 00:08:54 tools you will learn about in this
- 00:08:56 course in detail and this is just a big
- 00:08:58 picture here obviously
- 00:08:59 and this is what ionic gives us to build
- 00:09:02 amazing web apps which can
- 00:09:04 work and run as web apps but then they
- 00:09:06 look like
- 00:09:07 native mobile apps already thanks to
- 00:09:09 these nice
- 00:09:10 ionic web components which by the way
- 00:09:12 are also not just about the looks
- 00:09:15 but also have a lot of rich
- 00:09:16 functionality included in them
- 00:09:18 like this tab functionality i mentioned
- 00:09:21 earlier
- 00:09:22 but then ionic doesn't stop there
- 00:09:23 doesn't stop at that web user interface
- 00:09:26 it then also gives you the tool to build
- 00:09:28 that in an easy way
- 00:09:29 and to then also convert it into mobile
- 00:09:32 apps or even desktop apps
- 00:09:34 if you want to this is the ionic
- 00:09:36 platform in its core
- 00:09:38 there are also a certain premium and
- 00:09:40 cloud services offered by ionic
- 00:09:43 for some of them you have to pay others
- 00:09:45 are free i won't dive
- 00:09:46 too much into them in this course but i
- 00:09:48 want to mention nonetheless
- 00:09:50 these services allow you to build your
- 00:09:52 app in the cloud
- 00:09:53 for example if you want to build an ios
- 00:09:55 app on windows this would be possible
- 00:09:57 with the services
- 00:09:58 and they also have other services for
- 00:10:01 easier development or previewing
- 00:10:03 and you can find all of that on their
- 00:10:05 official web page
- 00:10:06 which i'll also show you in a second but
- 00:10:08 this is ionic in its core
- 00:10:15 now that we had this detailed first look
- 00:10:17 at what ionic is and which kind of tools
- 00:10:19 it gives us
- 00:10:20 let's take a closer look at this ionic
- 00:10:23 ecosystem
- 00:10:24 and for that let's go back to our
- 00:10:27 starting point which is that we want to
- 00:10:29 build a web app
- 00:10:31 with or without any framework so in this
- 00:10:33 course with angular but you could even
- 00:10:35 build it with vanilla javascript or with
- 00:10:38 react or
- 00:10:38 view ionic works with all these
- 00:10:41 alternatives
- 00:10:42 so you're building this web app and you
- 00:10:44 want to keep it as a web app
- 00:10:46 possibly a so-called progressive web app
- 00:10:49 with these
- 00:10:50 cooler features this fast and reliable
- 00:10:53 interaction
- 00:10:54 and you also want to have a native
- 00:10:55 mobile app and then you have this
- 00:10:57 suit of web components which look like
- 00:11:00 this which look like normal html tags
- 00:11:02 except for that they aren't you then
- 00:11:04 have your tools to convert this app
- 00:11:07 and you have your tools for the
- 00:11:08 development so the ionic cli and so on
- 00:11:11 this is essentially what we saw in the
- 00:11:13 last lecture already but this is just
- 00:11:15 another way of depicting it or of
- 00:11:18 showing it on a slide
- 00:11:20 now of course with that knowledge in
- 00:11:22 mind we can create an ionic project and
- 00:11:24 we'll do so in this section already
- 00:11:26 now this project essentially is all
- 00:11:29 about our app
- 00:11:30 so about our code we write to create a
- 00:11:33 nice
- 00:11:34 web application a nice website in the
- 00:11:36 end and that of course means we will
- 00:11:38 write
- 00:11:39 our own code and again that could be
- 00:11:41 written in vanilla javascript
- 00:11:43 or with any framework like in this
- 00:11:45 course with angular
- 00:11:47 so we add such a fronted framework and
- 00:11:49 that is optional
- 00:11:50 as i just mentioned you could use
- 00:11:52 vanilla javascript
- 00:11:54 and then we add the ionic framework so
- 00:11:56 this set of ionic web components to get
- 00:11:59 nice rich web elements added to zap
- 00:12:03 automatically or with very little effort
- 00:12:06 so that the app already looks nice and
- 00:12:08 has a lot of nice capabilities
- 00:12:10 which would be quite a lot of work to
- 00:12:12 build on our own otherwise
- 00:12:14 so with that added and with a lot of
- 00:12:17 cool functionalities added therefore
- 00:12:19 we can continue now as a side note
- 00:12:21 because that's already interesting to
- 00:12:23 know here
- 00:12:24 the web components we're adding here the
- 00:12:26 ionic web components
- 00:12:27 are built with a tool called stencil you
- 00:12:30 don't need to learn
- 00:12:31 stencil to work with ionic not at all
- 00:12:33 and we will not learn it in this course
- 00:12:35 but if you want to learn how the ionic
- 00:12:38 web components were built behind the
- 00:12:39 scenes so if you want to know a little
- 00:12:41 bit more about that
- 00:12:42 or if you want to build your own web
- 00:12:44 components which you can use in
- 00:12:46 conjunction with your framework and with
- 00:12:47 ionic
- 00:12:48 then learning stencil could be well
- 00:12:51 worth it
- 00:12:52 and i do have a complete web component
- 00:12:54 with and without
- 00:12:55 stance of course so all in one course
- 00:12:57 here on udemy so definitely check this
- 00:12:59 out if you want to learn all about the
- 00:13:01 technology
- 00:13:02 the ionic team used to build their ionic
- 00:13:05 web components
- 00:13:06 but that's just a side note so
- 00:13:09 these web components are built with
- 00:13:10 stencil and that is all done for you
- 00:13:12 you just add these web components and in
- 00:13:14 the end you can then
- 00:13:15 build different kind of apps based on
- 00:13:18 your single code base based on your app
- 00:13:21 and this is again done with capacitor or
- 00:13:23 cordova
- 00:13:24 as i mentioned in this course we'll use
- 00:13:26 capacitor which is a tool developed by
- 00:13:28 the ionic team
- 00:13:29 so we'll stay entirely in that ionic
- 00:13:31 world
- 00:13:32 and what this tool in the end does is it
- 00:13:34 acts as a bridge between our web code
- 00:13:36 our web javascript code
- 00:13:38 and then the native platform we're
- 00:13:40 running on so that from our javascript
- 00:13:43 code we can
- 00:13:44 trigger certain functions which then in
- 00:13:46 the end trigger
- 00:13:47 native code on your device so real
- 00:13:49 native code there
- 00:13:50 to for example open the camera to get
- 00:13:53 the user location
- 00:13:54 to show an alert or anything like that
- 00:13:57 this can then be done with real native
- 00:14:00 code executed on your
- 00:14:02 behalf without you needing to write it
- 00:14:05 by tools like capacitor or cordova
- 00:14:08 which you can't even use kind of
- 00:14:10 together as i'll also show in this
- 00:14:11 course
- 00:14:12 but we'll primarily use capacitor here
- 00:14:15 so this is what ionic is all about
- 00:14:18 in this course we will learn all about
- 00:14:20 ionic
- 00:14:21 we will do that with angular as a
- 00:14:25 frontend framework
- 00:14:26 and we'll also learn about capacitor and
- 00:14:29 we will then
- 00:14:30 therefore build a progressive web app as
- 00:14:33 well
- 00:14:33 as our mobile apps will not cover
- 00:14:37 stencil or anything like that
- 00:14:43 now that we had a first look at what
- 00:14:45 ionic is
- 00:14:46 and no worries if that was a lot we'll
- 00:14:49 learn about these different building
- 00:14:50 blocks
- 00:14:51 step by step throughout the course we'll
- 00:14:53 learn about the web components and then
- 00:14:54 we'll learn about capacitor and how it
- 00:14:57 works together
- 00:14:58 no worries but now that we learned about
- 00:15:00 that what is angular
- 00:15:02 and i want to be honest here you should
- 00:15:04 know that
- 00:15:05 knowing angular is a prerequisite to
- 00:15:07 this course
- 00:15:08 there is a complete refresher module
- 00:15:11 after this first module
- 00:15:13 this is entirely optional and it should
- 00:15:15 really just be a refresher
- 00:15:17 it will not teach you angular from the
- 00:15:19 ground up it will only refresh your
- 00:15:21 knowledge
- 00:15:22 in case it's been some time since you
- 00:15:23 last worked with angular knowing angular
- 00:15:26 is a prerequisite and if you don't
- 00:15:28 check out my complete angular guide to
- 00:15:31 learn all about angular which you will
- 00:15:33 also need
- 00:15:34 in this course angular is of course a
- 00:15:37 framework
- 00:15:38 which makes the development of
- 00:15:42 web apps javascript driven web apps
- 00:15:44 easier and more fun
- 00:15:45 and more allows us to write more
- 00:15:48 powerful apps because we don't have to
- 00:15:50 focus on the nitty-gritty details but we
- 00:15:52 can
- 00:15:53 use angular to take care about all the
- 00:15:55 rendering of the ui
- 00:15:56 and of creating a nice single page
- 00:15:58 application and we can focus on our
- 00:16:00 business logic
- 00:16:02 and therefore tools or frameworks like
- 00:16:04 angular help us
- 00:16:05 write highly reactive javascript-driven
- 00:16:08 web apps
- 00:16:09 um it's absolutely optional we could do
- 00:16:12 everything with vanilla javascript but
- 00:16:14 then
- 00:16:14 we really couldn't because we would have
- 00:16:16 to reinvent the wheel
- 00:16:17 all over the place we would probably
- 00:16:20 introduce
- 00:16:20 bugs and angler does the same we could
- 00:16:23 do
- 00:16:24 but in a best practice way it makes
- 00:16:27 the way free for us to work and focus on
- 00:16:30 our own business logic
- 00:16:32 and we also use angular to build
- 00:16:33 so-called single page applications
- 00:16:36 which are apps that run on one and the
- 00:16:38 same html page
- 00:16:40 where this page or parts of this page
- 00:16:42 are constantly re-rendered
- 00:16:44 why a javascript in the end triggered
- 00:16:46 and controlled through angular
- 00:16:48 but which to the user looks like
- 00:16:50 sometimes the entire page changes
- 00:16:52 and that simply creates the illusion of
- 00:16:54 having different pages we can switch
- 00:16:56 between
- 00:16:57 whilst all the transitions and is on are
- 00:16:59 instant because it's javascript
- 00:17:01 running in the browser we don't need to
- 00:17:03 wait for a server response
- 00:17:05 and that's why we build apps with
- 00:17:06 javascript and where we
- 00:17:08 power so much logic in our apps with
- 00:17:10 javascript
- 00:17:12 now in an ionic app we essentially would
- 00:17:14 want to use a framework like angular
- 00:17:16 because it helps us with complex
- 00:17:18 problems like state or
- 00:17:20 data management between different pages
- 00:17:22 for example which can become
- 00:17:24 quite difficult in bigger apps and it
- 00:17:26 helps us with things like
- 00:17:27 routing or navigation so switching
- 00:17:30 between these different
- 00:17:31 pages and passing data around between
- 00:17:33 them and so on
- 00:17:34 and we'll come back to this later in the
- 00:17:36 course this is angular
- 00:17:38 as i said if it's been some time since
- 00:17:40 you last worked with it have a look at
- 00:17:42 this refresher i have
- 00:17:43 after this module if angular isn't your
- 00:17:46 thing
- 00:17:47 then this might not be 100 the right
- 00:17:49 course for you
- 00:17:50 but i want to highlight at this point
- 00:17:52 that ionic
- 00:17:53 also works with just javascript no
- 00:17:56 framework at all or with other
- 00:17:58 frameworks or libraries
- 00:18:00 so you can use it with react or view as
- 00:18:03 well if you want
- 00:18:04 you should still in case you want to go
- 00:18:06 that route and you don't want to refund
- 00:18:08 the course which is nice of course
- 00:18:10 you should go through the the quick
- 00:18:12 start parts the first sections of this
- 00:18:14 course to learn how ionic works and you
- 00:18:16 will then still be able to use that
- 00:18:18 knowledge
- 00:18:18 with these other frameworks um even
- 00:18:21 though some
- 00:18:22 things will differ there but you will
- 00:18:24 know which things differ
- 00:18:25 by the end of these first sections
- 00:18:28 because the ionic components you use
- 00:18:29 and the way you use them will be the
- 00:18:31 same and speaking of that
- 00:18:33 it's time to get our hands dirty and
- 00:18:35 start using some ionic components
- 00:18:42 so let's dive in and let's build our
- 00:18:45 very
- 00:18:45 first simple ionic app or get something
- 00:18:49 onto the screen
- 00:18:51 for this you can visit
- 00:18:52 ionicframework.com
- 00:18:54 and there under developers installation
- 00:18:56 you find installation instructions
- 00:18:58 now first important thing you don't need
- 00:19:01 an ionic account
- 00:19:02 you can instead simply install that
- 00:19:04 ionic cli here
- 00:19:06 now for that to be installable and to
- 00:19:09 run you also need another tool which is
- 00:19:11 nodejs
- 00:19:13 you can get nodejs from nodejs.org
- 00:19:16 node.js is a javascript runtime that you
- 00:19:19 for example and
- 00:19:20 mainly used to build server-side
- 00:19:23 applications with javascript that is not
- 00:19:26 what we'll do in this course
- 00:19:28 we'll still need node.js for two reasons
- 00:19:31 reason number one is it's package
- 00:19:33 manager npm
- 00:19:35 for node package manager which is used
- 00:19:38 to manage dependencies
- 00:19:40 like other third-party libraries in node
- 00:19:42 apps but which
- 00:19:43 also is the de facto standard package
- 00:19:46 manager
- 00:19:46 for web projects in general so also for
- 00:19:49 front-end web applications as we're
- 00:19:51 building it here in the course in the
- 00:19:52 end
- 00:19:53 and therefore we will use npm to manage
- 00:19:55 our dependencies
- 00:19:56 and ionic is just such a dependency you
- 00:19:59 could say
- 00:20:00 now in addition to npm we also need
- 00:20:02 node.js itself
- 00:20:04 because the ionic build workflow and the
- 00:20:07 tools the ionic cli
- 00:20:09 behind the scenes run based on node.js
- 00:20:12 they use node.js features
- 00:20:14 to execute correctly we don't need to
- 00:20:16 write the code for that but we need to
- 00:20:18 have nodejs installed
- 00:20:19 for these tools to work so from
- 00:20:22 nodejs.org
- 00:20:23 download the latest version in my case
- 00:20:26 11.8
- 00:20:27 and only if that should fail use the lts
- 00:20:29 version here
- 00:20:30 so simply download it walk through the
- 00:20:32 installer it's the same on windows and
- 00:20:35 mac os it's a normal installer you go
- 00:20:37 through it
- 00:20:38 and thereafter you'll have nodejs and
- 00:20:40 npm installed
- 00:20:41 automatically then you can execute this
- 00:20:45 command and you execute this in your
- 00:20:47 normal
- 00:20:47 terminal or command prompt now in
- 00:20:49 windows feel free to run this
- 00:20:51 command prompt as administrator by right
- 00:20:54 clicking on the executable
- 00:20:55 run as administrator on mac os and linux
- 00:20:58 you very likely need to add sudo in
- 00:21:01 front of this command
- 00:21:02 to get the right permissions to execute
- 00:21:04 it well with that you're
- 00:21:06 probably prompted to enter your password
- 00:21:09 and this will now install the ionic cli
- 00:21:12 and
- 00:21:12 tooling you could say globally on your
- 00:21:16 mac or pc now why globally
- 00:21:19 because now we can use that ionic cli
- 00:21:21 anywhere
- 00:21:22 in any path here in our terminal to
- 00:21:25 create new ionic projects
- 00:21:27 to run them to build an ionic app and so
- 00:21:30 on
- 00:21:31 so now with that installed we can use it
- 00:21:33 to build a new app to create a new app
- 00:21:36 for this in your terminal or command
- 00:21:38 prompt navigate into the folder
- 00:21:40 where you want to create your new
- 00:21:42 project folder for this ionic project
- 00:21:45 once you navigate it there run ionic
- 00:21:48 start this basically generates a new
- 00:21:51 project
- 00:21:52 it will now ask you a couple of
- 00:21:53 questions like what should be the name
- 00:21:55 of the project
- 00:21:56 and i'll name it ionic angular
- 00:22:00 course but you can of course choose any
- 00:22:02 name you want
- 00:22:04 next you can choose from a couple of
- 00:22:06 templates now the list here could change
- 00:22:08 over time
- 00:22:09 you essentially have the choice between
- 00:22:11 a plank template which is
- 00:22:13 totally empty project with just the
- 00:22:14 starting page
- 00:22:16 the side menu template where you have a
- 00:22:18 side menu you can slide in from the left
- 00:22:20 and a tabs menu where you have some tabs
- 00:22:22 at the bottom
- 00:22:23 now we'll learn about all these
- 00:22:25 different navigation options throughout
- 00:22:26 the course and you will
- 00:22:28 learn how to not just use them from a
- 00:22:29 finished template but how to build them
- 00:22:31 on your own
- 00:22:32 and therefore i will just start with
- 00:22:34 blank here which is the most boring but
- 00:22:36 also the most simple
- 00:22:37 template to start with and as i said
- 00:22:39 we'll learn about the rest
- 00:22:41 later now this will generate a new
- 00:22:43 project and install
- 00:22:44 all the dependencies like angular or
- 00:22:46 ionic this project requires
- 00:22:49 let's wait for this to finish and i'll
- 00:22:50 be back once it is
- 00:22:52 now once this finished i'm asked if i
- 00:22:55 want to use ionic app flow and connect
- 00:22:57 my app and you can simply
- 00:22:58 answer no here this is one of these
- 00:23:00 cloud services
- 00:23:01 which would be usable for free even you
- 00:23:04 can create a free account and use some
- 00:23:06 services
- 00:23:07 but i don't need any of them right now
- 00:23:09 so i'll just
- 00:23:10 type in n and hit enter here now next
- 00:23:14 you can navigate you see the commands
- 00:23:15 here actually
- 00:23:16 you can navigate into this newly created
- 00:23:18 ionic angular course
- 00:23:20 or whatever you named it folder and in
- 00:23:23 there simply run
- 00:23:24 ionic serve now ionix earth
- 00:23:27 will behind the scenes as you can see
- 00:23:30 here actually
- 00:23:31 use the angular cli which is installed
- 00:23:35 for you in this
- 00:23:36 project to spin up a development server
- 00:23:39 which in the end runs your application
- 00:23:42 builds your angular application and
- 00:23:44 that's really cool ionic uses the
- 00:23:46 angular cli behind the scenes
- 00:23:48 so all the cool features offered by the
- 00:23:50 angular cli
- 00:23:51 are included in an ionic project as well
- 00:23:54 and you don't need to wait for the ionic
- 00:23:56 cli to update to include something you
- 00:23:58 might want to use from the angular cli
- 00:24:01 and if that's something you're totally
- 00:24:02 not interested in well then
- 00:24:04 it doesn't hurt you that it uses the
- 00:24:06 angle or cli
- 00:24:07 so here i then got my first
- 00:24:10 ionic app and this doesn't look too
- 00:24:13 fancy yet but it
- 00:24:14 already doesn't look bad either this
- 00:24:17 especially looks good if you open your
- 00:24:20 chrome developer tools or whichever
- 00:24:21 browser you're using but in chrome
- 00:24:24 any developer tools you can click this
- 00:24:26 toggle device
- 00:24:27 thing here and you can then preview the
- 00:24:29 app as it would look on different
- 00:24:32 mobile devices just reload after you
- 00:24:34 selected a new one
- 00:24:36 and this doesn't look too shabby looks
- 00:24:38 already quite a bit like a mobile app
- 00:24:40 even though there isn't too much
- 00:24:41 meat in it but let's change that now to
- 00:24:44 change that we need
- 00:24:45 an editor we need an ide where we can
- 00:24:48 write our code
- 00:24:49 in this course i will use visual studio
- 00:24:51 code which is a free ide
- 00:24:53 built for web development it's fast it's
- 00:24:56 awesome
- 00:24:56 it constantly gets new features it's
- 00:24:59 really great
- 00:25:00 you can get it from
- 00:25:02 code.visualstudio.com
- 00:25:03 and there you can download it for your
- 00:25:05 platform it's a simple installer you
- 00:25:08 download it
- 00:25:09 walk through the installer and once you
- 00:25:11 have it installed
- 00:25:12 you can open the project the folder you
- 00:25:15 generated here so in my case ionic
- 00:25:17 angular dash course with visual studio
- 00:25:20 code
- 00:25:21 here i did open that ionic dash angular
- 00:25:23 dash course
- 00:25:24 folder now inside of visual studio code
- 00:25:28 it should look like this for you as well
- 00:25:30 if it doesn't you can hit command shift
- 00:25:32 p
- 00:25:32 or control shift p on windows and if you
- 00:25:36 enter theme here you should be able to
- 00:25:38 pick your color theme here by pressing
- 00:25:40 enter
- 00:25:40 and i'm using the dark plus theme so in
- 00:25:42 case you want to have that same look
- 00:25:44 you can use the dark plus theme here i'm
- 00:25:47 also using some extensions so if you go
- 00:25:49 to view
- 00:25:50 extensions here i recommend that you use
- 00:25:54 both the
- 00:25:54 angular essentials you can simply search
- 00:25:57 for that here
- 00:25:58 and then install these angular
- 00:26:01 essentials
- 00:26:02 package this angular essentials package
- 00:26:04 here i already got it installed
- 00:26:06 simply install it on your own this helps
- 00:26:09 you with general angular development
- 00:26:12 and what i also do in this or what i
- 00:26:14 also use in this course
- 00:26:15 i also use the material icon theme
- 00:26:19 and this is totally optional it's this
- 00:26:22 one here
- 00:26:23 it just changes the file icons you see
- 00:26:25 inside of visual studio code and i like
- 00:26:27 that look here
- 00:26:28 so i installed that theme as well that
- 00:26:30 doesn't help you with development
- 00:26:32 it just gives you prettier icons if you
- 00:26:34 want to have these
- 00:26:36 same icons you can see here you can
- 00:26:38 install this
- 00:26:39 theme now once you're done picking your
- 00:26:42 extensions you can go back to
- 00:26:44 explorer here in the view menu or use
- 00:26:46 this shortcut as
- 00:26:47 i just did so this gives you the look
- 00:26:50 and feel you see here in this course
- 00:26:52 and what you find in there in its core
- 00:26:54 is a normal
- 00:26:55 angular app so if you work with angular
- 00:26:58 before which you should for this course
- 00:27:00 then this does look quite familiar here
- 00:27:02 you got a source folder with the app
- 00:27:03 folder with the app module
- 00:27:05 app component and here in the app
- 00:27:08 component html file we see the first
- 00:27:11 interesting thing these are not normal
- 00:27:14 html
- 00:27:15 elements and they're also not normal
- 00:27:17 angular components
- 00:27:18 in the end this year are these web
- 00:27:21 components added by ionic
- 00:27:23 now these are some web components we can
- 00:27:25 see even more here
- 00:27:26 in your home page html file got an ion
- 00:27:30 header
- 00:27:31 toolbar title iron content and then also
- 00:27:34 a normal html element
- 00:27:36 so it is quite normal to mix and match
- 00:27:38 them but ionic has a rich
- 00:27:40 suit of built-in elements which in case
- 00:27:43 you want to get a sneak peek already
- 00:27:45 you can find in the official docs under
- 00:27:47 developers ui components
- 00:27:48 on ionicframework.com and there you see
- 00:27:51 a list of all the web components it
- 00:27:53 ships with
- 00:27:54 and that's quite a lot we can do cool
- 00:27:56 things
- 00:27:57 like here we could add a iron button
- 00:28:00 which is one of the components it ships
- 00:28:01 with
- 00:28:02 and in this course you will learn about
- 00:28:03 a lot so you don't need to memorize this
- 00:28:05 right now
- 00:28:06 or get shocked regarding how you should
- 00:28:08 ever learn this
- 00:28:09 you will learn it throughout the course
- 00:28:12 and there
- 00:28:12 i could say change text and let's say i
- 00:28:15 want to change
- 00:28:16 this text up there so let's grab this
- 00:28:20 text here maybe move it into a paragraph
- 00:28:23 and on that button here
- 00:28:24 we can now add a click listener and
- 00:28:27 execute on change text so we write
- 00:28:29 normal angular code here that is what i
- 00:28:31 want to show you this is a normal
- 00:28:32 angular code a normal angular click
- 00:28:34 listener just the element is not a
- 00:28:36 normal angular or html element
- 00:28:38 it is an ionic web component
- 00:28:42 and then how did i added that we added
- 00:28:44 this click listener and i'm
- 00:28:46 targeting on change text i can add a
- 00:28:48 once
- 00:28:49 text method here to my homepage
- 00:28:51 component class
- 00:28:52 which is a normal angular component as
- 00:28:54 you can tell it has the component
- 00:28:56 decorator it has a template url and a
- 00:28:59 selector so
- 00:29:00 all things you know from angular and in
- 00:29:03 there i could have a text property with
- 00:29:05 default starting text let's say
- 00:29:08 and when we trigger this function here
- 00:29:11 this method
- 00:29:12 i set this text e equal to changed
- 00:29:16 and now all we have to do again normal
- 00:29:18 angular logic
- 00:29:19 all we have to do is we go to home page
- 00:29:22 html
- 00:29:23 and there we can now output this with
- 00:29:25 string interpolation
- 00:29:27 also a normal angular feature and we can
- 00:29:30 target
- 00:29:30 text here and text is simply the
- 00:29:32 property name
- 00:29:34 i have in here now with that
- 00:29:37 if i now save this thanks to ionic serve
- 00:29:40 still running and you should keep this
- 00:29:42 up and running
- 00:29:43 it will automatically watch your code
- 00:29:44 for changes and reload your app in the
- 00:29:47 browser so
- 00:29:48 rebuild the app and then reload the app
- 00:29:50 in the browser whenever such a change
- 00:29:52 happens
- 00:29:52 and therefore now if you go to the tab
- 00:29:54 where your app runs you see
- 00:29:56 the change template you see this button
- 00:29:58 which looks like this
- 00:29:59 without me adding any css which is
- 00:30:01 another part of these built-in web
- 00:30:03 components they have a nice styling
- 00:30:05 included
- 00:30:06 and if i press this button it changes
- 00:30:09 now by the way if i would switch to
- 00:30:11 let's say a pixel 2 so to an
- 00:30:13 android device and i reload you can also
- 00:30:16 see that the button now looks
- 00:30:17 differently and if i tap it
- 00:30:18 we get this ripple effect here so that
- 00:30:21 is
- 00:30:22 a lot of the stuff ionic does for you it
- 00:30:24 automatically adjusts its components to
- 00:30:26 the platform they're running on
- 00:30:28 it gives you nice styling and you can
- 00:30:30 use them like normal web
- 00:30:31 elements like normal html elements just
- 00:30:35 with a lot of functionality already
- 00:30:37 included
- 00:30:39 now that is essentially what you will be
- 00:30:41 able to do with
- 00:30:42 ionic we haven't even seen the part yet
- 00:30:44 where we take this web app and run it on
- 00:30:47 a real native device
- 00:30:48 we'll do this later in the course but
- 00:30:50 this is the end how we will work with
- 00:30:52 ionic throughout the course
- 00:30:53 we'll use the many elements it offers us
- 00:30:56 write normal angular logic and we can
- 00:31:00 build
- 00:31:00 nice beautiful automatically adjusting
- 00:31:04 web apps that we can deploy as web apps
- 00:31:07 and run as normal websites but which we
- 00:31:09 can then later
- 00:31:10 also deploy as real native apps which
- 00:31:14 look and feel like native apps because
- 00:31:15 well
- 00:31:16 they are native apps then by the end of
- 00:31:18 the course
- 00:31:19 and i hope this wets your appetite here
- 00:31:22 obviously
- 00:31:23 we'll learn all about the different
- 00:31:25 components here
- 00:31:26 which ones exist how we use them how we
- 00:31:28 configure them and how we combine them
- 00:31:30 with angular
- 00:31:31 we'll learn all about this throughout
- 00:31:33 the course
- 00:31:38 now we had our first little ionic
- 00:31:40 angular
- 00:31:41 application nothing too fancy in there
- 00:31:43 but i hope you saw how we will
- 00:31:45 generally work with ionic that we in the
- 00:31:47 end have a setup
- 00:31:49 where i will explain in more detail how
- 00:31:51 things are working together there
- 00:31:53 where we can use these ionic web
- 00:31:55 components to build nice
- 00:31:56 user interfaces now ionic hasn't always
- 00:32:00 been about web components though
- 00:32:02 historically with ionic 1
- 00:32:04 ionic was all about creating mobile apps
- 00:32:06 with angular 1.
- 00:32:08 an ionic one was released in 2013. in
- 00:32:11 the end what ionic 1 did
- 00:32:13 was it didn't create web components that
- 00:32:15 was possible back then you couldn't
- 00:32:17 create your own html
- 00:32:18 elements browsers didn't support that
- 00:32:21 but it used
- 00:32:22 angular 1 directives custom directives
- 00:32:25 to essentially also give you custom
- 00:32:28 components but custom
- 00:32:29 angular components in the end which run
- 00:32:31 only inside of angular apps
- 00:32:34 now ionic 2 continued this in 2016
- 00:32:38 by giving you the same for angular 2
- 00:32:40 which was a brand
- 00:32:42 new version of angular which is totally
- 00:32:44 different to angular 1.
- 00:32:45 the two have basically nothing in common
- 00:32:47 indeed so ionic 2 gave you again
- 00:32:50 angular components not web components
- 00:32:53 angular components
- 00:32:54 and again therefore you could only use
- 00:32:56 ionic 2
- 00:32:58 in angular 2 applications now there also
- 00:33:01 was an ionic 3 which
- 00:33:03 basically added some new features
- 00:33:05 enhanced ionic a little bit
- 00:33:06 but it was still focused on angular at
- 00:33:10 that time angular 4 was out but still
- 00:33:12 angular 4
- 00:33:13 despite the name as you should know is
- 00:33:15 just the same as angular 2 in its core
- 00:33:17 as is angular 7 8 and so on all these
- 00:33:20 new versions are simply named like this
- 00:33:22 they're all based on angular 2. so we
- 00:33:25 still could only build
- 00:33:27 angular ionic apps there and the ionic
- 00:33:30 team decided that this would not be
- 00:33:31 optimal for the future because not all
- 00:33:34 people are using angular
- 00:33:36 you of course probably are otherwise
- 00:33:38 you'd not be taking this course
- 00:33:40 but you could be using react or you
- 00:33:42 could be using view or no framework at
- 00:33:44 all
- 00:33:45 and maybe you want to use some ionic
- 00:33:47 components maybe not even all of them
- 00:33:48 but
- 00:33:49 some of them or you do want to use all
- 00:33:51 of them because you do want to build
- 00:33:53 a native mobile app with ionic well then
- 00:33:55 you were limited
- 00:33:56 to angular with ionic 4
- 00:34:00 you aren't anymore ionic 4
- 00:34:03 and all the future versions of ionic are
- 00:34:05 based
- 00:34:06 on web components and this is a browser
- 00:34:09 specification
- 00:34:10 that allows you to add your own html
- 00:34:12 elements that run totally
- 00:34:14 independent from any web framework you
- 00:34:16 might be using
- 00:34:17 so you're independent from angular and
- 00:34:19 so on because in the end all you need
- 00:34:21 here
- 00:34:21 is javascript these web components use
- 00:34:23 javascript under the hood
- 00:34:25 and every browser supports javascript
- 00:34:27 and therefore
- 00:34:28 web components in ionic 4 can be used
- 00:34:30 with any framework any web framework or
- 00:34:33 no framework at all if you want to
- 00:34:36 and that is pretty cool now all the word
- 00:34:38 on the future of ionic
- 00:34:40 in the past we had ionic 2 and 3 and 1.
- 00:34:43 now we have ionic 4 and we'll get a new
- 00:34:45 version every 6 months but just as with
- 00:34:47 angular
- 00:34:48 5 6 7 8 and so on these new versions
- 00:34:51 don't change
- 00:34:52 everything there are small incremental
- 00:34:54 enhancements
- 00:34:55 where the majority will stay the same
- 00:34:58 your knowledge you need will stay the
- 00:34:59 same
- 00:35:00 only some enhancements are made minor
- 00:35:03 features are introduced
- 00:35:04 and all these changes will happen in a
- 00:35:07 backward compatible way
- 00:35:08 so that you have loads of time of
- 00:35:11 updating your app if needed and often
- 00:35:13 you don't even need to update anything
- 00:35:14 so this is not like oh god i gotta learn
- 00:35:17 something new in six months
- 00:35:18 you don't this is the ionic history and
- 00:35:22 a brief look
- 00:35:23 into its future and that is why ionic
- 00:35:26 four
- 00:35:26 and future versions of that is and will
- 00:35:29 be the best versions of ionic with ever
- 00:35:31 had
- 00:35:32 because we got so much flexibility with
- 00:35:34 these versions
- 00:35:39 in the last video i had a look at the
- 00:35:41 history of ionic
- 00:35:43 if you have used ionic 2 or 3
- 00:35:46 this video is for you if you haven't you
- 00:35:47 can simply skip it i want to dive into
- 00:35:50 the important differences between ionic
- 00:35:52 3 and ionic 4
- 00:35:53 and what changed now first of all if you
- 00:35:55 need to update an existing project to
- 00:35:58 ionic for
- 00:35:58 there is a migration guide on the
- 00:36:00 official page
- 00:36:02 on the official webpage of ionic on
- 00:36:05 ionicframework.com
- 00:36:07 you can go to guide here in the docs and
- 00:36:09 you will find a migration
- 00:36:11 guide here and that gives you a detailed
- 00:36:14 overview
- 00:36:15 of what changed from ionic 3 to ionic 4
- 00:36:18 and how you need to adjust your project
- 00:36:20 to well updated so that is the detailed
- 00:36:23 guide
- 00:36:24 i want to give you the rough overview of
- 00:36:26 what changed
- 00:36:27 so an ionic-free project used the ionic
- 00:36:30 cli
- 00:36:31 to generate such a project we then used
- 00:36:34 cordova to
- 00:36:35 also get a mobile app out of that and
- 00:36:38 ionic 2 and 3 actually were mostly
- 00:36:41 focused on getting these mobile apps
- 00:36:42 with ionic free you could also build
- 00:36:44 progressive web apps that was possible
- 00:36:47 but the focus really was on this mobile
- 00:36:50 app with
- 00:36:51 web technologies thing with ionic 4
- 00:36:54 that's changing we still have the ionic
- 00:36:56 cli
- 00:36:57 but we can actually also include ionic 4
- 00:37:00 through a cdn or
- 00:37:02 through npm so we don't even need a cli
- 00:37:05 or any complex build workflow to use
- 00:37:08 ionic for which makes sense because it
- 00:37:10 doesn't rely
- 00:37:11 on a framework and actually in the first
- 00:37:14 real section of this course after the
- 00:37:16 angular refresher
- 00:37:18 i will show you how to include ionic
- 00:37:20 without any cli before we then use it
- 00:37:23 again
- 00:37:23 because we're also building an angular
- 00:37:25 app which needs one so that's the first
- 00:37:27 subtle but important difference we can
- 00:37:29 just use the ionic cli
- 00:37:32 we then in the end have a normal web
- 00:37:33 project and
- 00:37:35 an ionic project in ionic 3 and 2 also
- 00:37:38 was a web project
- 00:37:39 but it was highly geared towards getting
- 00:37:41 out such a
- 00:37:42 mobile app such an ionic driven app now
- 00:37:45 here we have a normal web app project
- 00:37:47 that also can spit out a real mobile app
- 00:37:50 but doesn't have to
- 00:37:52 because under the hood like the ionic
- 00:37:54 cli for angular
- 00:37:55 we use just the angular cli and similar
- 00:37:58 things are offered for react and view
- 00:38:00 so we don't really have anything too
- 00:38:02 different to a normal web app built with
- 00:38:04 angular or react
- 00:38:06 it's just a web app plus so to say with
- 00:38:09 some extra features
- 00:38:11 and therefore what we get out could be a
- 00:38:12 normal web app but we can
- 00:38:14 also use cordova or capacitor both
- 00:38:17 supported now
- 00:38:18 capacitor is this new tool offered by
- 00:38:20 the ionic team
- 00:38:21 to get a mobile app and in this course i
- 00:38:23 will use capacitor
- 00:38:25 so in the end we got more flexibility
- 00:38:27 that's the general theme of ionic four
- 00:38:29 more flexibility and yet more stability
- 00:38:32 and speed
- 00:38:33 as well this is the big picture again
- 00:38:36 for the detailed upgrade on what
- 00:38:38 technically changed have a look at the
- 00:38:40 official docks i showed you
- 00:38:46 now we're nearing the end of this module
- 00:38:48 there's just one important thing that is
- 00:38:50 important to know
- 00:38:52 about mobile apps built with ionic
- 00:38:55 if you're building such a mobile app as
- 00:38:57 i mentioned in the end what we get is
- 00:39:00 our code our ionic app with tools like
- 00:39:02 capacitor or cordova
- 00:39:04 is made available as a mobile app for
- 00:39:07 these native platforms so for android
- 00:39:09 and ios
- 00:39:10 and now we have two common ways of
- 00:39:13 making that happen
- 00:39:14 we could compile our code to native code
- 00:39:17 so we could compile the code to
- 00:39:19 java for android or to objective-c or
- 00:39:22 swift
- 00:39:23 for ios and compiling here especially
- 00:39:26 talks about the templates so a button
- 00:39:30 an iron button we have in our template
- 00:39:32 could be
- 00:39:33 converted into a real native button or
- 00:39:36 the alternative we could wrap our web
- 00:39:39 app into a web
- 00:39:40 view on native mobile apps you can
- 00:39:43 launch a web
- 00:39:44 view in the application to host a web
- 00:39:47 page inside of that app
- 00:39:49 you might know that from some apps like
- 00:39:50 twitter if a person
- 00:39:52 links some webpage there and you tap it
- 00:39:56 you don't open your actual browser app
- 00:39:58 and open the
- 00:39:59 page there but inside of twitter a
- 00:40:02 built-in browser
- 00:40:03 opens up this is not a browser developed
- 00:40:05 by the twitter guys
- 00:40:07 it's a so-called web view it's end a
- 00:40:09 special widget you can use
- 00:40:11 in native app development that is a
- 00:40:14 fully fledged browser that doesn't look
- 00:40:16 like one because you don't have a url
- 00:40:18 bar at the top and so on
- 00:40:19 it just is a full screen browser and
- 00:40:22 that is what ionic
- 00:40:23 uses with tools like capacitor or
- 00:40:26 cordova
- 00:40:27 you need get a mobile app shell that has
- 00:40:30 such a web view in it
- 00:40:31 and also then has some capabilities of
- 00:40:34 launching a simple web
- 00:40:35 server running mobilely on the device
- 00:40:38 that hosts your
- 00:40:39 ionic web app inside of that web view
- 00:40:43 and then cordova and capacitor that's
- 00:40:45 the cool thing
- 00:40:46 also give you a bridge so to say
- 00:40:50 through which you can tap into real
- 00:40:52 native device features
- 00:40:53 from inside your web app and that's the
- 00:40:55 difference to a website
- 00:40:56 running in a normal browser there this
- 00:40:58 is not possible
- 00:40:59 in a capacitor app that is so ionic
- 00:41:03 takes this approach of wrapping your app
- 00:41:05 into a webview
- 00:41:07 no matter if you're using capacitor or
- 00:41:09 cordova
- 00:41:10 now that webview as i mentioned allows
- 00:41:12 you to run your app
- 00:41:14 a normal web app inside of a native app
- 00:41:16 that renders this full screen
- 00:41:18 browser now you could say that this
- 00:41:22 has to be slower than a compiled app
- 00:41:24 where you work with the real native
- 00:41:26 widgets
- 00:41:27 and technically that would be true such
- 00:41:30 an app will be a little bit smaller
- 00:41:32 because there is this extra wrapper and
- 00:41:34 it is just a web page
- 00:41:36 but it is super important to stress here
- 00:41:39 that
- 00:41:39 modern devices are so fast and an ionic
- 00:41:42 app
- 00:41:43 typically uses so little performance
- 00:41:46 that you will absolutely not see any
- 00:41:49 difference
- 00:41:50 and then you just have the advantage of
- 00:41:52 being able to build a cross-platform app
- 00:41:54 with almost no effort at all that looks
- 00:41:57 and feels like a native app
- 00:41:59 that also is technically a native app
- 00:42:02 and where you can tap
- 00:42:03 into all the native device features like
- 00:42:05 the camera you might need
- 00:42:08 just that if you look under the hood
- 00:42:10 it's not really compiled down to a
- 00:42:12 native mobile app but instead it's
- 00:42:14 wrapped into a native mobile app but
- 00:42:16 again the performance difference
- 00:42:18 will in 99 of all cases not
- 00:42:22 matter and i do mean it like this not
- 00:42:24 matter for you
- 00:42:25 and you just reap the benefits
- 00:42:31 we're almost done getting started in the
- 00:42:34 next module
- 00:42:35 i'll give you an angular refresher since
- 00:42:38 we'll use
- 00:42:39 angular in this course now knowing
- 00:42:41 angular isn't prerequisite to this
- 00:42:43 course
- 00:42:43 but maybe it's been some time since you
- 00:42:44 last worked with it maybe
- 00:42:46 you only barely touched on it then this
- 00:42:49 module will help you get back into
- 00:42:51 angular and its core
- 00:42:53 concepts please note that this is of
- 00:42:55 course a totally
- 00:42:56 optional module because well it is a
- 00:42:58 prerequisite if you already know angular
- 00:43:01 you can simply fast forward through this
- 00:43:03 module or entirely skip it
- 00:43:06 now once we're done with that refresher
- 00:43:08 we'll finally dive into ionic
- 00:43:10 and they're into its basics and most
- 00:43:13 importantly
- 00:43:14 in its component basics because ionic
- 00:43:17 mostly is a component
- 00:43:18 framework or library and therefore
- 00:43:20 components are its core
- 00:43:22 and in this module we'll dive into how
- 00:43:24 to use them how to configure them
- 00:43:27 and all of that even without angular no
- 00:43:30 worries we'll add angular back into the
- 00:43:32 app later but here you'll learn
- 00:43:34 all the basics about ionic without even
- 00:43:36 needing angular
- 00:43:37 which shows a great strength of ionic it
- 00:43:40 works with or without a framework
- 00:43:42 and in this course you'll essentially
- 00:43:44 learn both now once we're done with the
- 00:43:46 component basics
- 00:43:47 we'll connect ionic to angular and you
- 00:43:50 will learn why you might want to do that
- 00:43:52 and where the strengths of this
- 00:43:54 combination lie and how to use both
- 00:43:56 together
- 00:43:57 how to inject certain ionic controllers
- 00:44:00 and elements into angular components
- 00:44:03 and how angular components and ionic
- 00:44:05 components work together
- 00:44:06 really exciting stuff once we're done
- 00:44:09 with that
- 00:44:10 it's time to leave the component world a
- 00:44:13 little bit
- 00:44:14 and focus on another core strength of
- 00:44:17 ionic what it historically always did
- 00:44:20 it always allowed you to build native
- 00:44:22 mobile apps
- 00:44:23 with web technologies so with a
- 00:44:26 framework like angular
- 00:44:27 and therefore in this next module we'll
- 00:44:29 build native apps with a tool called
- 00:44:31 capacitor
- 00:44:32 which is also managed and developed by
- 00:44:35 the ioniq team
- 00:44:36 which we can use to take our ionic and
- 00:44:39 angular web app
- 00:44:40 and convert it into a real native mobile
- 00:44:42 app and you'll learn
- 00:44:43 how that works and how to run your app
- 00:44:46 on mobile devices
- 00:44:47 in this section therefore thereafter
- 00:44:50 i'll teach you how to debug your ionic
- 00:44:52 apps because
- 00:44:53 things not always go as planned and
- 00:44:55 therefore this is a crucial skill to
- 00:44:57 have
- 00:44:58 before we then dive into navigation and
- 00:45:01 routing in ionic angular apps because
- 00:45:04 switching between different pages
- 00:45:06 is a task you do all the time in web
- 00:45:08 apps and mobile apps
- 00:45:10 you constantly navigate back and forth
- 00:45:12 and this module you will learn how the
- 00:45:14 angular router
- 00:45:15 and ionic work together when it comes to
- 00:45:17 switching between pages
- 00:45:19 thereafter we'll dive deeper into ionic
- 00:45:22 components and i'll give you a very
- 00:45:25 thorough overview of all the ionic
- 00:45:27 components and how to think about them
- 00:45:29 and how to configure them
- 00:45:30 so this will then really allow you to
- 00:45:32 build any kind of app you want
- 00:45:34 with ionix help before we then dive into
- 00:45:37 styling and theming
- 00:45:38 because obviously you don't just want to
- 00:45:40 use components you want to make your app
- 00:45:42 look good and here you learn how to do
- 00:45:44 that with the help of ionic
- 00:45:46 and how to properly assign your own
- 00:45:49 style your own corporate identity
- 00:45:51 to an ionic and angular app or basically
- 00:45:53 to any ionic app you could say
- 00:45:56 well what would an app be without
- 00:45:58 fetching user input right
- 00:45:59 and that is indeed what we'll dive into
- 00:46:01 thereafter you will learn how to work
- 00:46:03 with
- 00:46:04 forms with angular forms in ionic apps
- 00:46:07 and how to use
- 00:46:08 ionic components input components in
- 00:46:10 these forms so how that works together
- 00:46:13 now whenever you gathered some data or
- 00:46:16 you
- 00:46:16 have some data in your application state
- 00:46:19 management becomes an issue
- 00:46:20 and therefore i have a whole module
- 00:46:22 dedicated on how you manage
- 00:46:24 state in an ionic angular application
- 00:46:26 before we then also dive into sending
- 00:46:29 http requests
- 00:46:30 so that you're not limited to just
- 00:46:32 managing data locally
- 00:46:34 on your device or in your app but that
- 00:46:36 you can also store it on servers
- 00:46:38 somewhere in the internet now when you
- 00:46:41 think about
- 00:46:42 typical native apps and that is still
- 00:46:44 one of the core focuses of ionic
- 00:46:46 building native apps
- 00:46:47 so if you think of such native apps what
- 00:46:50 often comes to mind is
- 00:46:51 using maps or the camera in there well i
- 00:46:54 will cover both in this course
- 00:46:56 and i will start by adding google maps
- 00:46:59 in a specific section
- 00:47:00 where i will show you how to add that
- 00:47:02 how to unlock the api and how to use
- 00:47:04 google maps from scratch
- 00:47:06 in an ionic app before we then dive into
- 00:47:09 native device
- 00:47:10 features in general like using the
- 00:47:12 camera or fetching the current user
- 00:47:14 location
- 00:47:15 now that is all nice but what would a
- 00:47:18 real app
- 00:47:19 be without some user authentication and
- 00:47:22 therefore i got a whole module
- 00:47:24 dedicated to showing you how to add
- 00:47:26 authentication
- 00:47:27 to your application once we did all that
- 00:47:31 we'll have quite a nice zap and that is
- 00:47:34 another important thing
- 00:47:35 throughout this course we build a
- 00:47:37 project a realistic
- 00:47:39 project and i will demo most of these
- 00:47:41 things
- 00:47:42 on that project there are some side
- 00:47:45 projects or
- 00:47:46 smaller demos as well but i believe you
- 00:47:48 learn the most
- 00:47:49 if you work on a concrete example on a
- 00:47:52 concrete
- 00:47:53 project and therefore this is what we'll
- 00:47:54 do in this course as well
- 00:47:56 and once we finish that project which
- 00:47:58 we'll have after the authentication
- 00:48:00 section
- 00:48:01 it is of course time to publish the app
- 00:48:03 and therefore in the publishing section
- 00:48:05 i will teach you
- 00:48:06 how you can get your application into
- 00:48:08 the google play store
- 00:48:10 into the apple app store or also publish
- 00:48:13 it as a web app because that is
- 00:48:15 something you can build with ionic and
- 00:48:16 angular 2.
- 00:48:17 you can ship a regular web app or even a
- 00:48:20 progressive web app which i will show to
- 00:48:22 you as well
- 00:48:24 and that's it we're then done and i will
- 00:48:26 conclude the course give you
- 00:48:28 some next steps but by that point by
- 00:48:31 that time you will have learned
- 00:48:33 all you need to build amazing ionic apps
- 00:48:36 and build up on the foundation you get
- 00:48:38 in this course
- 00:48:39 with the official docs with other
- 00:48:40 resources and of course by simply
- 00:48:43 building a ton of stuff and that will
- 00:48:45 enable you
- 00:48:46 to build any kind of app you want with
- 00:48:48 ionic and angular
- 00:48:50 so let's dive in
- 00:48:55 we all want to dive into the course now
- 00:48:58 and we will
- 00:48:58 but how do you get the most out of the
- 00:49:01 course because
- 00:49:02 that is really important to me i want
- 00:49:04 that you get the most for your money
- 00:49:05 possible now this is a video on the
- 00:49:08 month course so obviously you should
- 00:49:10 watch the videos go through them have a
- 00:49:13 look at them
- 00:49:14 and pause them if you need to take some
- 00:49:16 notes or if you're coding along
- 00:49:18 also take advantage of these udemy
- 00:49:21 playback controls in the video player
- 00:49:23 speed me up if i'm going too slow slow
- 00:49:25 me down if i'm going too fast
- 00:49:27 and jump back to videos you already
- 00:49:29 watched to go
- 00:49:30 through a concept again which wasn't
- 00:49:32 very clear to you that is a normal
- 00:49:34 process of learning and it is the
- 00:49:36 advantage of a video on demand course
- 00:49:38 you can go through it at your speed so
- 00:49:40 take advantage of that
- 00:49:42 now as i mentioned you should also code
- 00:49:44 along you learn the most by not just
- 00:49:47 watching me talk
- 00:49:48 but by really writing your own code and
- 00:49:50 for that pause the video
- 00:49:52 also try something on your own before
- 00:49:54 watching my solution
- 00:49:55 do the assignments you find in this
- 00:49:57 course and take advantage of all the
- 00:49:59 different tools you have here
- 00:50:01 now you will definitely also run into
- 00:50:03 errors
- 00:50:04 and you will learn in this course how to
- 00:50:06 debug errors and as always
- 00:50:08 i recommend that you should try to solve
- 00:50:10 errors on your own
- 00:50:12 because you'll learn the most if you fix
- 00:50:14 your own errors
- 00:50:15 google is your friend put your error
- 00:50:17 message into google
- 00:50:18 and often you will find a solution there
- 00:50:21 now
- 00:50:22 also dive into the official docs these
- 00:50:24 dogs are awesome and you find
- 00:50:26 all the built-in components there a lot
- 00:50:29 of useful guides and a lot of useful
- 00:50:31 resources
- 00:50:32 that teach you how to work with ionic
- 00:50:35 and
- 00:50:35 might help you understand why something
- 00:50:37 doesn't work the way you would think it
- 00:50:39 works because it's not
- 00:50:41 how the ionic team intended it to be
- 00:50:42 used for example
- 00:50:44 last but not least this course as all
- 00:50:47 udemy courses has a q and a
- 00:50:49 section where you can ask now only ask
- 00:50:52 if you have exhausted the other
- 00:50:54 resources also if you compared your code
- 00:50:57 to mine
- 00:50:58 attached to multiple lectures in this
- 00:51:00 course and always to the last lecture of
- 00:51:02 every module
- 00:51:03 you find snapshots of the code for this
- 00:51:06 module
- 00:51:07 take that code and compare it to yours
- 00:51:09 that also allows you to find and fix a
- 00:51:12 lot of
- 00:51:12 issues and only after you went through
- 00:51:15 all these steps
- 00:51:16 or when a certain concept is really
- 00:51:18 unclear
- 00:51:19 ask in the q a section but don't just
- 00:51:21 ask there
- 00:51:23 also answer help your fellow students
- 00:51:26 because just as with coding along if
- 00:51:28 you're forced to think about a problem
- 00:51:31 and solve it on your own
- 00:51:32 you get way more out of this than if you
- 00:51:35 just passively sit there
- 00:51:36 and ask and wait for help sometimes this
- 00:51:39 is necessary
- 00:51:40 but often you can make the difference by
- 00:51:42 helping our students not just personally
- 00:51:45 but also for you
- 00:51:46 because you will learn even more and if
- 00:51:49 you take all these things into account
- 00:51:50 you should be getting a lot out of this
- 00:52:02 course
- 00:52:05 now that we are all on the same page
- 00:52:07 regarding angular again
- 00:52:09 let's finally dive into ionic
- 00:52:12 and here with ionic since you learned
- 00:52:15 that ionic actually stands for a couple
- 00:52:17 of things
- 00:52:18 also the company which is developing
- 00:52:21 capacitor
- 00:52:22 but here with ionic i really mean that
- 00:52:25 suit of
- 00:52:25 web components which is the heart of
- 00:52:28 ionic and which
- 00:52:29 is what you use in every ionic app which
- 00:52:32 turns your app into
- 00:52:33 something you could call an ionic app
- 00:52:35 after all
- 00:52:36 so in this module we'll have a look at
- 00:52:39 these ionic components i'll give you a
- 00:52:41 furrow
- 00:52:42 overview of how to use them how to
- 00:52:45 configure
- 00:52:46 them how to compose beautiful user
- 00:52:48 interfaces with them
- 00:52:50 we'll dive into a lot of component demos
- 00:52:52 for that and build a tiny
- 00:52:54 sample application web application here
- 00:52:57 not a mobile app yet we'll do this later
- 00:53:00 but a dummy web application where we use
- 00:53:03 a couple of ionic components
- 00:53:05 and since we have so many ionic
- 00:53:08 components
- 00:53:09 i want to help you memorize them or
- 00:53:11 maybe i can even show you
- 00:53:13 a better way of learning about them and
- 00:53:16 understanding when to use which
- 00:53:18 component by the end of this module this
- 00:53:20 will be much clearer
- 00:53:26 before we dive into the components which
- 00:53:29 i mentioned would be the heart
- 00:53:31 of your ionic application let me go
- 00:53:34 through the core building blocks of a
- 00:53:36 typical ionic app though
- 00:53:38 and with that i really mean an app that
- 00:53:40 could run both on the web
- 00:53:41 or on a native device wrapped into a
- 00:53:45 native mobile app distributed for the
- 00:53:47 app stores
- 00:53:48 and here again these ui components these
- 00:53:51 ionic components
- 00:53:53 are one of the most important or
- 00:53:55 actually the
- 00:53:56 most important building block you need
- 00:53:59 in any ionic
- 00:54:00 app later in this course though we'll
- 00:54:03 also learn about things like
- 00:54:05 theming and styling which basically is
- 00:54:07 all about
- 00:54:08 adjusting the look of these components
- 00:54:11 because whilst
- 00:54:12 they look beautiful out of the box in
- 00:54:14 your specific application you will have
- 00:54:17 your own
- 00:54:18 style your own corporate identity you
- 00:54:21 wanna
- 00:54:21 show and you wanna use an ionic doesn't
- 00:54:24 stop you from doing so
- 00:54:26 just because these components look good
- 00:54:28 out of the box
- 00:54:29 does not mean that you can't style them
- 00:54:32 and we'll touch on this later in the
- 00:54:34 course
- 00:54:34 in a separate theming and styling module
- 00:54:37 because it's so important
- 00:54:39 now when we're building anything but a
- 00:54:41 very trivial
- 00:54:42 ionic app we'll also need to dive into
- 00:54:45 navigation
- 00:54:46 and that basically means that we want to
- 00:54:48 switch between different pages of our
- 00:54:50 app
- 00:54:51 now a page here doesn't technically mean
- 00:54:54 a new document fetched from a server
- 00:54:56 instead you typically build a so-called
- 00:54:58 single page application
- 00:55:00 where frameworks like angular or view or
- 00:55:03 libraries like react together with react
- 00:55:06 router drive the change of pages
- 00:55:09 and the rendering of different parts of
- 00:55:11 your app onto the screen
- 00:55:13 and in mobile apps as well there we also
- 00:55:16 know that concept of tapping something
- 00:55:18 seeing a new page and then tapping the
- 00:55:21 back button to go back
- 00:55:22 so this navigation process both in the
- 00:55:25 web and in a native app
- 00:55:26 that is also something we'll dive deeply
- 00:55:28 into in this course
- 00:55:30 now when we're building a bigger
- 00:55:32 application there will also be a point
- 00:55:34 of time
- 00:55:35 where we need to take care about state
- 00:55:37 management
- 00:55:38 and actually state management plays an
- 00:55:40 important role even in tiny apps but
- 00:55:42 there it's very simple
- 00:55:43 but the more complex your app gets the
- 00:55:46 harder state management becomes
- 00:55:48 and state management just in case you're
- 00:55:50 not sure what this means
- 00:55:52 really refers to the management of data
- 00:55:54 and of information
- 00:55:56 in your running app something like is
- 00:55:58 the
- 00:55:59 user currently sending a request and
- 00:56:01 should i show a spinner
- 00:56:02 that would be state or something like a
- 00:56:05 list of loaded products
- 00:56:06 that would be another form of state and
- 00:56:08 this is also something where
- 00:56:10 not ionic directly but frameworks like
- 00:56:13 angular can help us
- 00:56:14 and therefore we'll also dive into this
- 00:56:16 later in the course
- 00:56:19 now when we leave the web app world
- 00:56:22 and we plan on publishing our ionic app
- 00:56:25 as a real native app
- 00:56:26 through the app stores then we'll have
- 00:56:29 it wrapped in this
- 00:56:30 web view in this real native app shell
- 00:56:33 and we'll have this bridge to tap into
- 00:56:35 native device features like a camera
- 00:56:38 and that is another important building
- 00:56:40 block of ionic apps
- 00:56:41 now admittedly not so much of web apps
- 00:56:44 though you can tap into
- 00:56:45 some native device features there as
- 00:56:47 well as you will also learn in this
- 00:56:49 course
- 00:56:50 but mostly in native apps where you can
- 00:56:53 actually
- 00:56:53 access the entire bandwidth of native
- 00:56:56 device features something like
- 00:56:58 face id uh touch id or
- 00:57:01 the location of the user ends on all of
- 00:57:03 that is
- 00:57:04 possible and is made possible not by the
- 00:57:07 ionic component suit
- 00:57:08 but by capacitor which is also developed
- 00:57:11 by the ionic team
- 00:57:12 or alternatively cordova which is not
- 00:57:14 developed by them but which is supported
- 00:57:16 by ionic
- 00:57:18 and last but not least the cli and the
- 00:57:20 whole support you'll also get for the
- 00:57:22 build
- 00:57:23 workflow and for the publishing workflow
- 00:57:26 of your app
- 00:57:26 that also is part of the ionic world and
- 00:57:29 that is also what we'll have a look at
- 00:57:30 later in this course
- 00:57:32 but for now in this module we'll dive
- 00:57:34 into these ui components because as i
- 00:57:36 mentioned
- 00:57:36 no matter which app you're building and
- 00:57:38 no matter how it looks or how complex it
- 00:57:41 is
- 00:57:41 and if it's just a web app or both a web
- 00:57:43 app and a mobile app
- 00:57:45 you will use these components so let's
- 00:57:48 now dive into them
- 00:57:53 now how do we use these components in a
- 00:57:56 project where we
- 00:57:58 imported this ionic component
- 00:58:01 library and there are actually different
- 00:58:03 ways of importing it as you will also
- 00:58:05 learn in this course
- 00:58:06 so in a project where we have this
- 00:58:08 library imported
- 00:58:09 we have access to this core of ionic to
- 00:58:11 these components and we use them just
- 00:58:13 like
- 00:58:14 regular html elements and now that is
- 00:58:17 really important to understand if you
- 00:58:19 never worked with web components before
- 00:58:21 the term
- 00:58:22 might be or will be brand new to you and
- 00:58:24 you might not know how to work with them
- 00:58:26 well the thing is you just add them with
- 00:58:28 their tags
- 00:58:29 into your html code in the places where
- 00:58:32 you want to use them
- 00:58:33 just like regular html elements
- 00:58:36 and here is an example this would be the
- 00:58:39 iron button
- 00:58:40 basically a button provided by ionic
- 00:58:42 which wraps a native
- 00:58:44 normal html button and then adds some
- 00:58:46 extra styling and extra functionality to
- 00:58:48 it
- 00:58:49 and that's always important these web
- 00:58:51 components are not just about
- 00:58:52 pre-styled elements they do add
- 00:58:55 javascript logic to them as well or at
- 00:58:57 least they can and they often do
- 00:59:00 and then this button here can be
- 00:59:02 configured it can receive
- 00:59:03 attributes just as you can set
- 00:59:05 attributes on normal
- 00:59:07 html elements but of course the
- 00:59:09 attributes you can set here
- 00:59:10 and the properties you could set on this
- 00:59:12 button programmatically as well
- 00:59:14 depend on the exact web component you're
- 00:59:17 using because
- 00:59:18 all the things you can configure here
- 00:59:20 like the fill mode which defines which
- 00:59:22 style of button this is and the color
- 00:59:25 these are of course
- 00:59:26 things you can configure because the
- 00:59:28 ionic team made them configurable
- 00:59:31 and the official docs are the place to
- 00:59:34 go to learn
- 00:59:35 which attributes and properties you can
- 00:59:37 set
- 00:59:38 on these web components and i'll guide
- 00:59:41 you through these stocks later in this
- 00:59:42 module
- 00:59:44 so we use it like a normal html element
- 00:59:46 it supports attributes and properties
- 00:59:48 and these elements can also emit events
- 00:59:52 and that is also quite interesting um
- 00:59:55 you can emit your own events when you're
- 00:59:57 building your own web components
- 00:59:58 and therefore a lot of ionic components
- 01:00:02 actually also emit custom events to
- 01:00:04 which you can listen
- 01:00:05 something like a special eye and change
- 01:00:07 event for a select
- 01:00:09 drop down for example and we'll see some
- 01:00:11 of these events throughout the course
- 01:00:14 now under the hood such a button as i
- 01:00:16 mentioned
- 01:00:17 is in the end a combination of the three
- 01:00:20 core
- 01:00:21 drivers of front-end web development it
- 01:00:24 contains some html
- 01:00:25 code under the hood and here we have the
- 01:00:28 normal
- 01:00:29 regular by default supported html
- 01:00:32 elements and in the end all web
- 01:00:33 components are made up
- 01:00:35 of such vanilla html
- 01:00:38 elements now actually a web component
- 01:00:40 can be made up
- 01:00:42 of other web components as well but if
- 01:00:44 you dig down through all web components
- 01:00:46 the one at the bottom which doesn't
- 01:00:47 include other web components will only
- 01:00:50 include
- 01:00:50 normal html elements so that's important
- 01:00:54 to understand
- 01:00:54 such a web component is basically like a
- 01:00:57 wrapped up piece
- 01:00:58 of pre-structured html code
- 01:01:01 now we don't just have html code we also
- 01:01:04 have some css
- 01:01:05 styling and here you actually see
- 01:01:08 something special for the value for the
- 01:01:10 color this
- 01:01:10 war thing this is a css variable and
- 01:01:13 this makes
- 01:01:14 styling this web component from outside
- 01:01:17 and applying a general theme
- 01:01:18 very easy and we'll dive deeply into
- 01:01:20 this in the styling and theming module
- 01:01:22 of the course
- 01:01:24 but as i mentioned a web component is
- 01:01:25 not just a combination of
- 01:01:27 html and css we also have a javascript
- 01:01:30 portion in there
- 01:01:31 which adds certain functionalities to
- 01:01:34 that component
- 01:01:35 which exposes properties that can be set
- 01:01:38 which controls things like that we can
- 01:01:40 set
- 01:01:40 the color or the fill mode of that
- 01:01:43 button so all of that is controlled with
- 01:01:45 javascript
- 01:01:46 and this is all packaged up together and
- 01:01:49 basically
- 01:01:49 wrapped into a javascript object you
- 01:01:52 could say which you can add to the html
- 01:01:54 code to the dom
- 01:01:55 with this iron button selector now
- 01:01:59 under the hood this also uses a
- 01:02:01 technique called the shadow dom
- 01:02:02 and css variables which help with
- 01:02:05 encapsulating the styles of this
- 01:02:07 component
- 01:02:08 so that the styling applied to the
- 01:02:10 elements in this component
- 01:02:11 doesn't spill over to your app or to
- 01:02:13 other components
- 01:02:15 and the ionic web components actually
- 01:02:18 also automatically load any polyfills
- 01:02:20 that might be required
- 01:02:22 to make them run on older browsers
- 01:02:25 modern browsers support all the web
- 01:02:28 component features by default
- 01:02:30 older browsers don't and therefore ionic
- 01:02:33 actually makes sure that these
- 01:02:34 components work on older browsers
- 01:02:36 as well by automatically polyfilling
- 01:02:38 everything that is required
- 01:02:41 now that is as deep as i want to dive
- 01:02:43 into web components here because you
- 01:02:45 don't need to be able to build web
- 01:02:47 components to use them
- 01:02:49 if you want to build them and if you
- 01:02:50 want to understand everything here
- 01:02:52 you can take my web component with
- 01:02:54 stencil cores
- 01:02:56 stansley as i mentioned in the first
- 01:02:58 course module is a tool
- 01:03:00 developed by the ioniq company by the
- 01:03:02 ionic team
- 01:03:03 that they used internally to build all
- 01:03:05 these web components
- 01:03:07 it's the end a tool that just makes the
- 01:03:09 creation of web components easier
- 01:03:11 it still spits out normal vanilla web
- 01:03:14 components in the end
- 01:03:15 and you can use that tool too and in
- 01:03:17 this course i do cover it
- 01:03:18 now maybe also interesting to you ionic
- 01:03:21 is of course
- 01:03:21 open source and if you visit its
- 01:03:23 repository on github
- 01:03:25 here under ionic team ionic you can
- 01:03:28 always dive into this core
- 01:03:30 folder and inspect the source code of
- 01:03:33 the component you're interested in
- 01:03:35 for example if you select a button here
- 01:03:37 this is this iron button
- 01:03:38 component there you will always find a
- 01:03:41 tsx
- 01:03:42 file because stencyl uses typescript and
- 01:03:44 so on
- 01:03:45 and in this tsx file you see how in
- 01:03:48 stencil
- 01:03:49 this component was created and this is
- 01:03:51 not the code that gets imported into
- 01:03:53 your app when you include that component
- 01:03:56 this is the raw code which is actually
- 01:03:57 compiled to a native component by
- 01:03:59 stencil
- 01:04:00 you see the raw version here but if you
- 01:04:02 are learning stencil and you want to
- 01:04:04 understand what happens under the hood
- 01:04:06 you can always dive into the source code
- 01:04:08 of this component
- 01:04:09 and for example also see which
- 01:04:12 properties you can set there
- 01:04:13 things like the disabled property the
- 01:04:17 button type
- 01:04:18 the color and of course you can also see
- 01:04:20 this in a more convenient way in the
- 01:04:22 official docs
- 01:04:23 but i find it quite interesting to
- 01:04:25 sometimes dive into this
- 01:04:27 official source code to understand how
- 01:04:30 this actually works under the hood
- 01:04:31 and how it is in this case this button
- 01:04:34 is created
- 01:04:35 under the hood
- 01:04:40 so enough of the theory let's go back to
- 01:04:44 our course project and there we created
- 01:04:47 a simple project
- 01:04:49 in a module one where i used uh angular
- 01:04:52 with ionic to create this project what
- 01:04:55 i'll do now is
- 01:04:57 i will actually delete all the content
- 01:05:00 here
- 01:05:00 will later recreate such a project and i
- 01:05:04 will
- 01:05:04 start without angular i'll just add an
- 01:05:07 index
- 01:05:08 html file and here in vs code which is
- 01:05:11 the editor i'm using
- 01:05:12 i can create a new html5 skeleton by
- 01:05:16 typing html
- 01:05:18 and then simply hitting control space
- 01:05:20 and then selecting html5
- 01:05:22 and we get this skeleton here
- 01:05:25 now as a first simple dummy app here i
- 01:05:28 want to build a
- 01:05:29 budget planner basically a list that
- 01:05:32 allows us to add expenses and calculate
- 01:05:34 our total expenses so a very simple app
- 01:05:37 which will
- 01:05:38 still allow us to already use quite a
- 01:05:40 bit of these ionic components
- 01:05:43 now why am i using this without angular
- 01:05:46 because whilst we will use angular for
- 01:05:48 the rest of the course
- 01:05:50 one of the biggest strengths of these
- 01:05:52 ionic web components
- 01:05:53 is that they work without any framework
- 01:05:56 as well
- 01:05:57 and i want you to understand this and i
- 01:05:59 want to focus
- 01:06:00 solely on ionic here so that you don't
- 01:06:03 even have a chance of
- 01:06:04 thinking that this could be angular's
- 01:06:07 thing or that angular could be doing
- 01:06:09 something here
- 01:06:09 because we're not using angular in this
- 01:06:11 simple app but no worries
- 01:06:13 for the rest of the course we will use
- 01:06:14 it so here i want to use
- 01:06:17 just ionic and we can do that for this
- 01:06:20 you should visit ionicframework.com
- 01:06:23 and there developers ui components
- 01:06:26 click on guide here and then simply
- 01:06:29 choose
- 01:06:30 packages and cdn now here you learn how
- 01:06:33 you can add ionic to
- 01:06:35 an angular app but you'll also find this
- 01:06:38 cdn link here which you can add into
- 01:06:42 any html file to include the ionic
- 01:06:45 package
- 01:06:46 to it and with the ionic package i mean
- 01:06:49 this package of
- 01:06:50 pre-built ionic web components you
- 01:06:53 should add it here
- 01:06:55 at the end of your head section and you
- 01:06:57 can leave it just like this
- 01:06:59 and actually what's not mentioned here
- 01:07:01 at least not when i'm recording this
- 01:07:03 you don't just need the javascript
- 01:07:05 package you also want some default
- 01:07:06 styles
- 01:07:07 for this you can simply duplicate this
- 01:07:09 import but change it to
- 01:07:11 a link which you which has a rel
- 01:07:14 attribute of style sheet
- 01:07:17 and where you then set the ref attribute
- 01:07:20 and you should point at the same link
- 01:07:22 but then replace
- 01:07:24 this here with css
- 01:07:27 and instead of ionic.js you need to have
- 01:07:31 ionic.bundle.css
- 01:07:32 now we have both the styles and the
- 01:07:34 javascript code and we're now
- 01:07:36 ready to go and ready to start using
- 01:07:39 ionics components
- 01:07:45 now which ionic components can we add
- 01:07:49 there are over a hundred of pre-built
- 01:07:51 ionic components
- 01:07:52 and you find them all in the official
- 01:07:54 ionic docks
- 01:07:55 now definitely feel free to browse
- 01:07:58 through these docks and play around with
- 01:07:59 them
- 01:08:01 you can either do this here on the right
- 01:08:02 where you also have some nice
- 01:08:04 icons showing what this ionic does or
- 01:08:06 what it's used for
- 01:08:08 or just go through these grouped
- 01:08:09 components here on the left
- 01:08:11 now it's impossible to learn them all by
- 01:08:14 heart
- 01:08:14 you will learn them automatically by
- 01:08:16 using but use
- 01:08:18 these docs when you're building an app
- 01:08:19 really do that this is your go-to
- 01:08:22 reference
- 01:08:23 it's always up to date it's directly
- 01:08:25 generated from the source code actually
- 01:08:27 and therefore this is the place to go
- 01:08:30 for example if you inspect that button
- 01:08:31 here that iron button
- 01:08:33 here you even see an example a small
- 01:08:37 example not every component has this as
- 01:08:39 of now but some components do show you
- 01:08:41 an example for ios and material design
- 01:08:44 which is the android
- 01:08:45 style and you have a description here on
- 01:08:47 the left and you do have that for all
- 01:08:49 components
- 01:08:50 there you learn what this component does
- 01:08:53 how you use it
- 01:08:55 some general or important ways of
- 01:08:57 configuring it
- 01:08:58 like for example here setting the fill
- 01:09:00 mode to clear outline or
- 01:09:02 solid to define how the button looks
- 01:09:04 like you have some usage examples here
- 01:09:07 so simply some code examples with some
- 01:09:09 different
- 01:09:10 configurations please be aware that you
- 01:09:13 have both javascript and angular
- 01:09:15 versions
- 01:09:15 which for this code of course don't
- 01:09:17 differ though
- 01:09:18 and then you have a list of all the
- 01:09:20 properties and this is also generated
- 01:09:22 directly from the source code and there
- 01:09:24 you see which properties you can set
- 01:09:26 and you can set all these properties
- 01:09:28 also as attributes
- 01:09:30 on the element therefore and which
- 01:09:33 values you can pass in for every
- 01:09:34 attribute
- 01:09:35 so that should be very helpful in using
- 01:09:37 this you see custom events that are
- 01:09:39 emitted by this
- 01:09:41 component so non-default html events
- 01:09:44 that are emitted
- 01:09:45 you have access to the default ones like
- 01:09:47 click and so on
- 01:09:48 as well that is the case for all web
- 01:09:50 components
- 01:09:51 and that will become important later
- 01:09:53 when we dive into styling
- 01:09:54 you see which css properties you can
- 01:09:57 override for this component
- 01:09:58 to control its look so there is a lot of
- 01:10:02 stuff in there
- 01:10:03 definitely use these stocks now let's
- 01:10:06 use
- 01:10:06 these stocks and let's start creating
- 01:10:08 our little budget planner
- 01:10:15 in that budget planner here i want to
- 01:10:17 build a mobile
- 01:10:18 like looking application and i basically
- 01:10:21 want to have a header
- 01:10:23 some toolbar at the top which displays
- 01:10:25 the title of the app something like
- 01:10:27 budget planner
- 01:10:28 and then i want to have the main content
- 01:10:31 below that toolbar
- 01:10:32 where i essentially want to have a input
- 01:10:35 field where i can
- 01:10:36 enter um some titles some name some
- 01:10:40 description of an expense and then also
- 01:10:42 the value the amount of the expense
- 01:10:44 have a button which i can press and then
- 01:10:46 a list below of that
- 01:10:48 where i basically output all my expenses
- 01:10:50 and at the very bottom of that
- 01:10:52 maybe a little some where i see the
- 01:10:55 total some of the expenses
- 01:10:57 now for this if we have a look at the
- 01:10:59 official docs
- 01:11:01 um this iron app and iron content here
- 01:11:04 is important iron app should always wrap
- 01:11:06 your entire ionic app
- 01:11:08 and this basically just ensures that
- 01:11:10 some general stylings and behaviors are
- 01:11:12 set so we can already do that we can add
- 01:11:16 iron app in here and we only use this
- 01:11:18 once per html file you could say
- 01:11:22 or later if you use angular which all
- 01:11:24 runs on one at the same
- 01:11:25 single page one html file you only use
- 01:11:29 it
- 01:11:29 as a global wrapper in your root
- 01:11:31 component
- 01:11:32 you never use this anywhere else in
- 01:11:35 there
- 01:11:36 we can have our iron content and
- 01:11:39 this is a wrapper to our main
- 01:11:41 application content
- 01:11:43 now why would we add this because for
- 01:11:45 example this controls the scrolling and
- 01:11:47 make sure that our content generally
- 01:11:49 just works it is displayed correctly so
- 01:11:52 let's add iron content
- 01:11:54 but i also wanted to have a header so if
- 01:11:57 you go back to the official docs
- 01:11:59 and you scroll to the very bottom here
- 01:12:01 on the left you should find that
- 01:12:03 toolbar area and in the end it is such a
- 01:12:06 tool bar which i want to add
- 01:12:08 now as you can learn here if a toolbar
- 01:12:10 is placed in the iron header it will
- 01:12:12 appear fixed at the top of the content
- 01:12:14 and that is exactly what i want so
- 01:12:16 inside my iron app above of the iron
- 01:12:19 content
- 01:12:19 i'll add an iron header and in the iron
- 01:12:21 header i'll add my iron toolbar
- 01:12:24 now in that toolbar i want to have a
- 01:12:26 title and indeed here we see that i in
- 01:12:29 title
- 01:12:29 and that is a component that sets the
- 01:12:31 title of a toolbar
- 01:12:32 and we see a usage example here and i'm
- 01:12:35 basically just rebuilding this example
- 01:12:37 now
- 01:12:38 so inside of iron toolbar we can add i
- 01:12:40 in title
- 01:12:41 and name this budget planner
- 01:12:45 if i now save this let me double click
- 01:12:48 that index.html
- 01:12:50 file to just open it in the browser
- 01:12:54 and we should see something like this we
- 01:12:56 have this nice header at the top with
- 01:12:58 budget planner in here
- 01:12:59 and if we open the dev tools and we go
- 01:13:02 to that
- 01:13:03 mobile preview here by clicking this
- 01:13:04 icon in the chrome dev tools
- 01:13:06 we see that this also looks good on
- 01:13:09 mobile devices if we simulate them
- 01:13:12 now also interesting if we inspect an
- 01:13:15 element here
- 01:13:16 we see that here for example we have the
- 01:13:18 iron toolbar this is really rendered
- 01:13:20 into the dom web components are
- 01:13:22 a browser feature they're not emulated
- 01:13:24 like uh
- 01:13:25 like angular which in the end just gives
- 01:13:27 us a syntax that spits out normal html
- 01:13:30 code
- 01:13:30 this is normal html code now because the
- 01:13:33 browser natively supports it
- 01:13:35 but here we also see what's inside of
- 01:13:37 this toolbar for example
- 01:13:39 that under the hood a div gets rendered
- 01:13:41 and another div
- 01:13:43 and so on so you can dive into this here
- 01:13:46 as well
- 01:13:46 that shadow root here simply is related
- 01:13:49 to that shadow dom
- 01:13:50 concept i touched on earlier again if
- 01:13:52 you want to learn all about that
- 01:13:54 don't hesitate to dive into my full web
- 01:13:56 component and stencil course
- 01:13:58 but this is a good start now we can of
- 01:14:01 course not just
- 01:14:02 add these elements we can configure them
- 01:14:04 as well
- 01:14:06 and therefore let's go back to the
- 01:14:07 toolbar and i'm just showing you this
- 01:14:09 because i want you to get into the habit
- 01:14:11 of using these docs because it's so
- 01:14:13 important
- 01:14:14 i of course know what we could configure
- 01:14:16 there but i want you to understand it as
- 01:14:18 well
- 01:14:18 so let's go to the docs and there to the
- 01:14:20 toolbar and there we learn how we could
- 01:14:23 add buttons
- 01:14:24 something we'll also do later in the
- 01:14:25 course to for example have a button that
- 01:14:27 allows us to add
- 01:14:29 a new item and we see some general usage
- 01:14:32 examples
- 01:14:33 also with a back button which we'll
- 01:14:35 later need not right now
- 01:14:37 and if we scroll further down we see the
- 01:14:39 properties we can set
- 01:14:40 and i'm interested in that color
- 01:14:42 property which we can set to primary
- 01:14:44 secondary and so on to these base colors
- 01:14:47 which we can also overwrite and set our
- 01:14:50 own colors of course
- 01:14:51 and that is also something we'll do
- 01:14:52 later so let's go to the toolbar and add
- 01:14:55 a color of
- 01:14:56 primary maybe and if we do that
- 01:15:00 we save that and we go back to our
- 01:15:02 application and we reload
- 01:15:03 we now simply have this blue background
- 01:15:06 but please also note
- 01:15:07 that the title color also adjusted it's
- 01:15:10 now white
- 01:15:11 and the title of course is a separate
- 01:15:13 component so these components even work
- 01:15:15 together here which is of course pretty
- 01:15:17 cool
- 01:15:18 so that is our header now what about the
- 01:15:22 content
- 01:15:26 inside of that content i want to have my
- 01:15:30 input fields and a button to submit
- 01:15:32 whatever the user entered so to say
- 01:15:35 now again you can dive into the official
- 01:15:38 docs to
- 01:15:39 find out that there also is an iron
- 01:15:42 input
- 01:15:43 and you learn how to use that how to
- 01:15:45 configure it and how you can combine it
- 01:15:47 with a label for example
- 01:15:49 inside of an iron item as it turns out
- 01:15:51 to have a label next to it that
- 01:15:54 behaves in a certain way for example it
- 01:15:55 floats up when you click into the input
- 01:15:58 so we can also copy that code snippet to
- 01:16:00 add a couple of
- 01:16:01 components at the same time and drop it
- 01:16:04 in here
- 01:16:05 and turn the link up there in a
- 01:16:08 self-closing tag just so that i get
- 01:16:10 auto completion back and i can
- 01:16:12 reorganize the code automatically with a
- 01:16:14 shortcut
- 01:16:15 so that's all i did here change the link
- 01:16:16 to self-close itself
- 01:16:18 so back to what we added we added the
- 01:16:20 iron item here with a label of position
- 01:16:22 floating
- 01:16:23 and the text on the label here should
- 01:16:25 actually say
- 01:16:27 um expense reason let's say you can of
- 01:16:30 course enter any text you want
- 01:16:31 and below that i'll have an iron input
- 01:16:34 where i'll set the type
- 01:16:36 attribute to text of course you find
- 01:16:38 that in the official docs that you
- 01:16:40 um can do that and if i now save that
- 01:16:45 and i reload the app we see our input
- 01:16:47 here where i can enter
- 01:16:48 an expense reason now that is sweet
- 01:16:52 let's also add another input below it
- 01:16:57 where i will say expense
- 01:17:00 amount and here this will be of type
- 01:17:05 number because users should only be able
- 01:17:07 to enter numbers here
- 01:17:09 now if we save that and we reload we see
- 01:17:11 that second input below the first one
- 01:17:14 so that is nice but what if we actually
- 01:17:17 would want to wrap this
- 01:17:19 in let's say a little box instead of
- 01:17:22 having it go
- 01:17:23 across the full width of the screen
- 01:17:25 which looks especially strange
- 01:17:26 on bigger screens well that is no
- 01:17:29 problem
- 01:17:30 we can put it into a so-called card and
- 01:17:33 you might notice card look from other
- 01:17:35 pages it's pretty popular these days
- 01:17:37 as always you'll learn how to use it
- 01:17:39 here in the official docs
- 01:17:42 we can just add our iron card element
- 01:17:45 here
- 01:17:46 and then take whatever should be in
- 01:17:48 there
- 01:17:49 and not add it directly in it like this
- 01:17:51 but add a iron card content
- 01:17:53 again something you learn with the help
- 01:17:55 of the official docs or
- 01:17:57 in this course now and in that iron card
- 01:17:59 content i have my
- 01:18:01 iron items now inside of the iron card
- 01:18:05 but outside of the iron card content
- 01:18:07 i'll also add another element supported
- 01:18:10 by
- 01:18:10 ionic which is the ion card header and
- 01:18:14 this allows us to set a nice title in
- 01:18:15 there
- 01:18:16 by adding an iron card title inside of
- 01:18:18 that iron card header
- 01:18:20 and i'll just add a title of new expense
- 01:18:23 here
- 01:18:25 now with that iron card added qd
- 01:18:28 app here if we now reload
- 01:18:31 we have this nice card look with our
- 01:18:34 input sitting in that box here which is
- 01:18:36 quite neat in my opinion
- 01:18:39 it still spans across the full width on
- 01:18:41 bigger screens though so what can we do
- 01:18:44 about that
- 01:18:50 now to find a solution for the problem
- 01:18:52 of our components sometimes not having
- 01:18:54 the right width
- 01:18:55 on different screen sizes it's important
- 01:18:58 to understand
- 01:18:59 that ionic in its core has three
- 01:19:02 different
- 01:19:02 types of components and now these are
- 01:19:05 categories i came up with it's not an
- 01:19:07 official turn but
- 01:19:08 i think it helps if you think about
- 01:19:10 these components in these terms
- 01:19:12 we have components that help us with the
- 01:19:14 output of data
- 01:19:16 we have components that help us with
- 01:19:19 layouting the page and
- 01:19:20 organizing and ordering components and
- 01:19:23 we have components that help us
- 01:19:25 with getting user input output
- 01:19:28 components would be things like iron
- 01:19:30 image iron batch
- 01:19:31 iron label iron title iron toolbar
- 01:19:35 iron alert so basically components that
- 01:19:37 mostly display things
- 01:19:39 now obviously in that list there are
- 01:19:41 some things like iron alert where the
- 01:19:43 user can
- 01:19:43 also press a button and interact with it
- 01:19:46 so of course this component kind of does
- 01:19:48 both but generally these components are
- 01:19:50 mostly focused on
- 01:19:52 getting something onto the screen which
- 01:19:54 we want to display to the user
- 01:19:56 layout components are not directly
- 01:19:59 themselves visible but their effect is
- 01:20:01 visible
- 01:20:02 because they basically allow us to
- 01:20:05 structure content
- 01:20:06 things like iron grid which we haven't
- 01:20:09 used yet but which we'll use in a second
- 01:20:11 iron list iron tabs so basically
- 01:20:15 components that
- 01:20:16 sometimes all they have they're visible
- 01:20:18 parts like iron card but which
- 01:20:20 also are important for grouping things
- 01:20:23 together
- 01:20:23 ordering uh elements in a certain way
- 01:20:26 and last but not least input components
- 01:20:29 like iron button iron input
- 01:20:31 iron text area so all these components
- 01:20:34 that mostly are there for the user to
- 01:20:36 interact with
- 01:20:37 to type something to click something to
- 01:20:39 tap a button
- 01:20:42 these are three important categories and
- 01:20:44 we had a look at
- 01:20:45 elements from all these categories now
- 01:20:47 since we have a component that is too
- 01:20:50 wide
- 01:20:50 we want to shrink that size of the card
- 01:20:53 we will
- 01:20:54 probably need some more help from the
- 01:20:56 layout box
- 01:20:57 now i already did put iron card in there
- 01:20:59 you could also put it into the output
- 01:21:01 box and it kind of does both
- 01:21:03 it outputs something with some default
- 01:21:06 styling but it also groups the things
- 01:21:08 together
- 01:21:09 but what will definitely help us here is
- 01:21:11 the iron grid
- 01:21:17 as always you can have a look at the
- 01:21:19 official docs to learn more about the
- 01:21:21 iron grid
- 01:21:22 and actually there you are linked to a
- 01:21:24 complete article about the grid layout
- 01:21:25 where you can learn
- 01:21:26 all the details about it but there is no
- 01:21:28 need to do that right now
- 01:21:30 i'll dive deeply into the grid in a
- 01:21:32 separate section later in the course
- 01:21:34 because it's
- 01:21:35 such a complex not difficult but
- 01:21:38 feature-rich
- 01:21:39 component and a component that can be
- 01:21:42 very useful
- 01:21:43 when you're planning to build an app
- 01:21:44 that should run on both mobile devices
- 01:21:47 and on desktop machines as well we can
- 01:21:50 use the grid here
- 01:21:51 to shrink the size of this card on
- 01:21:54 bigger screen sizes
- 01:21:56 for that let's go back to the source
- 01:21:57 code and in iron content
- 01:22:00 around the content where i want to
- 01:22:01 control the size
- 01:22:03 you can add the iron grid component
- 01:22:07 however you don't just stick your
- 01:22:09 content that should resize in there
- 01:22:11 because how would ioniq know how to
- 01:22:13 resize it
- 01:22:14 instead a grid consists of rows so
- 01:22:17 called i and row elements here
- 01:22:19 and each row has one or multiple iron
- 01:22:22 columns
- 01:22:24 so rows and columns make up a grid and
- 01:22:26 now for a column you can define the size
- 01:22:29 of this column
- 01:22:30 which of course helps you define the
- 01:22:32 size of the content
- 01:22:34 because it's the iron column that holds
- 01:22:36 the content you want to render
- 01:22:38 so this iron card i'll cut it and move
- 01:22:41 it into this iron column here
- 01:22:43 and now on this item column we can use
- 01:22:45 default
- 01:22:46 properties and attributes we can set on
- 01:22:48 this element which you find in the
- 01:22:50 official docs
- 01:22:51 for example we can set a size attribute
- 01:22:54 we can set this to let's say
- 01:22:55 6. now by default a column
- 01:22:59 is able to have a size of 1 to 12. you
- 01:23:02 could overwrite this but the default is
- 01:23:04 1 to 12
- 01:23:05 which means it either takes 1 12
- 01:23:08 of the entire width or the total width
- 01:23:11 and 6 therefore takes half the available
- 01:23:13 width
- 01:23:14 if i now save this and i go back to my
- 01:23:18 app and
- 01:23:18 reload we see that shrank it's now
- 01:23:22 smaller it's only half as
- 01:23:23 wide as the screen but of course on a
- 01:23:26 smaller device this looks super ugly now
- 01:23:29 so how can we get the best of both
- 01:23:31 worlds have a full
- 01:23:32 width look on the smaller device and
- 01:23:36 take
- 01:23:36 half the width on a bigger screen
- 01:23:39 well for that we can actually use
- 01:23:43 specialized forms of these attributes
- 01:23:45 instead of setting
- 01:23:46 size equals 6 we can set size
- 01:23:50 md equal to 6. now supported is
- 01:23:54 xs that stands for extra small sm for
- 01:23:57 small
- 01:23:58 md for medium and lg for large
- 01:24:01 and this allows you to set the size for
- 01:24:03 different screen sizes
- 01:24:04 now the break points for these sizes can
- 01:24:07 be found in the official docs
- 01:24:08 and you can also overwrite them and md
- 01:24:11 should be looking quite good here
- 01:24:13 so if we now save this and i reload this
- 01:24:16 on the mobile view
- 01:24:18 you see we have the full width design
- 01:24:20 back on bigger screens though
- 01:24:22 it only takes half the width now of
- 01:24:24 course it would be nice to have this
- 01:24:26 centered
- 01:24:26 and turns out you can do this pretty
- 01:24:28 easy as well you can
- 01:24:30 add our offset property and set this to
- 01:24:32 free
- 01:24:33 because we have 12 columns available
- 01:24:36 this has a width of six
- 01:24:37 so we want to have three columns of on
- 01:24:39 the left and three columns on the right
- 01:24:41 and this offsets it by three columns to
- 01:24:44 the left
- 01:24:46 and of course i don't want to offset it
- 01:24:47 on all screen sizes but
- 01:24:49 only on medium screen sizes and higher
- 01:24:52 that's important when you add size
- 01:24:55 medium or offset medium
- 01:24:56 or any other breakpoint like size sm
- 01:24:59 offset sm then this counts for this
- 01:25:02 screen size
- 01:25:03 so for medium sized screens and bigger
- 01:25:06 screens
- 01:25:06 so it's always like a minimum condition
- 01:25:08 you could say
- 01:25:10 so now with this configuration size md
- 01:25:13 equals six and offset md equal three
- 01:25:16 if we reload this it's now nicely
- 01:25:18 centered on bigger screens
- 01:25:19 and on smaller screens we still have the
- 01:25:21 full available
- 01:25:23 width and that is exactly the look i
- 01:25:25 want here
- 01:25:26 now again the grid has a lot of
- 01:25:28 configuration
- 01:25:29 possibilities and therefore we'll have
- 01:25:32 an entire module where we
- 01:25:34 spend a lot of time on the grid and i
- 01:25:36 will not dive super deep into it right
- 01:25:38 now
- 01:25:39 i just want you at this point to
- 01:25:42 understand
- 01:25:43 that we have different categories of
- 01:25:45 components
- 01:25:46 and that you will have different tools
- 01:25:48 for whether you want to
- 01:25:50 output some content listen to input or
- 01:25:53 you want to change the structure
- 01:25:55 or size or order of your elements
- 01:25:58 on the screen and the grid as well as a
- 01:26:01 couple of other layout components
- 01:26:03 can be really helpful with that
- 01:26:09 so the application is taking shape and
- 01:26:11 it's looking
- 01:26:12 really nice in my opinion even though we
- 01:26:14 haven't written a single line of css yet
- 01:26:17 because of these beautiful default
- 01:26:19 styles ionic gives us
- 01:26:20 and i hope you already get a feeling for
- 01:26:22 how easy it is to compose a rich
- 01:26:24 user interface with nice looking and as
- 01:26:27 you will see
- 01:26:28 quite powerful and feature-rich
- 01:26:30 components with
- 01:26:31 little effort i'm explaining a lot here
- 01:26:34 but code wise we haven't written that
- 01:26:35 much code
- 01:26:36 and we only worked in html
- 01:26:40 so we got our card with the two items
- 01:26:42 here now i also want to have a button
- 01:26:44 to submit my inputs here we use the
- 01:26:48 button before
- 01:26:49 we can add a iron button element here
- 01:26:51 and on that button i want to have a text
- 01:26:54 of
- 01:26:54 add expense but i'll actually add two
- 01:26:56 buttons
- 01:26:57 so i'll duplicate this because i also
- 01:26:59 want to have a clear button here
- 01:27:01 now if we save it just like this without
- 01:27:03 any further configuration
- 01:27:05 then if we reload the app we'll get two
- 01:27:08 buttons that look like this
- 01:27:09 not ugly but maybe you also want to
- 01:27:12 tweak this and have a different look
- 01:27:14 for example i want my clear button here
- 01:27:16 to have a red
- 01:27:17 color and this outlined look where it
- 01:27:20 doesn't have a background color but only
- 01:27:22 a border
- 01:27:23 and a text color and i also want to have
- 01:27:25 an icon in there an
- 01:27:27 icon that kind of signals that this
- 01:27:29 cancels the input and clears the fields
- 01:27:31 and on the expense button i want to have
- 01:27:33 a icon too a plus icon
- 01:27:35 and yeah i want to leave the style as it
- 01:27:38 is otherwise
- 01:27:39 now for this let's start with the clear
- 01:27:43 button
- 01:27:44 we can set the fill mode to outline
- 01:27:48 alternative values can of course be
- 01:27:50 found in the official docs as for all
- 01:27:52 components
- 01:27:53 there if you explore the iron button you
- 01:27:56 said that the fill mode can be set to
- 01:27:58 clear
- 01:27:58 to have neither a background nor a
- 01:28:00 border to outline to have just a border
- 01:28:03 or to solid to have a background color
- 01:28:05 so here i'm going with
- 01:28:07 outline and regarding the color we get
- 01:28:10 these
- 01:28:10 nine default colors primary tertiary and
- 01:28:13 so on
- 01:28:14 i can set this to danger here which is
- 01:28:16 one of the default colors
- 01:28:17 which will apply my default danger color
- 01:28:20 which turns out
- 01:28:21 by default to be red and of course you
- 01:28:23 could change that
- 01:28:24 but for now let's go with the default
- 01:28:27 and if we therefore reload this
- 01:28:29 we have this look now and please note
- 01:28:31 that on an android device up here
- 01:28:33 you need to reload if you switch to it
- 01:28:35 for the first time we actually also get
- 01:28:37 this nice
- 01:28:38 ripple effect super
- 01:28:41 now what about the icons now there is a
- 01:28:44 built-in
- 01:28:45 iron icon component
- 01:28:49 here you go now actually this will
- 01:28:51 redirect you to a brand new page because
- 01:28:53 you could add this to any app
- 01:28:56 as a separate package but the ionic
- 01:28:58 package we're importing from the cdn
- 01:29:01 actually has it included already so no
- 01:29:03 need for an extra import it's in here
- 01:29:06 and we simply throw our icon into our
- 01:29:09 button
- 01:29:10 if you want to use it there or wherever
- 01:29:12 you want to use it in your
- 01:29:13 app so i can add my iron icon in here
- 01:29:16 just like this right in front of the
- 01:29:18 clear word
- 01:29:20 now such a icon takes a name attribute
- 01:29:23 and the name in turn can be found from
- 01:29:25 this ironicans.com page
- 01:29:28 now if you search for clear here that
- 01:29:31 doesn't look good
- 01:29:32 but what about cancel or delete
- 01:29:36 well what about this cross now if we
- 01:29:39 click on that cross here
- 01:29:40 you see the full markup down there and
- 01:29:43 you see that name here
- 01:29:44 is actually close so let's go back
- 01:29:48 and let's enter close here as our icon
- 01:29:50 name
- 01:29:52 now with that i and i can add it and the
- 01:29:54 file saved once you reload the page
- 01:29:56 you will see your icon here and this
- 01:29:58 doesn't look too bad
- 01:30:00 but you can even improve the look a
- 01:30:02 little bit by clearly telling the icon
- 01:30:05 where it should
- 01:30:06 go into the button and you can do this
- 01:30:08 with a concept called
- 01:30:09 slots now slots are a default web
- 01:30:13 component concept
- 01:30:14 which basically allows web components to
- 01:30:16 reserve certain places in their
- 01:30:18 built-in markup where certain content
- 01:30:21 should be rendered or can be targeted
- 01:30:23 to be rendered and as always if there
- 01:30:27 are slots you can learn about them in
- 01:30:28 the official docs
- 01:30:30 so here in the uh button docs here
- 01:30:34 you find examples for buttons with icons
- 01:30:37 and different slots they target
- 01:30:40 so with that information here on our
- 01:30:43 icon you can add a slot of start for
- 01:30:46 example
- 01:30:48 and if you do that if you add that slot
- 01:30:50 start
- 01:30:52 you see the button is now the icon is
- 01:30:54 now a little bit further on the left we
- 01:30:55 have more spacing between the icon and
- 01:30:57 the text it looks a bit cleaner now
- 01:31:01 feel free to add a icon to add expense
- 01:31:04 on your own now
- 01:31:06 find a fitting icon here on the ionicons
- 01:31:08 page it should be an icon that kind of
- 01:31:10 signals that we can add something
- 01:31:12 and then try adding it to that button
- 01:31:15 we'll of course all
- 01:31:16 do it together but here's your chance to
- 01:31:18 pause the video
- 01:31:19 and try it on your own
- 01:31:23 were you successful let's first of all
- 01:31:26 find a fitting icon shall we
- 01:31:28 so here on ionicons if i search for add
- 01:31:31 what about this plus button of course if
- 01:31:34 you used a different one that's fine too
- 01:31:36 now here we find the the code for that
- 01:31:39 and we can just copy that from down
- 01:31:41 there
- 01:31:42 and then go back to our source code and
- 01:31:45 next
- 01:31:45 to add expense
- 01:31:49 i will add my icon with the add button
- 01:31:52 or with the add look now just as for the
- 01:31:55 close button i'll assign it to my start
- 01:31:58 slot
- 01:31:58 to adjust the spacing and generally make
- 01:32:01 sure that the button looks good
- 01:32:03 so with this added if we now reload here
- 01:32:06 is
- 01:32:07 the plus button so these are the buttons
- 01:32:10 added
- 01:32:11 what about some spacing around the
- 01:32:13 buttons and maybe we want to have them
- 01:32:15 aligned to the right actually how could
- 01:32:18 this be achieved
- 01:32:23 to control general things like a margin
- 01:32:26 around elements or paddings inside of
- 01:32:28 elements or
- 01:32:29 positioning inside of a container of a
- 01:32:31 box
- 01:32:32 you can use a utility feature provided
- 01:32:35 by ionic
- 01:32:36 or some utility features to be precise a
- 01:32:39 couple of utility css classes or
- 01:32:42 attributes you can add to elements to
- 01:32:44 have some default css kick in
- 01:32:46 you find that in the official guide
- 01:32:49 there under
- 01:32:50 layout by clicking on css utilities
- 01:32:53 now here you find a bunch of examples
- 01:32:55 and these are all
- 01:32:56 attributes you just add onto an element
- 01:32:59 to automatically apply some css styling
- 01:33:02 to it
- 01:33:02 that's a feature made available by ionic
- 01:33:05 out of the box
- 01:33:06 this allows us to for example add a
- 01:33:09 simple
- 01:33:09 diff yes we can use normal html elements
- 01:33:12 in there too you're not restricted to
- 01:33:14 using ionic elements only
- 01:33:16 so i add a normal div here around my
- 01:33:19 buttons
- 01:33:20 and what we can do there is we can add a
- 01:33:22 margin to add a margin in all directions
- 01:33:25 or just margin vertical and you can find
- 01:33:28 all of that
- 01:33:29 in this utilities documentation here
- 01:33:33 so margin vertical to add a margin to
- 01:33:35 top and bottom
- 01:33:36 and then to position the buttons on the
- 01:33:38 right you can add
- 01:33:40 text right here for example with that
- 01:33:44 simple trick
- 01:33:45 still no line of css written from our
- 01:33:47 site
- 01:33:48 we can add such a default look and this
- 01:33:50 looks quite nice in my opinion
- 01:33:52 now please note that this also has the
- 01:33:55 advantage of
- 01:33:56 always adding the same default margin
- 01:34:00 so this means that you don't have to
- 01:34:02 worry about
- 01:34:03 assigning a margin that is too slim and
- 01:34:05 therefore doesn't fit into the general
- 01:34:07 look of the rest of the page
- 01:34:08 or anything like this you can of course
- 01:34:11 overwrite the default
- 01:34:12 margin ionic assumes and sets but
- 01:34:15 thereafter
- 01:34:16 whenever you throw margin vertical or
- 01:34:18 margin or anything like this onto an
- 01:34:20 element
- 01:34:21 you will use this default look this
- 01:34:22 default margin
- 01:34:24 and that helps you keep a general look
- 01:34:27 uh
- 01:34:27 standardized look in your application
- 01:34:35 now this is all taking shape it's now
- 01:34:37 time to add some
- 01:34:38 logic and with logic i mean write some
- 01:34:41 code that does something when either of
- 01:34:43 these buttons is clicked
- 01:34:44 now of course later we'll do this with
- 01:34:46 the help of angular in this course
- 01:34:48 but as i mentioned multiple times you
- 01:34:50 don't need to do that with angular
- 01:34:53 this here will work with vanilla
- 01:34:55 javascript as well because we're just
- 01:34:57 throwing a couple of web components into
- 01:34:58 our app we can interact with them just
- 01:35:00 as we can do
- 01:35:01 with normal html elements and that by
- 01:35:04 the way of course is also the reason
- 01:35:06 why you can use ionic 4 and later
- 01:35:09 versions with angular with vue with
- 01:35:11 react with whichever framework you want
- 01:35:15 now let's add a app.js file here and you
- 01:35:18 can name the file however you want of
- 01:35:20 course
- 01:35:20 and let's import that file at the end of
- 01:35:23 our html file
- 01:35:24 right before the closing body tag here
- 01:35:26 with a script
- 01:35:27 import script source app.js so that this
- 01:35:31 will now
- 01:35:31 execute when this file is parsed and in
- 01:35:34 here i want to get access to my inputs
- 01:35:36 to read the values in them
- 01:35:38 i want to get access to my buttons to
- 01:35:40 add click listeners to them
- 01:35:42 and of course i also want to output
- 01:35:45 some data we entered below this
- 01:35:48 card so here we're actually
- 01:35:52 outside of this column and row so
- 01:35:55 first of all to get access to the inputs
- 01:35:57 in the button i will
- 01:35:58 add ids to them you could add css
- 01:36:01 classes or
- 01:36:02 use the tag selectors though since we
- 01:36:04 have multiple ion inputs using the tag
- 01:36:06 selector to get
- 01:36:07 access to them which work but would be a
- 01:36:10 bit more tricky
- 01:36:11 so here i'll just give this a reason or
- 01:36:14 input reason id this here will get an
- 01:36:18 id of input
- 01:36:22 amount and for the buttons here this
- 01:36:25 first button will get an id
- 01:36:27 of button cancel
- 01:36:30 and the second button down there this
- 01:36:33 one will get an id
- 01:36:34 of button confirm now obviously you can
- 01:36:38 use any id names you want
- 01:36:39 this is not an ionic feature these are
- 01:36:42 regular html ids
- 01:36:44 with these ids assigned let's go into
- 01:36:47 app.js
- 01:36:48 and store references to these elements
- 01:36:51 in some constants
- 01:36:52 like the reason input here
- 01:36:56 we can get access to it by using
- 01:36:57 document query selector
- 01:37:00 and then hashtag to use the id selector
- 01:37:02 input
- 01:37:03 reason and of course this here
- 01:37:07 this text here this name here should
- 01:37:09 match the id name you assigned here
- 01:37:11 input reason next we'll get access to
- 01:37:14 input amount
- 01:37:15 and for that let me just duplicate this
- 01:37:18 line here name this amount input and get
- 01:37:21 access to input amount
- 01:37:23 so these are the two inputs of course i
- 01:37:25 also want to get access to my buttons
- 01:37:26 so i'll have my cancel button which i
- 01:37:29 get access to with document
- 01:37:31 query selector and then hashtag button
- 01:37:35 cancel was the id i assigned and last
- 01:37:38 but not least the
- 01:37:39 confirm button with document query
- 01:37:42 selector
- 01:37:43 hashtag button confirm so now
- 01:37:46 access to all these uh elements is or
- 01:37:50 not access references to all these
- 01:37:52 elements are stored
- 01:37:54 in this vanilla javascript code i'm
- 01:37:56 writing here
- 01:37:57 i can now of course add my listeners
- 01:38:00 to the confirm button for example we can
- 01:38:03 add an event listener to the click event
- 01:38:05 and then this function here will get
- 01:38:08 executed once we click on the button
- 01:38:10 and for now we can just console.log it
- 01:38:13 works
- 01:38:13 to check well whether it works
- 01:38:17 so let me open the javascript console
- 01:38:19 here
- 01:38:20 on the right reload and click add
- 01:38:24 expense
- 01:38:25 and you should see it works now if you
- 01:38:27 wired this all up
- 01:38:28 correctly now that is perfect as a next
- 01:38:32 step let's make sure we
- 01:38:33 actually read the values we store in
- 01:38:35 here
- 01:38:36 and that we then well are able to
- 01:38:38 validate them
- 01:38:40 and output them below our card here
- 01:38:47 so with our first logic added here let's
- 01:38:49 now make sure that when we click this
- 01:38:51 confirm button
- 01:38:52 we do store the title or the description
- 01:38:55 of the expense the reason
- 01:38:57 and also the amount so for this
- 01:39:01 i'll add a constant entered reason here
- 01:39:05 where i access the reason input and
- 01:39:07 since this is an
- 01:39:08 input element it will have a value
- 01:39:10 property we can read to
- 01:39:12 get the value the user entered i'll also
- 01:39:14 store the entered
- 01:39:16 amount by accessing the amount input and
- 01:39:19 well then having a look at the value
- 01:39:21 there
- 01:39:22 now we could continue with these values
- 01:39:24 but i want to make sure that the user
- 01:39:25 did
- 01:39:26 enter valid values and for that we can
- 01:39:29 add our own simple validation logic by
- 01:39:31 adding a if check here
- 01:39:33 and if the entered reason here
- 01:39:37 when we trim that which will remove
- 01:39:39 excess white space at the beginning at
- 01:39:41 the end
- 01:39:42 if the length is then smaller or equal
- 01:39:45 to zero then the user didn't enter
- 01:39:47 anything
- 01:39:48 also if the entered
- 01:39:51 amount is smaller or equal to zero so
- 01:39:54 not its length but the real value
- 01:39:56 then the user entered a negative or a
- 01:39:59 zero
- 01:40:00 expense amount which is not a valid
- 01:40:02 amount or
- 01:40:03 last but not least if for the entered
- 01:40:05 amount when we trim it
- 01:40:08 if then its length is smaller or equal
- 01:40:11 to zero then the field is simply left
- 01:40:13 empty
- 01:40:15 so now i have this check and for now
- 01:40:17 i'll
- 01:40:18 just return here to basically stop the
- 01:40:20 execution of this function
- 01:40:22 and not continue any further if the
- 01:40:24 values are invalid
- 01:40:26 now if the values are valid then i want
- 01:40:29 to continue
- 01:40:30 and for now i can then console.log
- 01:40:33 entered reason and entered
- 01:40:36 amount here so let's go back
- 01:40:40 reload this page and enter a reason here
- 01:40:44 food for let's say 12.99
- 01:40:48 and add this expense and we see food
- 01:40:50 12.99 here
- 01:40:51 on the right of course seeing it here in
- 01:40:53 the console is
- 01:40:55 nice but not all we want now before we
- 01:40:57 continue though
- 01:40:58 let me check the validation if i don't
- 01:41:00 enter an expense
- 01:41:01 uh reason then you see nothing gets
- 01:41:03 printed on the right so this works
- 01:41:06 and if i enter let's say a value of zero
- 01:41:08 and a
- 01:41:09 valid reason here then this also doesn't
- 01:41:13 get printed with the expense amount of
- 01:41:15 one it does
- 01:41:16 so our validation works now let's make
- 01:41:18 sure we actually create ionic elements
- 01:41:21 dynamically in javascript code
- 01:41:23 to then attach them below our card and
- 01:41:26 render them with our entered reason and
- 01:41:30 amount
- 01:41:33 so i want to render a list of all these
- 01:41:35 expenses
- 01:41:36 below my card here now please keep in
- 01:41:39 mind we are in the iron grid with rows
- 01:41:41 and columns
- 01:41:42 and i added this to control the width of
- 01:41:44 my elements in the grid
- 01:41:46 the list which i want to render also
- 01:41:48 should have its width controlled
- 01:41:50 it should not take the full page width
- 01:41:52 on big screens
- 01:41:54 so i will add a new ion row beneath the
- 01:41:56 first one
- 01:41:58 with a new ion column inside of it
- 01:42:02 and in that iron column here
- 01:42:05 i want to render a so-called iron list
- 01:42:10 now i'll give this list an id of
- 01:42:13 expenses
- 01:42:16 list because i want to access this list
- 01:42:18 programmatically
- 01:42:19 and render items into it now iron list
- 01:42:22 here
- 01:42:23 is an element provided by ionic that
- 01:42:27 helps us structure
- 01:42:28 well list data so basically structure
- 01:42:31 elements
- 01:42:32 beneath each other and displaying it as
- 01:42:35 a well nice
- 01:42:36 list you can actually also add other
- 01:42:38 features like sliding list items and
- 01:42:41 these are all things we'll dive into the
- 01:42:43 course later
- 01:42:44 for now let's just go with the list like
- 01:42:46 this and add it just like that
- 01:42:48 and let's add some logic to add an iron
- 01:42:51 item dynamically to that list
- 01:42:53 so in app.js i want to get access to
- 01:42:56 this
- 01:42:56 list of expenses so my expenses
- 01:43:00 list here is fetched or a reference to
- 01:43:03 it is fetched with query selector
- 01:43:04 hashtag
- 01:43:06 expenses list so the id i added to the
- 01:43:08 expenses list now we can use this
- 01:43:10 reference to add new items to it
- 01:43:12 and i want to add new items here where i
- 01:43:15 currently console log the
- 01:43:16 entered reason and amount i'll create a
- 01:43:19 new
- 01:43:20 item with document create element which
- 01:43:23 is a default
- 01:43:24 dom api has nothing to do with ionic
- 01:43:26 that allows us to create
- 01:43:27 new html elements and now the nice thing
- 01:43:30 is
- 01:43:31 these web components these custom html
- 01:43:33 elements
- 01:43:34 can be created just like regular html
- 01:43:37 elements so here we can enter iron item
- 01:43:40 which is the selector
- 01:43:41 or the tag provided by ionic for this
- 01:43:44 well item element and we used the ion
- 01:43:48 item before
- 01:43:49 already when we didn't create it
- 01:43:50 programmatically we used it
- 01:43:52 here to wrap our label and input iron
- 01:43:55 item turns out to be
- 01:43:57 an element which can be used in
- 01:43:59 different situations
- 01:44:00 and i'll dive a bit deeper into that in
- 01:44:02 a later module where we have a closer
- 01:44:04 look at
- 01:44:05 components and do some deep dives on
- 01:44:07 some important components
- 01:44:09 iron item is one of them so ion item
- 01:44:12 actually can be used in different
- 01:44:13 situations
- 01:44:14 it can be used to group label and input
- 01:44:16 together
- 01:44:17 but it can also be used inside of our
- 01:44:19 iron list to
- 01:44:21 wrap all the content of a single list
- 01:44:23 item that basically should be rendered
- 01:44:24 in a nice way
- 01:44:27 so here i'm creating a new ion item
- 01:44:31 and on this new item here i want to set
- 01:44:34 a text content
- 01:44:35 which is equal to my entered reason
- 01:44:39 then a colon and then a dollar
- 01:44:42 sign whoops entered reason plus
- 01:44:45 then a colon then a dollar sign and then
- 01:44:47 the entered value so i'm just
- 01:44:49 constructing some text here where i have
- 01:44:51 the reason then a colon then a dollar
- 01:44:53 sign and after that the value
- 01:44:55 which i simply assumed to be in dollars
- 01:44:57 so now i'm
- 01:44:58 setting this as a text to my new item
- 01:45:00 and we can now reach out to the expenses
- 01:45:02 list which we got access to here
- 01:45:06 and call append child and we'll not do
- 01:45:10 this again later in the course then we
- 01:45:12 will use angular for all these dom
- 01:45:14 manipulations i'm just doing it here
- 01:45:16 with vanilla javascript
- 01:45:18 to give you an introduction of feeling
- 01:45:20 for just the ionic elements and nothing
- 01:45:22 else
- 01:45:23 so here i append a child and that child
- 01:45:26 is the new
- 01:45:27 item we created what should now happen
- 01:45:31 is that we see that up here
- 01:45:32 below our input here once we reload
- 01:45:36 and we enter valid data again and here
- 01:45:39 it is you see food
- 01:45:40 1299 show up below that and you can hit
- 01:45:43 this multiple times you can generate
- 01:45:45 more of these items
- 01:45:47 now this is how you can interact with
- 01:45:49 ionic components
- 01:45:51 in your code and whilst we will not
- 01:45:53 write this code again later
- 01:45:55 angular will basically do this for us
- 01:45:59 behind the scenes later so it's super
- 01:46:01 important to understand
- 01:46:03 that angular interacts with these web
- 01:46:05 components with the ionic components
- 01:46:07 just as it does with normal html
- 01:46:09 elements it can render them to the dom
- 01:46:12 and so on it's not angular compiling
- 01:46:15 these web components to some
- 01:46:17 normal html and javascript code instead
- 01:46:20 this
- 01:46:20 is normal html and javascript code that
- 01:46:23 can be used
- 01:46:24 directly with the dom apis
- 01:46:31 so with the items generated dynamically
- 01:46:34 let's make sure that when we do
- 01:46:35 add an expense we also clear the input
- 01:46:38 and let's make the clear button work
- 01:46:42 for this i will add a brand new function
- 01:46:44 up there
- 01:46:45 um where i create a new constant which
- 01:46:47 i'll name clear
- 01:46:49 and this will be a function so i store a
- 01:46:53 function in this clear constant to be
- 01:46:54 precise
- 01:46:56 where i reach out to my
- 01:46:59 reason input and set the value equal to
- 01:47:01 an empty string
- 01:47:02 and the same for the amount input and
- 01:47:04 that basically clears them right this
- 01:47:05 removes any input the user entered
- 01:47:08 this clear function should now be called
- 01:47:11 here after we appended our item
- 01:47:13 so we can just call clear here and this
- 01:47:15 refers to this clear function now
- 01:47:19 i also want to do that when i click the
- 01:47:22 cancel button so i will therefore add my
- 01:47:26 cancel button event listener down there
- 01:47:28 for a click event
- 01:47:30 and when this button gets pressed well i
- 01:47:32 can just point at clear
- 01:47:34 like this without parentheses because i
- 01:47:36 don't want to execute it immediately
- 01:47:38 instead i'll just pass a reference to
- 01:47:40 this function to the event listener
- 01:47:42 so that this will be executed
- 01:47:43 dynamically when this click
- 01:47:45 occurs it will execute this function for
- 01:47:47 me then
- 01:47:48 so with that if we reload and i enter
- 01:47:51 food
- 01:47:52 1299 and i clear this is removed then
- 01:47:55 you also see that the
- 01:47:57 items the labels float back in if i add
- 01:47:59 an expense this is also cleared but of
- 01:48:01 course the expense is also added
- 01:48:03 now last but not least let's make sure
- 01:48:05 we show some sum
- 01:48:06 some total expense at the bottom and for
- 01:48:09 this back in the html code
- 01:48:11 we can add a new ion row here
- 01:48:15 with a new ion column and
- 01:48:18 show our sum there for example by simply
- 01:48:22 adding a paragraph where we write
- 01:48:24 total expenses and then here i have a
- 01:48:28 span
- 01:48:28 which i'll use as a hook to render my
- 01:48:30 total expenses in
- 01:48:31 so i'll give this an idea of total
- 01:48:33 expenses so that i can easily get access
- 01:48:35 to that
- 01:48:36 from within my javascript code and with
- 01:48:38 that
- 01:48:39 id added on that span
- 01:48:42 we can get access to the total expenses
- 01:48:45 output
- 01:48:46 element or whatever you want to call it
- 01:48:47 here with query selector
- 01:48:50 total expenses
- 01:48:54 like that so this total expenses output
- 01:48:57 should now be updated with every item we
- 01:48:59 add
- 01:49:00 and therefore i will add a new variable
- 01:49:03 up there with let
- 01:49:04 total expenses which starts at zero
- 01:49:08 because
- 01:49:08 initially we have no expenses with every
- 01:49:11 item we add here
- 01:49:12 i can set total expenses equal to the
- 01:49:15 old value with the plus equal sign
- 01:49:17 shortcut
- 01:49:18 to the old value plus the amount
- 01:49:21 the entered amount and i will add a plus
- 01:49:23 in front of that to convert this
- 01:49:25 string which is by default any value you
- 01:49:28 fetch from my input element is a string
- 01:49:30 to a number and then this gets added to
- 01:49:32 the total expenses
- 01:49:33 we had before this updates the total
- 01:49:36 expenses
- 01:49:37 after updating them i can set my total
- 01:49:39 expenses output
- 01:49:41 text content equal to total expenses
- 01:49:43 here
- 01:49:44 so that this is not only stored in
- 01:49:45 memory in javascript but also written to
- 01:49:48 the dom
- 01:49:49 so with that if we reload and i add food
- 01:49:51 again with 12.99
- 01:49:54 and i also was in the cinema for 8.99
- 01:49:58 then we see our total expenses here at
- 01:50:00 the bottom
- 01:50:01 now the styling can be improved though
- 01:50:04 especially
- 01:50:05 on bigger screens
- 01:50:10 now we can fix the styling by simply
- 01:50:12 using the techniques we already learned
- 01:50:14 about
- 01:50:14 by using the grid and some of these css
- 01:50:17 utility classes
- 01:50:19 so let's start with the grid i can
- 01:50:22 essentially just copy
- 01:50:23 my grid setup i used up there
- 01:50:27 so size md6 offset md3 we can copy that
- 01:50:31 and add it to our other columns as well
- 01:50:33 so in this
- 01:50:34 second row where i have the expense list
- 01:50:36 i will add it here
- 01:50:38 and i will also add it to the column
- 01:50:39 here where i output my total expenses
- 01:50:42 with this simple change we make sure
- 01:50:45 that these columns
- 01:50:46 in separate rows but still columns in
- 01:50:48 these rows have the same size as the
- 01:50:50 column in the first row and therefore
- 01:50:53 now if we add
- 01:50:54 food here this looks way better in my
- 01:50:57 opinion
- 01:51:00 now also when i have some padding here
- 01:51:03 on this
- 01:51:04 output down there for that we can go to
- 01:51:06 that paragraph down there
- 01:51:08 and let's try adding margin here the css
- 01:51:11 utility attribute if you do that and you
- 01:51:14 reload
- 01:51:15 you will see that now this has the same
- 01:51:17 default margin as the other elements and
- 01:51:19 therefore it nicely aligns here on the
- 01:51:22 left
- 01:51:23 so this again uses the power of these
- 01:51:25 css utility attributes to
- 01:51:27 quickly add some default core styles
- 01:51:30 like margins or paddings
- 01:51:32 to different elements with that i'd say
- 01:51:34 we have quite a nice application here
- 01:51:41 so we have this nice demo app in a forum
- 01:51:44 that we'll never use again because for
- 01:51:46 the rest of the course we'll use angular
- 01:51:48 but still you learn a lot about some of
- 01:51:50 the core
- 01:51:51 ionic components and most importantly
- 01:51:54 where to find more information about the
- 01:51:55 components
- 01:51:56 and how to generally use them and have a
- 01:51:58 look at this app
- 01:52:00 it really looks nice it really looks
- 01:52:02 beautiful in my opinion
- 01:52:04 and that with very little work from our
- 01:52:06 side
- 01:52:07 and this is the power ionic gives you
- 01:52:09 and it even gives you the power to of
- 01:52:10 course
- 01:52:11 adjust all these styles if you need to
- 01:52:14 we'll do that later in the course as
- 01:52:16 well styling and theming
- 01:52:17 is an important topic before we do that
- 01:52:20 let's dive into a component which works
- 01:52:23 a bit differently
- 01:52:24 than the other components and which will
- 01:52:26 then also nicely explain why using
- 01:52:29 angular instead of vanilla javascript
- 01:52:31 can be more convenient
- 01:52:34 let's say when we enter some invalid
- 01:52:37 data for example we leave the fields
- 01:52:38 empty
- 01:52:39 and i click add expense we want to show
- 01:52:41 a little alert which warns the user that
- 01:52:44 the
- 01:52:44 entered value is invalid
- 01:52:47 now of course we could throw
- 01:52:51 an alert here invalid values
- 01:52:55 this uses the built-in alert
- 01:52:57 functionality every browser knows
- 01:52:59 if we do that if i reload then i get
- 01:53:02 this default alert here at the top
- 01:53:04 but we can certainly do way better how
- 01:53:06 about a native looking like alert here
- 01:53:09 in the middle of the app
- 01:53:10 ionic has us covered it does offer
- 01:53:14 components that help us with that but if
- 01:53:16 we have a look at the official component
- 01:53:18 stocks
- 01:53:18 we do find an alert and we find oh
- 01:53:22 an i alert controller and an iron alert
- 01:53:27 now thankfully you find some
- 01:53:28 instructions on how to use the alert
- 01:53:30 here
- 01:53:31 also with vanilla javascript instead of
- 01:53:33 just angular
- 01:53:34 but as you will learn with angular it's
- 01:53:36 way more
- 01:53:37 convenient but let's focus on the
- 01:53:40 vanilla javascript style for now
- 01:53:43 to throw such an alert first of all in
- 01:53:46 our ion app
- 01:53:47 somewhere maybe here at the bottom you
- 01:53:49 have to add the iron alert
- 01:53:51 controller now if you add this element
- 01:53:54 you'll not see any change on your screen
- 01:53:58 if you reload
- 01:53:59 you don't see that controller here it's
- 01:54:01 an invisible
- 01:54:02 element because it doesn't add any
- 01:54:04 visual output
- 01:54:06 it adds some functionality we can tap
- 01:54:08 into we can use
- 01:54:10 now to use it though we need to get
- 01:54:12 access to the ion alert controller
- 01:54:15 so in my javascript code here i'll add a
- 01:54:17 new constant
- 01:54:19 alert controller or alert ctrl
- 01:54:24 and i will simply use document query
- 01:54:26 selector to select that
- 01:54:27 ion alert controller because even though
- 01:54:30 we can't see anything on the screen
- 01:54:32 it of course still is a normal web
- 01:54:34 component just
- 01:54:36 one that doesn't really render anything
- 01:54:39 it
- 01:54:39 just adds some javascript functionality
- 01:54:42 behind the scenes
- 01:54:44 with access to this component we can tap
- 01:54:47 into this javascript functionality
- 01:54:50 so with the alert controller here where
- 01:54:53 i
- 01:54:53 do my validation i can actually call
- 01:54:57 create now this is a method provided by
- 01:55:01 this
- 01:55:01 alert controller component and you can
- 01:55:03 learn about this method in the official
- 01:55:05 docs of course
- 01:55:06 it's not a default html method create
- 01:55:09 takes a javascript object
- 01:55:11 because with this method we create a new
- 01:55:13 alert and with this object we can
- 01:55:15 configure
- 01:55:16 this alert and a one configuration we
- 01:55:19 can set up
- 01:55:21 is the message that gets displayed
- 01:55:24 like please enter a valid reason
- 01:55:28 and amount besides a message we can
- 01:55:32 also add a header and all these fields
- 01:55:34 you can set can of course be found in
- 01:55:36 the official docs
- 01:55:37 though later when we work with angular
- 01:55:39 this will also become easier because we
- 01:55:41 then have typescript support
- 01:55:43 and we get some help from our ide so for
- 01:55:45 now i'll just
- 01:55:46 enter this invalid inputs header by
- 01:55:49 knowing that this header field exists
- 01:55:51 and you just have to trust me for now we
- 01:55:54 can also add a buttons
- 01:55:55 array which allows us to label the
- 01:55:57 buttons which are displayed
- 01:55:58 and control how many buttons are
- 01:56:00 displayed in general and i will add one
- 01:56:02 button
- 01:56:02 which prints okay you can always
- 01:56:05 configure these buttons in more detail
- 01:56:07 and control what they do when they are
- 01:56:08 tapped but for now i'll just enter this
- 01:56:11 button which will then
- 01:56:12 as a default always close the alert
- 01:56:15 now create creates a new alert but if
- 01:56:18 you
- 01:56:18 save that and click the button again
- 01:56:20 after reloading you won't see anything
- 01:56:23 because it creates that and it does so
- 01:56:25 asynchronously and it does not display
- 01:56:28 it automatically instead to display the
- 01:56:30 created alert
- 01:56:31 you have to add then because create
- 01:56:34 actually returns a promise
- 01:56:35 which will fulfill when the creation of
- 01:56:38 this element is done
- 01:56:39 so here as an argument in the function
- 01:56:41 you pass to the then block
- 01:56:43 you'll get an alert element this is the
- 01:56:47 element that was created and it will be
- 01:56:50 that iron alert component here
- 01:56:52 if you would add this directly to the
- 01:56:54 dom like this it would not
- 01:56:56 work as intended instead this is always
- 01:56:58 created for you
- 01:56:59 by the alert controller but on this
- 01:57:02 alert
- 01:57:03 element you can then call present
- 01:57:06 to present it on the screen so now
- 01:57:10 with this code added if we go back to
- 01:57:12 the application reload and i tap this
- 01:57:14 button
- 01:57:15 we see this alert here now please also
- 01:57:18 note that here it looks like a typical
- 01:57:20 material design android alert if i
- 01:57:24 go to an iphone and i reload that's
- 01:57:28 always important you need to reload
- 01:57:29 after switching devices
- 01:57:31 if i click add expense not only do the
- 01:57:33 buttons look different
- 01:57:35 the alert style also looks as it should
- 01:57:37 look on
- 01:57:38 ios so this is how we can use
- 01:57:42 these special components all the
- 01:57:44 components
- 01:57:45 which end with controller in the docs
- 01:57:47 like the action sheet controller
- 01:57:49 or as you just saw the alert controller
- 01:57:52 but using these controller-like
- 01:57:54 components will get even easier once we
- 01:57:56 add angular
- 01:57:57 then we don't have to place them in the
- 01:57:59 dom even though we can't see them
- 01:58:01 and access them like this instead we'll
- 01:58:03 be able to inject them but more on that
- 01:58:05 later
- 01:58:10 i now want you to practice using these
- 01:58:12 components
- 01:58:13 i want you to build this simple
- 01:58:15 application here
- 01:58:16 where you can simply add a couple of
- 01:58:18 courses you enrolled in
- 01:58:20 like angular the complete guide
- 01:58:23 and then assign your rating and show
- 01:58:26 this output
- 01:58:27 below the input field so it's pretty
- 01:58:30 similar to what we had before
- 01:58:32 some differences for example this text
- 01:58:34 here is fat
- 01:58:35 and you can achieve this with default
- 01:58:36 html elements or css styling there are
- 01:58:39 multiple ways of doing that
- 01:58:41 and of course the look is a bit
- 01:58:42 different here i also didn't bother to
- 01:58:45 wrap this into a grid
- 01:58:46 feel free to do so to restrict the width
- 01:58:49 but i just want you to play around with
- 01:58:51 the components and
- 01:58:52 don't write the perfect app here instead
- 01:58:54 i want to make sure that you know how to
- 01:58:56 generally create such an app with a
- 01:58:58 header and then the main content
- 01:59:00 how to add these inputs with the
- 01:59:02 floating labels
- 01:59:03 how to add a button and then add some
- 01:59:05 javascript code that does something with
- 01:59:07 the inputs
- 01:59:08 you should add validation so that if you
- 01:59:10 enter an invalid value
- 01:59:11 you actually throw an alert and then you
- 01:59:14 will have used a lot of the things
- 01:59:15 you'll learn throughout this module
- 01:59:17 and hopefully have a better feeling for
- 01:59:20 how you work
- 01:59:21 with these ionic components now to solve
- 01:59:23 this assignment
- 01:59:24 you need absolutely no component we
- 01:59:26 haven't covered thus far
- 01:59:28 but still definitely dive into the
- 01:59:30 official docs in case you're stuck
- 01:59:32 or you're just not sure anymore how this
- 01:59:35 button was configured to look like this
- 01:59:37 or how this alert was shown good luck
- 01:59:40 with that
- 01:59:41 definitely check my solution to compare
- 01:59:44 yours to it
- 01:59:44 both to my video solution and the
- 01:59:46 attached solution code
- 01:59:52 so i'm in a new project so to say a new
- 01:59:56 index.html file which just has a basic
- 01:59:59 skeleton but no ionic elements in it
- 02:00:01 the ionic imports here are added though
- 02:00:04 for
- 02:00:04 the css code and for the javascript code
- 02:00:07 and my javascript file where i will add
- 02:00:09 my own logic
- 02:00:10 also is empty
- 02:00:13 so let's start working on that ionic app
- 02:00:17 and therefore as a main wrapper you
- 02:00:19 should have this ion app
- 02:00:21 element this ensures that everything is
- 02:00:23 wired up correctly and works correctly
- 02:00:25 behind the scenes
- 02:00:26 so definitely add that then i wanted to
- 02:00:29 have a header
- 02:00:31 with a nice toolbar and a title and
- 02:00:33 below that my content
- 02:00:35 now you learned that a header can be
- 02:00:36 added with iron header
- 02:00:38 and in there we can add an iron toolbar
- 02:00:40 in which we in turn can add an iron
- 02:00:42 title
- 02:00:43 which i'll simply set to my courses
- 02:00:46 also up there though this tile up there
- 02:00:48 of course has nothing to do with ionic
- 02:00:51 so now i added this header and the
- 02:00:53 toolbar with my own title
- 02:00:55 below the header i'll add the iron
- 02:00:57 content which will be the area where the
- 02:00:59 main page content gets rendered now
- 02:01:02 in that main content we need two inputs
- 02:01:06 and then a place to output what the user
- 02:01:08 entered and this of course is very
- 02:01:10 similar to what we did before
- 02:01:12 now as i mentioned feel free to use the
- 02:01:14 grid here the
- 02:01:16 ionic grid to control the width of the
- 02:01:18 cells and make it look awesome on all
- 02:01:20 devices i will save some time here
- 02:01:24 and don't use the grid and just add my
- 02:01:26 iron items instead
- 02:01:28 because if you remember or check the
- 02:01:30 docs iron items
- 02:01:32 should be used to wrap labels and inputs
- 02:01:34 that work together
- 02:01:36 and that's exactly what i want to have
- 02:01:37 here i want to add an iron label
- 02:01:40 where i want the user to enter a course
- 02:01:42 name and believe that
- 02:01:44 an iron input of type text where
- 02:01:47 the user can do just that enter the
- 02:01:49 course name
- 02:01:51 now that label will get a position of
- 02:01:53 floating
- 02:01:54 so that it floats nicely up when we
- 02:01:56 click into the input or
- 02:01:57 tab into it and that input will already
- 02:02:00 get an id
- 02:02:02 of input course name whatever you like
- 02:02:06 so that we can later select this from
- 02:02:08 inside our code
- 02:02:10 now i'll duplicate design item here
- 02:02:12 because i
- 02:02:13 also need an item for the rating
- 02:02:16 1 to five are accepted values
- 02:02:19 and here this should be of type number
- 02:02:22 because the user should enter a number
- 02:02:24 and i'll name this input course rating
- 02:02:29 if we save that you should see
- 02:02:32 something like this course name and a
- 02:02:34 rating which floats up
- 02:02:36 now actually i want to have a blue
- 02:02:38 toolbar and that can be achieved by
- 02:02:40 setting the color
- 02:02:41 attribute on the iron toolbar to
- 02:02:44 primary and this will automatically
- 02:02:46 color it blue
- 02:02:47 and watch the title color the title
- 02:02:50 white
- 02:02:51 that is another thing this does
- 02:02:53 automatically
- 02:02:55 okay so now we got the two inputs we got
- 02:02:58 our
- 02:02:59 toolbar here how about the button to
- 02:03:02 submit this all
- 02:03:03 beneath the iron items i'll add my iron
- 02:03:07 button
- 02:03:08 and on that button i'll set
- 02:03:11 add as a text and you can of course also
- 02:03:15 add an icon if you want to
- 02:03:16 i don't require that from you here but
- 02:03:18 you can add an icon
- 02:03:20 if you want you learned how that works
- 02:03:22 with using slots and so on
- 02:03:24 but what i definitely want to do is i
- 02:03:26 want to fix the positioning
- 02:03:28 right now this button doesn't look super
- 02:03:30 nice here
- 02:03:31 now we can easily fix this by giving it
- 02:03:33 a margin
- 02:03:34 which will add a margin around the
- 02:03:36 button if you do so
- 02:03:38 this looks much nicer so we got two
- 02:03:41 inputs in the button
- 02:03:42 we now need a place to output whatever
- 02:03:44 the user entered
- 02:03:45 and for that just as before i'll add a i
- 02:03:48 in list here
- 02:03:49 and give this an id of course list or
- 02:03:53 whatever you want
- 02:03:54 by the way i'll also give my button an
- 02:03:56 id of
- 02:03:58 button add
- 02:04:01 now we can start writing some code in
- 02:04:03 the app.js file which i do already
- 02:04:06 import here
- 02:04:07 so first of all we need to get access to
- 02:04:09 all these inputs and buttons
- 02:04:10 or the one button we have so to get
- 02:04:13 access
- 02:04:13 um i will use these ids again to get
- 02:04:16 my course name rating and so on and
- 02:04:19 store references to these elements and
- 02:04:20 constants
- 02:04:21 like here the course name input
- 02:04:25 i get access with document
- 02:04:28 queries selector hashtag input course
- 02:04:32 name
- 02:04:32 we can duplicate this and get access to
- 02:04:35 hashtag input course rating
- 02:04:37 with the course rating input
- 02:04:40 now the inputs are nice obviously we
- 02:04:42 also need access to the button
- 02:04:44 so let me duplicate this and add my
- 02:04:48 add button constant which refers to
- 02:04:52 button dash add so to the button with
- 02:04:55 the id
- 02:04:56 button dash add this one here and the
- 02:04:58 course list
- 02:04:59 is where all the entered course data
- 02:05:01 should be output so let's get access to
- 02:05:03 that element as well course
- 02:05:06 list with document query selector
- 02:05:10 hashtag course list
- 02:05:14 so now with that we can add a listener
- 02:05:16 to the add button
- 02:05:18 an event listener to the click event
- 02:05:20 which will execute well
- 02:05:22 when the button is clicked and a click
- 02:05:24 also counts if the user taps this on a
- 02:05:27 mobile device by the way
- 02:05:29 so here when we click this i want to get
- 02:05:32 my
- 02:05:33 entered course name by reading course
- 02:05:36 name
- 02:05:37 input dot value like this
- 02:05:41 and also i get the entered course rating
- 02:05:45 by reading course rating input.value
- 02:05:49 and now the first step is to validate
- 02:05:51 this to make sure that the user did
- 02:05:53 enter
- 02:05:54 anything at all and for the rating a
- 02:05:56 rating between 1 and 5.
- 02:05:58 so i'll add a if check and check if
- 02:06:00 entered course name
- 02:06:01 if we trim it has a length that is
- 02:06:04 smaller or equal to zero which would be
- 02:06:06 the case if it's empty
- 02:06:07 or if entered core's rating if we trim
- 02:06:11 it
- 02:06:11 has a length that is smaller or equal to
- 02:06:13 zero
- 02:06:15 or if entered course rating
- 02:06:18 is actually smaller than 1
- 02:06:21 or if entered course rating is actually
- 02:06:24 greater
- 02:06:25 than 5 because these values would be not
- 02:06:28 allowed it has to be between 1
- 02:06:30 and 5. if any of that is the case i will
- 02:06:34 return
- 02:06:35 otherwise you can proceed and now the
- 02:06:37 goal is to
- 02:06:38 just as we did it before in this module
- 02:06:40 create a new item
- 02:06:42 and append it to this course list so
- 02:06:45 here
- 02:06:45 new item is created with document
- 02:06:49 create element and there i create
- 02:06:52 an iron item
- 02:06:55 like this and on that new item
- 02:06:59 i will now actually set the inner html
- 02:07:01 content that is something new
- 02:07:03 and i will set this here with backticks
- 02:07:06 to use
- 02:07:07 a string literal to make it a bit easier
- 02:07:09 to construct the string
- 02:07:10 you could also concatenate multiple
- 02:07:12 strings but here i'll use the string
- 02:07:14 literal
- 02:07:15 to use a strong element and then we can
- 02:07:17 inject the dynamic value here and this
- 02:07:19 is a normal
- 02:07:20 next-gen javascript syntax nothing
- 02:07:22 specific to
- 02:07:23 angular or ionic or anything like that
- 02:07:26 here i can now simply input a variable
- 02:07:28 name or
- 02:07:29 an expression and the value of that
- 02:07:31 expression will be rendered into this
- 02:07:33 string which is generated in the end and
- 02:07:35 here i will enter my
- 02:07:37 um my entered course name
- 02:07:42 and after that let me also add a colon
- 02:07:45 here as text
- 02:07:46 after that i'll add my rating
- 02:07:49 and that will also be injected the
- 02:07:52 entered
- 02:07:53 rating and that and then i add
- 02:07:56 slash five to kind of output well the
- 02:07:59 rating
- 02:07:59 of five possible stars
- 02:08:02 so this is now simply a string being
- 02:08:04 constructed with backticks because this
- 02:08:07 allows us to
- 02:08:08 use this dynamic injection syntax the
- 02:08:11 alternative would have been to use
- 02:08:12 single quotes and basically concat this
- 02:08:15 string with dynamic and hard coded
- 02:08:16 values and with that
- 02:08:18 set to inner html so that we can use the
- 02:08:21 strong element in there
- 02:08:23 we can now append this new item to the
- 02:08:26 list
- 02:08:26 so to the course list we can call append
- 02:08:29 child
- 02:08:30 and then append the new item here
- 02:08:34 if you do that and you reload
- 02:08:38 let's try angular decomplete
- 02:08:42 guide and enter six
- 02:08:45 doesn't do anything is rejected one does
- 02:08:48 work because one is allowed
- 02:08:50 zero would not be allowed so this gives
- 02:08:53 us that output
- 02:08:54 um now that i look at this maybe it
- 02:08:57 would be nice to have some
- 02:08:58 white space here to get that um we have
- 02:09:02 to
- 02:09:03 use this special
- 02:09:07 code here which will render
- 02:09:10 a white space in html ampersand
- 02:09:14 nbsp semicolon
- 02:09:18 if you do that and save and enter
- 02:09:20 something
- 02:09:22 now we have a white space between the
- 02:09:23 name and the rating
- 02:09:25 okay cool so this is almost all i wanted
- 02:09:28 to achieve here
- 02:09:29 what's missing is a little alert that
- 02:09:32 warns me
- 02:09:33 when i do enter some invalid data here
- 02:09:35 and of course i also want to clear the
- 02:09:37 inputs
- 02:09:38 once i added a value or a new item
- 02:09:41 so let's start with clearing the inputs
- 02:09:44 that is pretty simple
- 02:09:45 all we have to do is we have to access
- 02:09:47 the course name input and set its value
- 02:09:50 equal to an empty string
- 02:09:51 and then do the same for the course
- 02:09:53 rating input
- 02:09:55 this ensures that we clear both when we
- 02:09:57 do enter a value
- 02:09:58 so therefore now if i reload here and i
- 02:10:01 have react
- 02:10:02 the complete guide which of course is
- 02:10:04 awesome
- 02:10:05 then this looks good now of course
- 02:10:09 regarding the validation and the alert
- 02:10:11 you learned that this works by adding
- 02:10:13 such a controller
- 02:10:15 in our ionic app so i will add my ion
- 02:10:18 alert
- 02:10:20 controller here and we can now get
- 02:10:23 access to that from inside our app.js
- 02:10:26 code
- 02:10:27 alert controller by using document query
- 02:10:31 selector and then select
- 02:10:34 iron alert controller with the tag
- 02:10:37 selector here
- 02:10:39 and now this alert controller can be
- 02:10:41 used to construct an alert
- 02:10:43 by calling create and pass a javascript
- 02:10:46 object where you configure the alert
- 02:10:48 and if you remember you could set a
- 02:10:50 header here
- 02:10:52 invalid input for example add a message
- 02:10:56 please enter a valid course name
- 02:10:59 and rating and if you want this is
- 02:11:02 optional it will show a default button
- 02:11:03 otherwise
- 02:11:04 you can also set your own buttons like
- 02:11:07 okay
- 02:11:08 so this is now the configuration we can
- 02:11:10 use to create a new alert but as you
- 02:11:12 learned this alert is not instantly
- 02:11:14 created and shown
- 02:11:15 instead this returns a promise which
- 02:11:18 eventually will resolve to the created
- 02:11:20 alert element
- 02:11:21 and therefore in this function we pass
- 02:11:23 to the then block
- 02:11:24 we get access to the alert element and
- 02:11:26 then we can call
- 02:11:27 alert element present and this will then
- 02:11:30 actually show the alert
- 02:11:32 so with this final change now if you now
- 02:11:35 reload and you try to add something
- 02:11:36 invalid
- 02:11:37 you get this alert and if you do enter
- 02:11:41 valid input like this one
- 02:11:43 [Music]
- 02:11:45 it of course just works so this is the
- 02:11:48 finished assignment here
- 02:11:50 and technically this uh was of course
- 02:11:52 not
- 02:11:53 super fancy we haven't built the most
- 02:11:56 amazing app you ever saw
- 02:11:58 but we had a detailed look at the core
- 02:12:01 elements the core building blocks of any
- 02:12:03 ionic
- 02:12:04 app you will be building and therefore i
- 02:12:06 hope this general
- 02:12:08 way of thinking about these components
- 02:12:10 is now really clear
- 02:12:11 and hammered into your mind because it's
- 02:12:14 so important and we will use it for the
- 02:12:15 rest of the course of course
- 02:12:21 so in this module we learned a lot about
- 02:12:24 the core ionic components
- 02:12:26 you learned that the official docs are
- 02:12:28 the place to go to learn
- 02:12:29 all about them all possible
- 02:12:31 configurations
- 02:12:33 because it's impossible to just memorize
- 02:12:36 them you will learn them by heart over
- 02:12:38 time as you use them
- 02:12:39 but it is totally normal that you
- 02:12:41 initially look into here and learn how
- 02:12:43 you can use certain components how you
- 02:12:45 can combine them
- 02:12:46 and i still look into this documentation
- 02:12:49 as well
- 02:12:50 because there are some components which
- 02:12:52 you use all the time which you quickly
- 02:12:54 know how to use and which you
- 02:12:55 don't need to look up but there also are
- 02:12:58 components you don't use that often
- 02:12:59 and then the docs are your friend plus
- 02:13:02 new features might be added and you can
- 02:13:04 always see them here
- 02:13:06 so with that we were able to build
- 02:13:08 something like this something like this
- 02:13:10 application
- 02:13:11 and we achieved this with just these
- 02:13:13 ionic components without our own styling
- 02:13:16 and the behavior is then the only thing
- 02:13:18 we control with our javascript code
- 02:13:20 so the behavior of the app and that is
- 02:13:22 exactly where
- 02:13:24 angular can help us and why we will use
- 02:13:26 angular
- 02:13:27 because if we will implement everything
- 02:13:29 on our own this will be quite hard with
- 02:13:32 vanilla javascript
- 02:13:33 it doesn't have to be angular but you
- 02:13:35 will definitely need some framework
- 02:13:37 or library at some point of time so that
- 02:13:40 you don't have to reinvent the wheel all
- 02:13:42 the time
- 02:13:42 for example when it comes to adding
- 02:13:44 elements to the dom you don't want to do
- 02:13:46 that
- 02:13:46 you want to focus on your business logic
- 02:13:48 and not on these nitty-gritty details
- 02:13:50 which you can still easily mess up so
- 02:13:53 therefore we use
- 02:13:54 angular to be very precise
- 02:13:57 there are three main reasons why we
- 02:13:59 would use angular or any other framework
- 02:14:02 because doing everything on our own will
- 02:14:05 be hard
- 02:14:06 especially hard will be if we have more
- 02:14:09 complex logic
- 02:14:10 as i mentioned we don't want to reinvent
- 02:14:12 the wheel of the
- 02:14:13 low level implementations we don't want
- 02:14:15 to access the dom on our own
- 02:14:17 we just want to control how will our dom
- 02:14:20 need to change which data will need to
- 02:14:23 be output like a list of products
- 02:14:25 we don't want to take care about the
- 02:14:26 actual outputting logic
- 02:14:28 we want to control the logic behind that
- 02:14:31 so adding a product validating input
- 02:14:34 products
- 02:14:35 fetching them from a server that is what
- 02:14:37 we want to do
- 02:14:38 we also don't want to do all the state
- 02:14:40 management on our own
- 02:14:42 because state management in bigger apps
- 02:14:44 can be really hard
- 02:14:46 passing the data around correctly and
- 02:14:48 updating different parts
- 02:14:50 in the application when some data
- 02:14:52 changed somewhere else
- 02:14:53 this can quickly become a nightmare and
- 02:14:56 angular makes this super easy with its
- 02:14:58 services
- 02:14:59 so to prevent our user interface from
- 02:15:02 behaving unpredictably
- 02:15:03 and our application having tons of bugs
- 02:15:07 we definitely want to use a state
- 02:15:09 management system as the one offered by
- 02:15:11 angular
- 02:15:12 it's services and dependency injection
- 02:15:15 and
- 02:15:15 this by the way all the kind of touches
- 02:15:18 on the alert controller
- 02:15:19 and so on you remember this element we
- 02:15:22 had to place
- 02:15:23 in our html code and then get access to
- 02:15:25 to create an alert
- 02:15:27 with angular and ionic we'll be able to
- 02:15:30 just inject this alert controller
- 02:15:32 thanks to a little wrapper package ionic
- 02:15:34 gives us
- 02:15:35 around uh well the core components
- 02:15:38 it then makes using these controller
- 02:15:40 components way easier
- 02:15:42 so that again we don't have to focus on
- 02:15:44 adding it and selecting it with the
- 02:15:46 query selector
- 02:15:47 but that we can just inject it and start
- 02:15:49 using it
- 02:15:50 and last but not least what if our
- 02:15:52 application needs multiple pages
- 02:15:55 right now we always had one page in our
- 02:15:57 dummy app right we didn't navigate
- 02:15:58 around
- 02:15:59 we didn't press a back button and go
- 02:16:01 somewhere else
- 02:16:02 in bigger apps you of course have that
- 02:16:04 you have tabs you have a site drawer
- 02:16:06 you have different pages different parts
- 02:16:08 of the app like a list of products
- 02:16:11 your cart and the user profile this
- 02:16:14 routing could be done with just ionic it
- 02:16:17 actually has its own router component
- 02:16:19 but the angular router is way more
- 02:16:22 powerful than that
- 02:16:23 it gives us a lot of advanced
- 02:16:25 functionalities
- 02:16:26 and smart routing so routing correctly
- 02:16:30 where we also can work with
- 02:16:31 things like query params in the url and
- 02:16:33 so on is actually quite difficult
- 02:16:35 so we definitely want to use a finished
- 02:16:38 and tested and battle proven
- 02:16:40 routing solution like the angular router
- 02:16:42 to have efficient fast
- 02:16:44 and powerful feature-rich routing we can
- 02:16:46 add in our app
- 02:16:47 to switch pages and navigate around
- 02:16:51 that is why we use angular because it
- 02:16:53 helps us
- 02:16:54 with the complex logic because we can
- 02:16:56 focus on writing the logic and angular
- 02:16:58 does the rest of updating the dom
- 02:17:01 it gives us clear rules of how we
- 02:17:02 structure our app
- 02:17:04 with components directives services and
- 02:17:06 so on
- 02:17:07 so that we have a clear plan of
- 02:17:10 building a bigger app it helps us with
- 02:17:13 services bindings and
- 02:17:15 with routing to transport state around
- 02:17:18 and speaking of routing
- 02:17:20 there it helps us with passing data and
- 02:17:22 with lazy loading etc
- 02:17:24 so this is why we will use angular from
- 02:17:27 the next section on and i will show you
- 02:17:29 in detail
- 02:17:30 how to set up an angular and ionic
- 02:17:32 project we already did it in section one
- 02:17:34 of the course
- 02:17:34 but now i will also walk you through the
- 02:17:37 created project
- 02:17:38 and explain how angular and ionic work
- 02:17:41 together
- 02:17:42 and how ionic actually leverages the
- 02:17:44 angular cli under the hood
- 02:17:50 we had a look at the basics about ionic
- 02:17:54 and
- 02:17:54 their about its component suit obviously
- 02:17:57 we'll explore
- 02:17:58 all the exciting parts of ionic
- 02:18:00 including styling
- 02:18:01 theming running it on a native mobile
- 02:18:04 device and creating a real native mobile
- 02:18:06 app
- 02:18:07 but before we do all of that it's time
- 02:18:10 to add
- 02:18:10 angular to our ionic app or to create
- 02:18:14 an ionic angular app to be precise
- 02:18:17 as you learned in the last module ionic
- 02:18:20 works with
- 02:18:21 any framework or non at all if you don't
- 02:18:24 want to use
- 02:18:24 a framework but this course is of course
- 02:18:27 about ionic
- 02:18:28 and angular now i did briefly touch on
- 02:18:31 why we would want to
- 02:18:33 use a framework like angular instead of
- 02:18:36 just
- 02:18:37 ionic with vanilla javascript and
- 02:18:39 therefore in this module
- 02:18:41 i'll briefly dive into this again but
- 02:18:43 i'll not bore you we talked about that
- 02:18:44 so this will be a quick part
- 02:18:46 and thereafter we'll set up an angular
- 02:18:48 plus ionic project and i'll explain how
- 02:18:51 that works internally and what it does
- 02:18:53 and how it differs to a normal
- 02:18:55 angular project and we'll then dive into
- 02:18:59 how we use ionic components how we do
- 02:19:02 use them combined with angular
- 02:19:04 components how these components interact
- 02:19:07 we'll also dive into how we can use the
- 02:19:09 angular router to switch between
- 02:19:11 pages and what ionic's role in that is
- 02:19:15 and we'll also have a look at ionic
- 02:19:19 controllers
- 02:19:20 so these controller components like the
- 02:19:22 alert controller we saw in the last
- 02:19:24 course module
- 02:19:25 and how using them becomes much simpler
- 02:19:28 when using ionic
- 02:19:32 angular
- 02:19:35 so why would we use angular i did
- 02:19:38 briefly touch on this in the last course
- 02:19:40 section already
- 02:19:41 and i'll just repeat it here in case you
- 02:19:43 skipped that otherwise you can skip this
- 02:19:45 lecture here
- 02:19:46 so we use angular because when we build
- 02:19:49 more complex
- 02:19:50 apps where we have more and more complex
- 02:19:53 logic in our javascript code
- 02:19:55 we don't want to focus on nitty gritty
- 02:19:58 details like
- 02:19:59 updating the dom correctly managing our
- 02:20:01 application state correctly
- 02:20:03 these things are hard and they are
- 02:20:05 annoying and we don't want to
- 02:20:06 care about them we want to focus on the
- 02:20:09 core logic that drives our app
- 02:20:11 so all these things which will be hard
- 02:20:13 like handling the complex logic
- 02:20:15 where we would have to reinvent the
- 02:20:17 wheel over and over again
- 02:20:18 where we might introduce bugs or state
- 02:20:21 management
- 02:20:22 where we could get an unpredictably
- 02:20:24 behaving user interface if we mess it up
- 02:20:27 because we don't update one part of the
- 02:20:29 app correctly when something changes in
- 02:20:31 another part
- 02:20:32 or things like routing where we might
- 02:20:36 have some form of switching between
- 02:20:38 pages but it doesn't
- 02:20:39 handle advanced use cases like
- 02:20:42 protecting
- 02:20:42 certain routes from unauthenticated
- 02:20:44 access or anything like that
- 02:20:46 these are things which are relatively
- 02:20:48 hard to implement on our own
- 02:20:50 and hence we use frameworks like angular
- 02:20:52 and of course you could use react or
- 02:20:54 view here but this is an ionic angular
- 02:20:56 course
- 02:20:57 where angular helps us with solving
- 02:20:59 these problems
- 02:21:00 it gives us clearly defined rules on how
- 02:21:02 we build our apps with components and
- 02:21:04 directives
- 02:21:05 and it takes care about the actual dom
- 02:21:08 rendering so that we can just focus on
- 02:21:10 the logic
- 02:21:11 that changes our state our data that
- 02:21:13 triggers
- 02:21:14 a dom update in the end it gives us
- 02:21:17 services and other means of
- 02:21:19 transporting data from a to b from
- 02:21:21 component to component
- 02:21:23 and it also helps us with routing where
- 02:21:25 we can conveniently pass data around
- 02:21:27 too where we got lazy loading where we
- 02:21:29 can add authentication guards and all
- 02:21:32 this fun stuff
- 02:21:33 this is why we would use angular instead
- 02:21:36 of just ionic
- 02:21:38 for very very simple apps you'll not
- 02:21:40 need it
- 02:21:41 and you will also always find solutions
- 02:21:44 around angular if you don't want to use
- 02:21:46 it
- 02:21:47 other libraries or frameworks for
- 02:21:48 example but this is an ionic angular
- 02:21:50 course angular is an amazing framework
- 02:21:53 it can be used to build extremely
- 02:21:55 powerful
- 02:21:56 and fast and reactive web applications
- 02:21:59 and therefore it's the perfect fit here
- 02:22:01 for ionic
- 02:22:02 where we want to also build a fast
- 02:22:05 reactive
- 02:22:06 web and then also native mobile
- 02:22:09 application
- 02:22:14 with that out of the way we can now
- 02:22:16 create a new
- 02:22:17 ionic angular project and for this you
- 02:22:21 should open your
- 02:22:22 terminal or command prompt and navigate
- 02:22:25 into the path where you want to create
- 02:22:27 your project folder
- 02:22:29 now we will use the ionic cli which is a
- 02:22:32 tool provided by the ionic team
- 02:22:34 for creating this project because that
- 02:22:36 is the easiest way
- 02:22:38 of setting up an ionic angular project
- 02:22:40 you can find
- 02:22:41 now for that to be usable in case you
- 02:22:43 skipped module 1 of this course
- 02:22:45 you first of all need to install node.js
- 02:22:48 from nodejs.org
- 02:22:50 there fetch the latest version and only
- 02:22:53 if you're facing issues with that
- 02:22:55 choose the lts version here so if choose
- 02:22:58 the latest version download it and go
- 02:23:00 through the installer
- 02:23:01 it's available for mac and windows and
- 02:23:03 you get a convenient installer for which
- 02:23:05 you simply have to go
- 02:23:06 and we do install node.js for two
- 02:23:09 reasons
- 02:23:10 reason number one is that it also gives
- 02:23:12 us nodes package manager
- 02:23:14 npm which is the de facto standard
- 02:23:17 package manager
- 02:23:18 for managing javascript dependencies not
- 02:23:21 only in node.js projects but actually in
- 02:23:24 any project that uses javascript no
- 02:23:26 matter if it's a front-end or backend
- 02:23:28 project
- 02:23:28 and therefore our angular ionic project
- 02:23:31 also will use npm
- 02:23:32 to manage its dependencies and with
- 02:23:35 dependencies i mean things like the
- 02:23:36 angular framework the ionic framework
- 02:23:39 and dependencies of these frameworks
- 02:23:42 so that's the first reason npm the
- 02:23:45 second reason is node.js itself
- 02:23:47 even though we'll not write any node.js
- 02:23:50 code in this course
- 02:23:51 we need node.js because behind the
- 02:23:55 scenes
- 02:23:55 the angular cli and the ionic cli which
- 02:23:58 we'll both use
- 02:24:00 use node.js to build our project
- 02:24:03 to spin up a development server where we
- 02:24:05 can preview our app
- 02:24:07 and so on so download and install
- 02:24:09 node.js
- 02:24:10 and thereafter make sure you also have
- 02:24:13 the ionic
- 02:24:14 cli installed now in case you need
- 02:24:16 detailed instructions you can find that
- 02:24:18 on ionicframework.com
- 02:24:20 under developers installation and then
- 02:24:23 install with cli
- 02:24:25 it's this command with npm installed
- 02:24:27 which you have to
- 02:24:29 execute so let's copy that into our
- 02:24:33 terminal here and on mac and linux you
- 02:24:35 might need to add a pseudo in front of
- 02:24:37 this
- 02:24:37 on windows make sure you're running the
- 02:24:39 command prompt as administrator
- 02:24:41 by right-clicking on its executable and
- 02:24:43 then choosing run as administrator
- 02:24:46 and this will now install the ionic cli
- 02:24:49 globally on your machine
- 02:24:51 now we do need that ionic cli for
- 02:24:54 things like creating new projects but
- 02:24:57 also then
- 02:24:58 to run our projects to build our
- 02:25:01 app especially then also to build a
- 02:25:03 mobile app
- 02:25:04 that is something where the ionic cli
- 02:25:07 will be important
- 02:25:08 and this is generally our global ionic
- 02:25:11 project management tool you could say
- 02:25:13 now with it installed and navigated into
- 02:25:16 that folder here where you want to
- 02:25:18 create your
- 02:25:19 project run ionic start and you saw this
- 02:25:22 command in the first module of the
- 02:25:24 course already
- 02:25:25 this allows you to create a new project
- 02:25:28 now first of all
- 02:25:30 here as it tells you you should choose a
- 02:25:32 project name
- 02:25:33 and i will simply go with
- 02:25:38 ionic angular course you can of course
- 02:25:41 choose any name you want
- 02:25:43 then you should pick a template and i
- 02:25:45 will go with the blank template
- 02:25:47 if you would use another template you
- 02:25:49 would start with certain features
- 02:25:50 already added in the dummy app you get
- 02:25:52 out of the box but we will add these
- 02:25:54 features step by step together in this
- 02:25:56 course so that you learn all about them
- 02:25:59 hence let's go with the blank template
- 02:26:01 and this will now create a new project
- 02:26:03 and install all the required
- 02:26:05 dependencies of the project which will
- 02:26:07 take a while and i'll be back once it's
- 02:26:09 done
- 02:26:11 once the installation finished you're
- 02:26:13 asked whether you want to
- 02:26:15 install the free app flow sdk and you
- 02:26:18 don't need that
- 02:26:19 um it's an extra tool offered by ionic
- 02:26:21 you can find more information about it
- 02:26:23 in the official ionic docs of course
- 02:26:26 um there you can find out what app flow
- 02:26:29 is
- 02:26:29 in the end it's a service that requires
- 02:26:31 you to sign up you can sign up for free
- 02:26:34 and then you can also test your app a
- 02:26:36 bit easier
- 02:26:37 on native devices and you can even build
- 02:26:40 it in the cloud which
- 02:26:41 also allows you as a windows user to for
- 02:26:43 example build ios apps
- 02:26:45 that then however will be a paid feature
- 02:26:47 and therefore i'll not show it in this
- 02:26:48 course
- 02:26:49 so i'll choose no here we don't need
- 02:26:51 that and thereafter
- 02:26:53 i created this project we could now run
- 02:26:55 it with the instructions you see here
- 02:26:57 but i'll actually not do that
- 02:26:59 and instead open that in my editor of
- 02:27:01 choice which is
- 02:27:02 still visual studio code here is the
- 02:27:05 created project
- 02:27:06 opened in visual studio code now one
- 02:27:09 quick note about visual studio code
- 02:27:11 under view extensions here you can
- 02:27:14 actually make sure that you install the
- 02:27:16 angular essentials
- 02:27:17 simply search for angular essentials up
- 02:27:20 here to
- 02:27:21 make your life as an angular developer a
- 02:27:23 bit easier in case you don't have these
- 02:27:25 extensions yet
- 02:27:26 and i also used and will still use the
- 02:27:30 material
- 02:27:31 icon theme which you can also install
- 02:27:33 from there this is optional
- 02:27:34 it just changes the file icons in the
- 02:27:37 project but still this is the exact same
- 02:27:38 look i have so
- 02:27:39 if you want to have that same look make
- 02:27:41 sure to install this extension
- 02:27:43 thereafter you can go back to view
- 02:27:45 explorer
- 02:27:46 so this is the project and it basically
- 02:27:49 and that is important
- 02:27:50 is a normal angular project now let me
- 02:27:53 walk you through it and explain
- 02:27:54 where it differs from a normal angular
- 02:27:57 project and how it is connected to ionic
- 02:28:04 in this project here as i mentioned
- 02:28:07 generally we have a normal
- 02:28:09 angular project if you explore the
- 02:28:11 source folder you will find a main ts
- 02:28:13 file
- 02:28:13 and in the end here as you can tell we
- 02:28:16 bootstrap
- 02:28:17 a normal angular app you find absolutely
- 02:28:19 nothing about ionic in here this is all
- 02:28:22 code
- 02:28:22 you find in any normal angular web
- 02:28:25 application
- 02:28:26 the index.html file also looks pretty
- 02:28:29 normal
- 02:28:30 we see the tile leader says something
- 02:28:33 about ionic but other than that it's a
- 02:28:35 normal html file
- 02:28:36 and we do have our app root component in
- 02:28:39 there
- 02:28:40 now i do expect you to know how an
- 02:28:42 angular application starts
- 02:28:44 that this app root selector is in the
- 02:28:47 end
- 02:28:48 picked up by our app module which is the
- 02:28:51 module we bootstrap we start
- 02:28:53 our app with and the app module in turn
- 02:28:55 which can be found in the app folder
- 02:28:57 this defines that our bootstrapping our
- 02:29:00 root component
- 02:29:01 is the app component which happens to
- 02:29:03 have this exact same selector
- 02:29:05 app root here and therefore the content
- 02:29:08 of the template of this component
- 02:29:10 will be rendered in the place of this
- 02:29:12 selector in the index.html file
- 02:29:14 and this then therefore is mounting our
- 02:29:17 root angular component to the real dom
- 02:29:20 and any other component we include in
- 02:29:22 our template of that root component
- 02:29:25 or in then other components templates
- 02:29:27 will therefore be
- 02:29:29 mounted onto the dom as well and will be
- 02:29:31 part of our angular
- 02:29:32 application if that is something you
- 02:29:34 never heard about
- 02:29:36 definitely learn angular first i do
- 02:29:38 expect this basic knowledge from now on
- 02:29:41 so this all looks quite familiar now one
- 02:29:44 thing that is new is the theme
- 02:29:45 folder and here we're also using sas or
- 02:29:49 scss by default though you could do that
- 02:29:51 in a normal angular app as well
- 02:29:53 the theme folder will be important
- 02:29:55 though because here
- 02:29:57 we see some strange syntax which is
- 02:29:59 actually a css
- 02:30:01 feature heavily used by ionic css
- 02:30:04 custom properties also known as css
- 02:30:07 variables and in the end this is not
- 02:30:10 some
- 02:30:11 hacky new feature offered by onik this
- 02:30:13 is a standard css feature
- 02:30:15 about which you also can learn in my
- 02:30:17 complete css guide here on udemy
- 02:30:19 and it allows you to define your own
- 02:30:22 variables
- 02:30:23 which can hold any kinds of values like
- 02:30:25 colors but you can also store
- 02:30:27 units you can store sizes
- 02:30:30 margins you can store whatever you want
- 02:30:32 in there and you can then reuse these
- 02:30:34 variables
- 02:30:35 and assign them in your app to other
- 02:30:37 properties
- 02:30:38 so somewhere else in the app we could
- 02:30:40 set a background color of a div
- 02:30:42 to this variable and it would take
- 02:30:44 whichever color is stored in this
- 02:30:46 variable
- 02:30:47 ionic uses this concept heavily since
- 02:30:49 this makes it easy for us
- 02:30:51 to adjust the global look of our
- 02:30:53 application
- 02:30:54 that however is something i'll come back
- 02:30:56 to in a styling and theming module
- 02:30:58 i just wanted to mention it here
- 02:31:01 more interesting is of course how this
- 02:31:03 app now interacts
- 02:31:05 with ionic how is it connected exactly
- 02:31:08 if we have a look at the angular json
- 02:31:11 file there
- 02:31:13 we'll see that if we scroll down a bit
- 02:31:15 this here is actually the
- 02:31:16 build setup for our default build we
- 02:31:19 would execute when building our angular
- 02:31:21 app
- 02:31:22 and there we do import some assets and
- 02:31:25 the first interesting thing here is that
- 02:31:27 we see that
- 02:31:28 the ionicons so these ionic icons are
- 02:31:30 included
- 02:31:31 as assets that of course is not the case
- 02:31:33 in a standard angular project
- 02:31:35 instead ionic created an angular project
- 02:31:38 for us
- 02:31:38 where the configuration is already
- 02:31:40 adjusted to
- 02:31:42 include these icons so that we can use
- 02:31:44 them
- 02:31:45 in our angular app here now that is the
- 02:31:49 first interesting part we also have that
- 02:31:52 ionic config
- 02:31:53 json file here which is very simple but
- 02:31:56 in the end
- 02:31:57 this will allow you to for example set
- 02:31:59 the app the identifier
- 02:32:01 of your ionic app
- 02:32:06 in the package.json file we of course
- 02:32:09 also see that
- 02:32:10 we have all these angular imports but
- 02:32:11 then we also have some ionic imports
- 02:32:14 and especially interesting is that ionic
- 02:32:16 angular import here
- 02:32:19 we'll find that ionic angular package
- 02:32:21 being used
- 02:32:22 in our app module which is the root
- 02:32:25 module of our angular app
- 02:32:27 there we generally find default angular
- 02:32:29 code we have our ng module
- 02:32:32 we declare our app component we
- 02:32:34 bootstrap it we import the browser
- 02:32:36 module
- 02:32:37 but then we also see the ionic module
- 02:32:40 being used here and we also have these
- 02:32:43 providers down there which are also not
- 02:32:45 there in a standard normal web app you
- 02:32:48 build with angular
- 02:32:50 now this is all imported from ionic and
- 02:32:53 from ionic angular specifically
- 02:32:55 we import that ionic module and this
- 02:32:58 ionic module here
- 02:33:00 in the end as it is included in the app
- 02:33:02 module
- 02:33:03 unlocks all these ionic components in
- 02:33:06 our
- 02:33:07 angular app here now you would of course
- 02:33:09 correctly say what does it need to
- 02:33:11 unlock didn't you say that web
- 02:33:12 components can be used anywhere
- 02:33:14 by default yes but first of all we of
- 02:33:17 course need to import them
- 02:33:19 we need to import our ionic package and
- 02:33:21 in the previous sections we did that by
- 02:33:23 including a cdn link
- 02:33:25 here we will never find this link
- 02:33:27 because there is no
- 02:33:28 cdn link or any other import link
- 02:33:31 instead
- 02:33:31 this ionic module will import the ionic
- 02:33:35 web components
- 02:33:36 but it will actually do more than that
- 02:33:38 for us because
- 02:33:39 why do we actually have an ionic angular
- 02:33:41 package
- 02:33:42 if ionic is all about having web
- 02:33:45 components we can
- 02:33:46 drop into any app by default why do we
- 02:33:49 need a separate
- 02:33:50 ionic angular package then if it should
- 02:33:52 work with any framework
- 02:33:58 the ionic angular package in the end is
- 02:34:01 a wrapper
- 02:34:02 package around the ionic component suit
- 02:34:05 so you can think of it as an as a
- 02:34:08 package
- 02:34:09 that takes all these ionic components
- 02:34:11 these web components which can be used
- 02:34:13 anywhere
- 02:34:14 and wraps them into a separate angular
- 02:34:17 specific
- 02:34:18 package or module into this angular
- 02:34:21 module also
- 02:34:22 which can only be used in an angular app
- 02:34:24 but this is done because it makes the
- 02:34:26 usage of these components
- 02:34:28 in angular easier and actually also more
- 02:34:31 efficient
- 02:34:31 especially when we later talk about
- 02:34:33 things like the alert controller modal
- 02:34:36 controller
- 02:34:36 so these controller like components we
- 02:34:39 already had a look at
- 02:34:40 so in an angular app we use this ionic
- 02:34:42 angular package which gives us the ionic
- 02:34:45 component suit
- 02:34:46 but which acts as a so-called binding as
- 02:34:49 it makes the usage of these components
- 02:34:51 easier and kind of
- 02:34:53 gives us a bridge to conveniently use
- 02:34:56 them
- 02:34:56 in a way we would use angular components
- 02:34:59 as well you could say
- 02:35:00 and the ionic module here does just that
- 02:35:03 it basically includes
- 02:35:04 all these uh web components and gives us
- 02:35:08 that
- 02:35:08 extra magic on top of it which will help
- 02:35:11 us with for example these controllers
- 02:35:14 as always purely optional but still
- 02:35:16 interesting if you visit the official
- 02:35:18 ionic github repository
- 02:35:20 i did show you the core folder in the
- 02:35:22 last module
- 02:35:23 there you can find all these core web
- 02:35:25 components
- 02:35:26 if you dive into the angular folder here
- 02:35:29 you actually can see how that ionic
- 02:35:31 angular package is set up
- 02:35:33 and there you will see that what it does
- 02:35:35 here in the zionic module for example
- 02:35:38 is it takes all these core
- 02:35:41 ionic web components and simply
- 02:35:44 declares them so this is all added to
- 02:35:47 declarations
- 02:35:49 and it does so because this simply wraps
- 02:35:52 the web components into
- 02:35:53 angular components so that a angular
- 02:35:56 doesn't complain about
- 02:35:58 unknown elements being used in its
- 02:36:00 templates because by default it only
- 02:36:02 accepts angular components and
- 02:36:03 normal html elements and b
- 02:36:06 we get additional uh features as you
- 02:36:09 will see throughout this course
- 02:36:11 so that is the idea behind the ionic
- 02:36:13 module and this is how
- 02:36:14 the angular project and ionic are
- 02:36:17 connected it's a totally
- 02:36:18 normal angular project and we just add
- 02:36:21 ionic
- 02:36:22 with this module with a little bit of
- 02:36:24 extra configuration and angular json
- 02:36:26 and therefore we can now start using the
- 02:36:28 ionic components and features
- 02:36:30 in our normal angular app now since it
- 02:36:33 is a normal angular app if you open
- 02:36:36 a terminal which you can deal with view
- 02:36:38 terminal
- 02:36:39 or with the shortcut you see there you
- 02:36:42 can of course run
- 02:36:43 ng-surf to bring up the development
- 02:36:46 server where you can preview this app
- 02:36:48 and this would work
- 02:36:49 however i recommend ionic serve
- 02:36:52 but this behind the scenes will only use
- 02:36:55 ng
- 02:36:56 surf it runs a special script but in the
- 02:36:59 end that just
- 02:37:00 does the same as ngserv you could say
- 02:37:02 but it automatically also opens this in
- 02:37:04 a new window
- 02:37:05 uses a specific port and so on so i will
- 02:37:08 use ionic server
- 02:37:10 but it will use ngsurf behind the scenes
- 02:37:12 basically
- 02:37:13 here is the running project and as
- 02:37:15 before i'll open my developer tools here
- 02:37:18 and preview this in the mobile view so
- 02:37:21 to see how it would look like
- 02:37:23 roughly on a mobile device and i'll go
- 02:37:25 with the pixel 2 for now
- 02:37:28 so this is how we use angular and ionic
- 02:37:31 or how we create an app and how the
- 02:37:34 two frameworks or libraries work
- 02:37:36 together
- 02:37:37 time to now get our hands dirty and
- 02:37:39 build a simple dummy app here
- 02:37:41 so that we can also see how we use the
- 02:37:42 ionic components and how we use these
- 02:37:45 special controller
- 02:37:46 components
- 02:37:51 i did spend a lot of time talking about
- 02:37:53 how angular and ionic work together
- 02:37:56 but it is super important to understand
- 02:37:58 that and to be aware of
- 02:38:00 how the two parts do work together
- 02:38:03 now it's time to get our hands dirty we
- 02:38:06 do have that home component here
- 02:38:08 as a default and i will actually delete
- 02:38:10 that and build an app from scratch
- 02:38:13 now for that i'll open a new tab in my
- 02:38:15 terminal
- 02:38:16 the upper tab should keep on should be
- 02:38:19 kept open because this process needs to
- 02:38:21 be
- 02:38:21 kept running it will automatically watch
- 02:38:23 your code for changes
- 02:38:24 and rebuild and reload the app when it
- 02:38:26 changes
- 02:38:28 in the second window we can now use the
- 02:38:30 angular cli
- 02:38:31 to generate components so with a ng
- 02:38:34 generate component
- 02:38:35 or shortcut ng gz you can generate a new
- 02:38:39 component in your app
- 02:38:40 you can also do this by hand but this of
- 02:38:42 course is faster
- 02:38:43 now i want to build a very very very
- 02:38:46 simple recipe book
- 02:38:47 implementation i basically want to have
- 02:38:50 a list of recipes and if we tap one we
- 02:38:52 can view the details about this recipe
- 02:38:56 therefore i'll add a new component which
- 02:38:59 i'll call
- 02:39:00 recipes however i want to load this
- 02:39:04 as a page so i want to basically use the
- 02:39:07 angular router
- 02:39:09 to replace the entire content of the
- 02:39:11 current page of what we currently see on
- 02:39:13 the page
- 02:39:13 with the content of this component now
- 02:39:16 obviously pages
- 02:39:17 in angular are just components but we
- 02:39:20 can also use the ionic cli to generate
- 02:39:22 it
- 02:39:23 ionic generate and then if we hit enter
- 02:39:26 you can actually select from different
- 02:39:28 things you can build you can also build
- 02:39:30 a component there and under the
- 02:39:32 under the hood this just uses ng
- 02:39:33 generate but you do have a special
- 02:39:36 page element you can select here
- 02:39:39 so i will choose page and then i'll give
- 02:39:41 it a name which is recipes
- 02:39:44 and this now executes n ng generate page
- 02:39:46 recipes
- 02:39:48 this is a new command added by ionic so
- 02:39:50 that's another part where it kind of
- 02:39:52 adjusts
- 02:39:52 the default behavior of the angular
- 02:39:54 project and it gives us this recipes
- 02:39:56 folder
- 02:39:57 and now the special thing is the naming
- 02:39:59 here and that it automatically gives us
- 02:40:02 a module which sets up a route for this
- 02:40:04 recipes page
- 02:40:06 so that we can load the entire module
- 02:40:08 lazily
- 02:40:09 and actually it even adjusted the app
- 02:40:12 routing module already
- 02:40:13 to include the pav recipes where it does
- 02:40:16 include
- 02:40:17 lazy loading for that recipes module so
- 02:40:20 that's very convenient we get lazy
- 02:40:22 loading for our pages out of the box
- 02:40:24 with this command
- 02:40:25 which is while use it for the creation
- 02:40:27 of new components that will be used as
- 02:40:29 pages
- 02:40:30 now i did delete the home component so i
- 02:40:33 will also delete that path in the
- 02:40:34 routing setup
- 02:40:35 so that i only have that root path where
- 02:40:37 i now want to redirect to recipes
- 02:40:40 and then the recipes path where i do
- 02:40:42 have my lazy loading in place that
- 02:40:44 points at the recipes page module
- 02:40:46 which should be loaded when we try to
- 02:40:47 reach that path here
- 02:40:49 and in the recipes module we simply
- 02:40:51 render the recipes page component
- 02:40:53 the recipes page component is a normal
- 02:40:55 angular component though
- 02:40:57 and we can use it as a normal angular
- 02:40:59 component
- 02:41:00 in the recipes page html file we get
- 02:41:03 this setup out of the box by ionic we
- 02:41:06 got our
- 02:41:07 iron header with a toolbar and a title
- 02:41:09 i'll set the title to recipes
- 02:41:11 we have to iron content with some
- 02:41:13 padding added to it i'll get rid of it
- 02:41:15 for now
- 02:41:16 and add a paragraph where i say recipes
- 02:41:18 page
- 02:41:19 works now this page is loaded through
- 02:41:22 the angular router
- 02:41:23 as you can tell we're using the normal
- 02:41:25 angular router module here
- 02:41:27 in the app routing module and that is
- 02:41:29 then included here
- 02:41:30 in the app module so nothing special
- 02:41:32 there
- 02:41:33 one special thing can be seen in the app
- 02:41:35 component though
- 02:41:36 there we have that iron app wrapper
- 02:41:39 which i mentioned should be there
- 02:41:40 around your entire application and
- 02:41:43 therefore
- 02:41:44 the root component of our application of
- 02:41:46 course is the right place to include it
- 02:41:49 and in there we have this ion router
- 02:41:51 outlet now that is interesting
- 02:41:53 because in a normal angular app we would
- 02:41:55 have just
- 02:41:56 a router outlet now let's go with a
- 02:41:59 router outlet
- 02:42:00 and save all files and then back here
- 02:42:03 the home path doesn't exist anymore so
- 02:42:05 let's reload the
- 02:42:07 main path it loads recipes
- 02:42:10 and i see recipes here at the bottom now
- 02:42:13 so this doesn't look right does it
- 02:42:17 the reason for that is the way we load
- 02:42:18 this the router outlet can be used
- 02:42:21 theoretically because again
- 02:42:22 and i will hammer this into your head
- 02:42:25 this is
- 02:42:26 a normal angular project and therefore
- 02:42:28 we can use
- 02:42:29 normal angular features like angular's
- 02:42:31 routing
- 02:42:32 but to get nice page transitions and the
- 02:42:36 page being displayed correctly
- 02:42:38 on the screen which requires things like
- 02:42:40 the css
- 02:42:41 height consumption of the page being set
- 02:42:44 to 100
- 02:42:45 and so on to get all of that you should
- 02:42:48 use the
- 02:42:48 iron router outlet which in the end
- 02:42:51 wraps the
- 02:42:52 angular router outlet and adds some
- 02:42:54 extra stylings and features
- 02:42:56 and when you do that as this page
- 02:42:59 reloads
- 02:43:00 you will see that all of a sudden this
- 02:43:02 looks correct
- 02:43:03 so both works but iron router outlet is
- 02:43:06 built to be used with
- 02:43:08 ionic driven pages so with angular
- 02:43:11 components
- 02:43:12 that create an ionic page by having a
- 02:43:15 header
- 02:43:16 a content and so on so ion router outlet
- 02:43:20 is
- 02:43:20 we'll use iron router outlet in this
- 02:43:22 course therefore
- 02:43:28 back to our recipes page i said i wanted
- 02:43:30 to display a list of recipes here
- 02:43:33 so let's include a i list and now the
- 02:43:35 nice thing is
- 02:43:36 here in visual studio code with the
- 02:43:38 angular essentials package installed
- 02:43:41 i now get auto completion here in my
- 02:43:43 templates
- 02:43:44 thanks to this ionic angular wrapper
- 02:43:47 actually
- 02:43:47 which unlocks all the ionic components
- 02:43:50 as angular components
- 02:43:51 and i would get all the completion
- 02:43:53 support for angular components here
- 02:43:55 hence i get it for these ionic
- 02:43:57 components too
- 02:43:58 because they're all wrapped into angular
- 02:44:00 components so to say
- 02:44:01 so i can add my iron list here and on
- 02:44:05 that iron list or in that ion list
- 02:44:07 i want to render a couple of items a
- 02:44:09 couple of recipes
- 02:44:11 now of course we don't have any recipes
- 02:44:13 yet and i will not create an overly
- 02:44:16 complex app at this point we'll do that
- 02:44:18 later with the course project
- 02:44:19 so for now i will simply create a
- 02:44:24 new file here my recipe model
- 02:44:27 typescript to define how a recipe should
- 02:44:29 look like
- 02:44:30 and i'll use an interface here name it
- 02:44:33 recipe
- 02:44:34 and i want my recipes to let's say have
- 02:44:37 an id which is of type string a title
- 02:44:41 which is of type string
- 02:44:43 an image url which is of type string and
- 02:44:46 then some
- 02:44:47 ingredients which is an array of strings
- 02:44:51 something like bananas apples so a
- 02:44:53 really simple recipe definition
- 02:44:56 now in case this is something you've
- 02:44:57 never seen again please go through my
- 02:44:59 angular complete guide first
- 02:45:01 this is a typescript feature we're
- 02:45:03 defining an interface here we can
- 02:45:04 basically use this as our own type and
- 02:45:07 we can ensure that we therefore
- 02:45:09 always work with the same data with data
- 02:45:11 with the same structure
- 02:45:13 in our application so with the recipe
- 02:45:15 interface created here
- 02:45:17 in the recipes page typescript file i
- 02:45:20 will now add a recipes
- 02:45:22 property which is of type recipe
- 02:45:25 array and the recipe is of course my own
- 02:45:28 model
- 02:45:29 and therefore this type has to be
- 02:45:30 imported from the recipe model file
- 02:45:33 and this should not be an empty array
- 02:45:36 but instead i'll start with an array
- 02:45:38 that already has a couple of recipes
- 02:45:40 and each recipe should have an id like
- 02:45:43 r1 whatever you like
- 02:45:44 it should have a title like
- 02:45:47 schnitzel if you took my angular
- 02:45:50 complete guide you know what i'm talking
- 02:45:51 about
- 02:45:52 it should have an image url and for that
- 02:45:55 i'll quickly pick
- 02:45:56 a lovely schnitzel image here i copied
- 02:45:58 in a url you can simply find an image
- 02:46:01 where on google image search later in
- 02:46:04 the course i'll show you how to use the
- 02:46:05 device camera but for now let's go with
- 02:46:07 this hard-coded
- 02:46:08 url here and i also need my ingredients
- 02:46:12 and here we certainly need french
- 02:46:14 fries and we need
- 02:46:17 pork meat and maybe we also
- 02:46:22 need some salad
- 02:46:27 now i'll quickly add another recipe here
- 02:46:30 and of course you can add anything you
- 02:46:32 want
- 02:46:32 i'll go with some nice spaghettis here
- 02:46:36 and quickly search an image for that as
- 02:46:38 well brought in a url
- 02:46:41 and ingredient wise we need spaghetti
- 02:46:44 and we need uh meat and probably also
- 02:46:47 some
- 02:46:47 toe tomatoes
- 02:46:50 now here i got some linting error
- 02:46:52 regarding my url being too long
- 02:46:54 um i'll just ignore that here so with
- 02:46:57 the recipes added here
- 02:46:59 i want to output them in my iron list
- 02:47:02 and this can be done by adding an iron
- 02:47:04 item here
- 02:47:06 and since i want to repeat this for
- 02:47:08 every element in my
- 02:47:10 ingredient list i'll dump an ng4
- 02:47:12 statement on it so using the default ng4
- 02:47:15 directive we can use in any angular
- 02:47:16 project
- 02:47:18 and then i'll go through all my recipes
- 02:47:20 i have here so with let recipe of
- 02:47:22 recipes i loop for all my recipes
- 02:47:24 and in the iron item here i of course
- 02:47:27 want to display
- 02:47:28 the image let's say on the left and on
- 02:47:31 the right i then want to have my text
- 02:47:33 for that we can use a component i
- 02:47:34 haven't shown you before and of course
- 02:47:36 as always you'll find that in the
- 02:47:38 official docs
- 02:47:39 and that would be the iron avatar this
- 02:47:42 is a component which can wrap the iron
- 02:47:44 image
- 02:47:44 and the iron image in the end is like
- 02:47:46 the normal image
- 02:47:48 just with some optimizations one of the
- 02:47:50 optimizations being
- 02:47:51 that it's only loading the image when
- 02:47:53 it's uh visible so when the user can
- 02:47:55 actually see it
- 02:47:56 so if it scroll down outside of the
- 02:47:59 current viewport of the user
- 02:48:00 this will not be loaded and i'll bind
- 02:48:03 that
- 02:48:03 with property binding square brackets to
- 02:48:07 my recipe image url here
- 02:48:12 now this avatar here will get a slot of
- 02:48:14 start
- 02:48:15 in the iron items so that it's all the
- 02:48:17 way on the left
- 02:48:19 and next to the avatar i'll add a iron
- 02:48:21 label here
- 02:48:22 as a wrapper around my text simply and
- 02:48:24 there we can use
- 02:48:25 string interpolation to output the
- 02:48:27 recipe title
- 02:48:30 with that let's save it and let's see
- 02:48:32 what we get when this application runs
- 02:48:36 here this looks very nice we got this
- 02:48:39 list of
- 02:48:40 elements and here we already see how
- 02:48:42 ionic
- 02:48:43 components these ones here wrapped into
- 02:48:46 angular components
- 02:48:47 thanks to at ionic angular and angular
- 02:48:50 works together
- 02:48:55 it's time for a second page we do have
- 02:48:58 our
- 02:48:59 list of recipes here and that is of
- 02:49:01 course neat
- 02:49:02 but when we tap a recipe i'd like to
- 02:49:04 display a details page
- 02:49:06 where we can see the image a bit bigger
- 02:49:10 and also viewed a list of ingredients
- 02:49:13 for example
- 02:49:14 now for that i will again run ionic
- 02:49:16 generate
- 02:49:17 and you could now hit enter and select
- 02:49:19 page from the drop down
- 02:49:21 or you simply type ionic generate page
- 02:49:24 and then
- 02:49:24 i'll create this in the recipes folder
- 02:49:26 so i'll start with recipes
- 02:49:28 slash because you can define a path to
- 02:49:30 the component here
- 02:49:32 and then i'll name it recipe dash detail
- 02:49:34 so recipe detail is the newly created
- 02:49:36 component
- 02:49:37 and it is created in the recipes folder
- 02:49:40 so
- 02:49:41 let's wait for this to finish and it's
- 02:49:43 done
- 02:49:44 it again gave us a new component folder
- 02:49:48 with a recipe detailed page
- 02:49:50 component which does have its own module
- 02:49:52 for lazy loading
- 02:49:54 and in the app routing module here we
- 02:49:56 now also have a new path
- 02:49:58 which points at recipe detail and then
- 02:50:01 loads this lazily
- 02:50:04 now of course you don't have to keep
- 02:50:05 that default setup though
- 02:50:07 and i want to have a different one i
- 02:50:09 want to have a path recipes which loads
- 02:50:11 my
- 02:50:11 well recipes page module but then i want
- 02:50:14 to have a path
- 02:50:15 recipes slash some recipe id that loads
- 02:50:19 the recipe detail page
- 02:50:21 now to make this work what we can do is
- 02:50:24 on that recipes route here
- 02:50:27 we can add children which is an array of
- 02:50:31 route definitions and then the first
- 02:50:33 child
- 02:50:34 has a path of empty so just recipes here
- 02:50:38 and this should now load the recipes
- 02:50:41 page module
- 02:50:43 and then i'll add a second child here
- 02:50:46 with a path
- 02:50:46 of colon recipe id and this defines a
- 02:50:50 dynamic segment
- 02:50:51 in angular which means this can actually
- 02:50:53 be anything in the url
- 02:50:55 so recipes slash abc which would reach
- 02:50:58 this
- 02:50:58 recipes slash one two three would too
- 02:51:01 but then we will be able to read that
- 02:51:03 value on the component that is
- 02:51:06 loaded for this page so here i want to
- 02:51:10 load my children i want to load this
- 02:51:13 route so let's add
- 02:51:14 load children here and let's get rid of
- 02:51:16 this recipe detailed
- 02:51:18 path down there so now this is the new
- 02:51:20 routing setup i want to have
- 02:51:22 if we save it like this
- 02:51:26 it should recompile and it should reload
- 02:51:28 and still show us the recipes
- 02:51:30 if i now add slash abc after recipes
- 02:51:33 then it actually loads the recipe detail
- 02:51:35 page here now obviously we don't see
- 02:51:37 anything on that page because we haven't
- 02:51:39 added any logic
- 02:51:40 but this is how the routing will
- 02:51:42 generally work now
- 02:51:43 now that is a good first step now let's
- 02:51:45 make sure that on the recipe detail page
- 02:51:48 we actually do display the details about
- 02:51:50 a recipe
- 02:51:51 and for that i need a global state
- 02:51:53 management solution
- 02:51:54 where i do store the recipes because
- 02:51:56 right now the recipes are stored in the
- 02:51:58 recipes page component
- 02:52:00 here and that is nice for this page but
- 02:52:03 if i need
- 02:52:04 that data in another page i have no easy
- 02:52:06 way of getting access to it
- 02:52:08 yes you could somehow import the recipes
- 02:52:11 page component but that is not how you
- 02:52:12 do that
- 02:52:13 in angular and it would actually lead to
- 02:52:16 strange side effects
- 02:52:17 and not be a good solution instead we
- 02:52:20 want to use a angular service for that
- 02:52:27 let's add an angular service and again i
- 02:52:29 do assume that you know what angular
- 02:52:31 services
- 02:52:32 are and why we would use them we can
- 02:52:35 generate it with the ionic generate
- 02:52:36 command again if you hit enter
- 02:52:38 you'll see that in there you can select
- 02:52:42 a service
- 02:52:43 of course you can also type ionic
- 02:52:44 generate service and then the name
- 02:52:46 or the path of the service but for now
- 02:52:48 i'll go with the drop down
- 02:52:50 so now i'm asked for the name or path of
- 02:52:52 the service
- 02:52:53 and i want to create a recipes service
- 02:52:56 so i'll create it in the recipes folder
- 02:52:58 and then the name of the service will
- 02:53:00 also be recipes so recipes slash recipes
- 02:53:03 it is
- 02:53:04 and this gives me a new recipes service
- 02:53:07 in the recipes
- 02:53:08 folder now this automatically gets at
- 02:53:11 injectable provided in root which
- 02:53:13 ensures that this
- 02:53:14 is provided application wide we can use
- 02:53:17 the same instance of the service in
- 02:53:19 any component any page of the entire app
- 02:53:22 and of course here it's important that
- 02:53:24 we use the same instance so that if our
- 02:53:26 recipes data would change
- 02:53:28 it is reflected in all components and
- 02:53:30 not just in components using that
- 02:53:32 specific service instance
- 02:53:34 and therefore now this is our service i
- 02:53:37 will now take my
- 02:53:38 recipes i have set up in the recipes
- 02:53:40 page and cut them from there
- 02:53:43 and instead add them here to the recipe
- 02:53:46 service
- 02:53:47 now having the recipes in here is of
- 02:53:49 course nice but now we need them back in
- 02:53:52 the recipes page right
- 02:53:53 now how do we do that well it is a
- 02:53:56 public property
- 02:53:57 so we could just access it like this
- 02:54:01 however i will turn it into a private
- 02:54:03 property so that we can't just access it
- 02:54:05 like this
- 02:54:06 and instead i'll add a method which i'll
- 02:54:09 name
- 02:54:10 get all recipes you can name it however
- 02:54:13 you want
- 02:54:14 and there i will return let's say a copy
- 02:54:16 of that recipe array so that if we then
- 02:54:19 would added
- 02:54:20 the array returned by this method inside
- 02:54:23 of the component
- 02:54:24 we wouldn't add it the original array
- 02:54:27 and this is simply related to how arrays
- 02:54:30 and objects work in javascript
- 02:54:32 and that they are reference types and
- 02:54:34 not primitives
- 02:54:36 attached you find an article and video
- 02:54:38 where i dive a bit deeper into that in
- 02:54:40 case you're interested
- 02:54:41 so here i'll create a copy with the
- 02:54:43 spread operator
- 02:54:44 by pointing at this recipes now what
- 02:54:46 this does is it pulls
- 02:54:48 all the elements of this array out of it
- 02:54:51 and then adds it to a new array down
- 02:54:54 there and then i return this new array
- 02:54:56 which is a perfect copy of the old array
- 02:54:58 not of the objects in the array but of
- 02:55:00 the array itself at least
- 02:55:03 now i can also already add a get recipe
- 02:55:06 method which requires a recipe id
- 02:55:10 as an argument and this will return a
- 02:55:12 single recipe
- 02:55:13 for that id so here i want to return
- 02:55:15 this
- 02:55:16 recipes and then i can use the find
- 02:55:18 method which is a default
- 02:55:20 javascript method i can use on arrays
- 02:55:23 and this method takes a function which
- 02:55:25 will execute on every element in the
- 02:55:27 array
- 02:55:28 and then if this function returns true
- 02:55:30 we basically tell
- 02:55:31 find that this is the object we were
- 02:55:33 looking for and it will stop execution
- 02:55:35 and not run
- 02:55:36 find on any other element in the array
- 02:55:38 and give us back that element it was
- 02:55:40 running on
- 02:55:41 instead so the function i pass here gets
- 02:55:44 the recipe as an input because again
- 02:55:46 it executes this function on every
- 02:55:49 element in the array and this is an
- 02:55:50 array of recipes so what we get in every
- 02:55:52 function execution is a single recipe
- 02:55:55 and there i want to return true if this
- 02:55:57 is the recipe i'm looking for
- 02:55:59 and falls otherwise and therefore here
- 02:56:01 in this condition
- 02:56:02 i will compare the idea of the recipe
- 02:56:04 i'm looking at with the recipe idea i
- 02:56:06 got as an argument and if these are
- 02:56:08 equal
- 02:56:08 then i have the recipe i want to return
- 02:56:10 and then i do return
- 02:56:12 it now here just as with the array i
- 02:56:14 will create a copy of that object
- 02:56:17 by wrapping this whole call here
- 02:56:20 in curly braces and then i can use the
- 02:56:22 spread operator here as well
- 02:56:24 this will pull out all the properties of
- 02:56:27 the return recipe object
- 02:56:28 and add them into a new object
- 02:56:31 so this is now the service we can use in
- 02:56:34 the recipes page and the recipe detail
- 02:56:36 page
- 02:56:37 and this is already angular's state
- 02:56:40 management
- 02:56:40 in action it isn't very complex here
- 02:56:44 but writing a similar logic in your
- 02:56:46 vanilla javascript app
- 02:56:49 would already be more complicated and it
- 02:56:51 will become more complicated throughout
- 02:56:53 the course where we will have
- 02:56:54 more and more complex state management
- 02:56:57 so now the recipe service is what i want
- 02:56:59 to use in my components
- 02:57:00 and as you know we can get access to a
- 02:57:03 service by injecting it
- 02:57:04 into a component so here in the recipes
- 02:57:07 page component
- 02:57:09 i want to inject the recipes
- 02:57:12 service and for that you need to define
- 02:57:14 the type here recipes service
- 02:57:17 and you need to import that from your
- 02:57:20 recipe service file by the way
- 02:57:22 in the recipe service you should also
- 02:57:24 make sure you're importing that recipe
- 02:57:26 model
- 02:57:26 so let's add this you can click the
- 02:57:28 light bulb here to get
- 02:57:30 help with that so the recipe model is
- 02:57:33 required because we're referencing it
- 02:57:34 here in the service but back to the page
- 02:57:36 now
- 02:57:37 in the page i'm now injecting the recipe
- 02:57:39 service and i'm using that typescript
- 02:57:41 shortcut
- 02:57:42 where i automatically assign the
- 02:57:44 argument i'm getting here
- 02:57:45 to a private property of this entire
- 02:57:48 class so that i can use the recipe
- 02:57:50 service anywhere in the class and not
- 02:57:52 just in the constructor
- 02:57:53 ngon init then always is a great place
- 02:57:56 for initialization work
- 02:57:58 so here i want to call recipe service
- 02:58:00 get all recipes
- 02:58:02 this returns an array of recipes and i
- 02:58:04 want to store this in this
- 02:58:06 component and therefore here i will
- 02:58:08 re-add my recipes
- 02:58:10 array like this but initially this is
- 02:58:14 undefined
- 02:58:15 and it will be set here so we'll
- 02:58:18 set recipes this recipes so my local
- 02:58:21 property here
- 02:58:22 equal to the recipes returned by get all
- 02:58:24 recipes
- 02:58:27 now what all that gives us is that if i
- 02:58:29 now save this
- 02:58:30 it will recompile and give us the exact
- 02:58:33 same look as before
- 02:58:37 but now we'll also be able to tap into a
- 02:58:41 single recipe on the recipe detail page
- 02:58:43 let's do that next
- 02:58:49 so let's get a single recipe on the
- 02:58:51 recipe detail page
- 02:58:52 now to get it we need the recipe id
- 02:58:55 right because in
- 02:58:56 get recipe we do require the id
- 02:58:59 now conveniently we get that id as a
- 02:59:02 dynamic segment
- 02:59:03 on our path here so on recipe detail
- 02:59:07 page we just need to extract that
- 02:59:08 and for this we can use a default
- 02:59:10 angular strategy
- 02:59:11 where we get information about the
- 02:59:13 activated route
- 02:59:15 activated route you do inject this
- 02:59:18 from at angular router is where you need
- 02:59:20 to import the actuated route
- 02:59:22 and this is an object which you can use
- 02:59:24 an engine in it
- 02:59:26 to then have a look at your param
- 02:59:29 map which is a complex name but which in
- 02:59:31 the end means
- 02:59:32 a map of all the parameters this route
- 02:59:35 receives and parameters are these
- 02:59:37 dynamic url segments
- 02:59:39 now this is not an object with all these
- 02:59:41 segments instead it's a so called
- 02:59:43 observable
- 02:59:44 now observables are a concept heavily
- 02:59:47 embraced by angular as you probably know
- 02:59:49 and will use it a lot in this course
- 02:59:51 attached you find some resources to get
- 02:59:53 you started with observables
- 02:59:55 in case you never heard about them here
- 02:59:57 i do expect you to know the basics about
- 02:59:59 them
- 03:00:00 observables are basically objects you
- 03:00:02 can subscribe to to get
- 03:00:04 data either one-time data like when you
- 03:00:06 are sending an http request or multiple
- 03:00:09 times
- 03:00:09 if you subscribe to something which
- 03:00:11 emits new data every
- 03:00:13 x seconds or whenever a user clicks
- 03:00:15 somewhere or something like this
- 03:00:17 this observable here will emit new data
- 03:00:19 whenever
- 03:00:20 our dynamic segments change even if we
- 03:00:22 are still on the same page
- 03:00:23 but they somehow change because we have
- 03:00:25 a button that changes them
- 03:00:28 in subscribe we pass in a function that
- 03:00:30 will execute when we receive new data
- 03:00:32 and that function will get a per map
- 03:00:35 object
- 03:00:36 and this now actually is the object
- 03:00:37 where we can retrieve our parameters
- 03:00:39 from
- 03:00:40 so first of all i can check if this
- 03:00:43 paramap
- 03:00:44 does not have recipe id as a parameter
- 03:00:49 it should have because we set it up here
- 03:00:51 recipe id
- 03:00:52 but if it somehow wouldn't have it which
- 03:00:54 is very unlikely and unrealistic but if
- 03:00:56 it wouldn't have it
- 03:00:58 then we want to redirect the user here
- 03:01:01 we want to
- 03:01:02 make sure the user leaves the page here
- 03:01:07 and i'll come back to how we can go back
- 03:01:09 programmatically
- 03:01:10 in a second i will also return here
- 03:01:14 so that no other executes runs after
- 03:01:16 this
- 03:01:18 if however we make it after this check
- 03:01:21 here which we should
- 03:01:22 uh in most cases so we do have a recipe
- 03:01:24 id we can extract it
- 03:01:26 so the recipe id can be extracted from
- 03:01:30 the paramap
- 03:01:31 with a get and then the name of the
- 03:01:34 parameter
- 03:01:35 now obviously the name here and here but
- 03:01:37 not this one
- 03:01:39 but string names here have to match
- 03:01:42 the name you set up in your routing
- 03:01:44 configuration without the colon but the
- 03:01:46 part
- 03:01:46 after the colon this has to match
- 03:01:49 so now i'm extracting my id here and now
- 03:01:52 we can use the service to load it
- 03:01:54 so for this we need to inject our recipe
- 03:01:57 service
- 03:01:58 here recipes
- 03:02:02 service like this
- 03:02:06 you need to import that recipes service
- 03:02:10 type from the recipe service file up
- 03:02:12 there
- 03:02:13 and with it injected there i can now
- 03:02:15 reach out to my recipe service
- 03:02:18 get my recipe and pass that recipe id
- 03:02:21 i extracted as an argument now this will
- 03:02:24 return
- 03:02:25 a single recipe and to use it in the
- 03:02:27 template we need to store it in a
- 03:02:28 property of our class here
- 03:02:30 so i'll name this loaded recipe you can
- 03:02:33 name it whatever you want
- 03:02:34 and it will be of type recipe and it is
- 03:02:36 a good pattern a good practice
- 03:02:38 to clearly state the type an object will
- 03:02:42 hold
- 03:02:42 so here i say that this will actually be
- 03:02:46 a recipe or null but initially it's
- 03:02:49 undefined but thereafter once there is
- 03:02:51 data in it it should be of type recipe
- 03:02:53 and for that you need to import recipe
- 03:02:55 from your recipe model
- 03:02:58 so loaded recipes now where i can store
- 03:03:00 this recipe i'm retrieving here
- 03:03:02 like this and now we can access the
- 03:03:04 loaded recipe data
- 03:03:06 in the template of course
- 03:03:09 in the template of the recipe detail
- 03:03:11 page i want to output the image
- 03:03:14 for that i'll remove the padding here
- 03:03:16 and i can simply add iron image
- 03:03:18 and bind its source to my
- 03:03:21 loaded recipe image
- 03:03:24 url and below the image here
- 03:03:29 let me also wrap this into
- 03:03:33 the iron grid actually to control the
- 03:03:35 size of that
- 03:03:37 so here i have my iron column and we'll
- 03:03:40 see how we adjust it later for now i'll
- 03:03:42 just wrap it in there
- 03:03:43 below that in a new iron row in a new
- 03:03:46 iron call you always need to have a
- 03:03:48 column
- 03:03:48 in your rows there i want to have a h1
- 03:03:51 tag with the title
- 03:03:53 so i'll use string interpolation here
- 03:03:55 and then access loaded recipe
- 03:03:58 title and if we have a look at the
- 03:04:02 recipe
- 03:04:03 model then we also have the ingredients
- 03:04:06 it would be nice to output these as well
- 03:04:08 and which better uh component to use
- 03:04:12 than a iron list so in a new row and
- 03:04:15 column
- 03:04:16 i'll add my iron list here
- 03:04:19 and in there again we can use i iron
- 03:04:21 item with ng4
- 03:04:23 to go through all the ingredients so
- 03:04:25 i'll add a loop here
- 03:04:27 let ig for ingredient off
- 03:04:31 loaded recipe ingredients this loops for
- 03:04:34 all the ingredients
- 03:04:35 and i simply output the ingredient name
- 03:04:37 here
- 03:04:38 ig refers to an element in ingredients
- 03:04:40 and ingredients is just an array of
- 03:04:42 strings
- 03:04:42 so we can directly output that here okay
- 03:04:45 nice so this
- 03:04:47 should work now let's have a look if it
- 03:04:50 works
- 03:04:51 remember the ids of our recipes are r1
- 03:04:54 and
- 03:04:54 r2 and therefore if i manually edit the
- 03:04:57 route here in the app
- 03:04:58 and load slash recipes slash r1
- 03:05:02 we should load recipe one and here it is
- 03:05:04 doesn't look too bad we can do something
- 03:05:06 about the styling
- 03:05:07 but it doesn't look too shabby now i
- 03:05:10 actually
- 03:05:11 want to make sure that my title up there
- 03:05:14 doesn't say recipe detail
- 03:05:15 but actually shows the name of the
- 03:05:17 recipe that was loaded
- 03:05:19 so here i will output loaded
- 03:05:22 recipe title with string interpolation
- 03:05:25 you can do this up here too
- 03:05:26 not just in the content of course you
- 03:05:28 can use the loaded recipe anywhere
- 03:05:30 in this angular component and that
- 03:05:33 should be a good first step
- 03:05:34 and i also want to give my toolbar here
- 03:05:37 a color of
- 03:05:38 primary also by the way in the recipes
- 03:05:40 page
- 03:05:42 and then later in the styling and
- 03:05:43 theming module i'll also show you how
- 03:05:45 you can generally
- 03:05:46 set all backgrounds of all toolbars to
- 03:05:49 this primary color instead of having to
- 03:05:52 add this manually
- 03:05:53 to every toolbar but for now we'll do it
- 03:05:56 manually
- 03:05:57 and as this app now reloads this doesn't
- 03:05:59 look too bad
- 03:06:00 now let's also center schnitzel here and
- 03:06:03 make sure that
- 03:06:04 our image here this column in which it
- 03:06:06 is has no padding
- 03:06:08 and for that you can go back to the
- 03:06:09 recipe detail page
- 03:06:11 and on the h1 tag we can center this
- 03:06:14 with the
- 03:06:14 css utility attribute text
- 03:06:17 center which you can learn more about in
- 03:06:19 the official docs of course on ionic
- 03:06:22 framework
- 03:06:23 under developers ui components if you go
- 03:06:25 to the guide
- 03:06:27 and then there under layout css
- 03:06:29 utilities
- 03:06:30 there you find all these utility
- 03:06:32 attributes you can add
- 03:06:34 and i don't just want to center the text
- 03:06:36 on this column which has my image
- 03:06:38 i also don't want to have padding around
- 03:06:40 it so on the column we can add
- 03:06:42 no padding actually and that is
- 03:06:44 something you can also learn when you
- 03:06:46 dive into the official grid
- 03:06:47 documentation
- 03:06:49 this reloads the page it reduces the
- 03:06:51 padding
- 03:06:52 but if we inspect it there still is a
- 03:06:54 little bit of padding around the entire
- 03:06:56 grid well for that let's copy
- 03:06:59 notepadding and add it to the entire
- 03:07:00 grid as well
- 03:07:04 and now this is gone i'm quite happy
- 03:07:07 with that progress but
- 03:07:09 entering the url by hand is not really
- 03:07:11 how we want our users to
- 03:07:13 work with our app right so how can we
- 03:07:15 make sure that when we tap this we go to
- 03:07:17 the second page
- 03:07:23 to go to the recipe detail page when we
- 03:07:25 click a recipe item
- 03:07:27 we can use a feature you already know
- 03:07:30 you can go to the iron
- 03:07:31 item you are rendering in the recipes
- 03:07:33 page which is the item you want to make
- 03:07:34 clickable
- 03:07:35 and you could add a click listener and
- 03:07:37 navigate programmatically
- 03:07:39 but you can also just use router link
- 03:07:42 here
- 03:07:43 as you can do in a normal angular app
- 03:07:46 and that is really amazing in ionic 2
- 03:07:48 and 3
- 03:07:49 you had to use ionic's own navigation
- 03:07:52 solution for going to different parts of
- 03:07:54 the app
- 03:07:54 and it did use angular for the
- 03:07:56 components but added its own
- 03:07:58 navigation now ionic fully embraces
- 03:08:01 angular
- 03:08:02 and it will do the same for react and
- 03:08:03 view by the way and that means that you
- 03:08:05 don't have to
- 03:08:06 keep an eye on ionic and update when
- 03:08:08 that changes and keep an eye on angular
- 03:08:11 and maybe you're not able to update
- 03:08:13 angular because ionic didn't update
- 03:08:15 yet instead you now only depend on
- 03:08:19 angular
- 03:08:19 you use native angular features like
- 03:08:22 angular routing
- 03:08:23 as it is baked into angular and ionic
- 03:08:26 only takes care about
- 03:08:27 offering a nice page transition a nice
- 03:08:29 animation things like that
- 03:08:31 but it gets out of the way when it comes
- 03:08:33 to the heavy lifting
- 03:08:35 so here we can't just enter a link we
- 03:08:36 want to go to when this item is tab
- 03:08:39 and i want to go to a dynamic link of
- 03:08:41 course because the id i want to load
- 03:08:43 differs
- 03:08:44 so i will bind this with square brackets
- 03:08:46 to property binding
- 03:08:48 and then we pass an array of segments in
- 03:08:50 here
- 03:08:51 and we can add a relative link here dot
- 03:08:54 slash
- 03:08:54 and then recipe id and this will now
- 03:08:58 go to slash recipes recipe id
- 03:09:03 now let's see if it works if we save
- 03:09:04 that this page will reload
- 03:09:08 and now if we tap this we go to this
- 03:09:11 page and you have a nice
- 03:09:13 animation for this page transition out
- 03:09:15 of the box
- 03:09:16 now going back would always be nice
- 03:09:18 right where's the back button
- 03:09:20 well the back button has to be added
- 03:09:22 separately so you can control whether
- 03:09:24 you want to have a back button on a page
- 03:09:25 or not
- 03:09:27 now if you have a look at the ionic docs
- 03:09:28 and we go to components
- 03:09:30 then you will see that if you go
- 03:09:34 all the way down to the toolbar
- 03:09:40 there is the iron back button now that
- 03:09:44 back button here
- 03:09:46 has to be included like this you wrap it
- 03:09:48 in an iron buttons component
- 03:09:50 actually which you would also use for
- 03:09:52 other buttons in the toolbar
- 03:09:54 for different actions and you give it a
- 03:09:57 slot of start to position it
- 03:09:59 on the default starting position of the
- 03:10:01 platform typically that is on the left
- 03:10:03 but depending on the platform or on the
- 03:10:07 uh region people are using your weapon
- 03:10:09 it could also be on the right
- 03:10:12 so here i will now add iron buttons
- 03:10:16 in the toolbar and give that a slot of
- 03:10:18 start
- 03:10:20 and in there i'll add my iron back
- 03:10:22 button
- 03:10:24 now on that i and back button you can
- 03:10:26 also set a default ref
- 03:10:29 attribute here for a cases where
- 03:10:32 um this page here we are on the recipe
- 03:10:34 detail page
- 03:10:35 was loaded as a first page because since
- 03:10:38 this is a web app we can of course
- 03:10:39 reload this page and
- 03:10:40 boom here we are and then we have no
- 03:10:43 previous page
- 03:10:44 in ionix history so to say
- 03:10:47 it keeps track of our navigation moves
- 03:10:49 but if we reload the app it reloads that
- 03:10:52 stored stack of pages it thinks in and
- 03:10:55 therefore we can give this a default
- 03:10:57 back link where we say okay if you
- 03:10:59 loaded this app and you don't know where
- 03:11:01 we where we've been previously
- 03:11:02 because maybe we haven't been anywhere
- 03:11:04 previously then
- 03:11:05 i want to go to slash recipes here let's
- 03:11:08 say
- 03:11:09 so if we save all of that as this
- 03:11:12 app reloads here we have the back button
- 03:11:15 we do go back
- 03:11:16 now if i reload on this page here let's
- 03:11:18 try it the other way around
- 03:11:20 now if i go here we got the back button
- 03:11:22 as well
- 03:11:23 now you will notice at least right now
- 03:11:25 if i tab anywhere else
- 03:11:27 we don't navigate again and right now
- 03:11:29 this is a known bug
- 03:11:30 maybe already fixed when you're doing
- 03:11:32 this it is related to a relative path
- 03:11:34 being used here you can simply fix it
- 03:11:37 by using an absolute path here and for
- 03:11:39 now this is the easiest work around
- 03:11:41 use an absolute path for navigation and
- 03:11:44 with that being used
- 03:11:45 you can go back forth and back
- 03:11:49 as often as you want to the different
- 03:11:51 pages
- 03:11:52 so this is how we can navigate around
- 03:11:54 and again most important takeaway
- 03:11:57 you use angular features and ionic just
- 03:11:59 adds animations
- 03:12:01 and ionic also keeps track of your
- 03:12:03 navigation moves
- 03:12:04 it constructs a stack of pages under the
- 03:12:07 hood so to say
- 03:12:08 so that it knows that you now have a
- 03:12:11 previous page you haven't gone back to
- 03:12:14 and you can go back by clicking the back
- 03:12:16 button because if you didn't reload the
- 03:12:18 page here
- 03:12:19 then this back button will even work
- 03:12:21 without the default rev
- 03:12:23 if i temporarily remove that
- 03:12:27 you see as this page reloads now it will
- 03:12:29 not work and not display because it
- 03:12:31 doesn't know
- 03:12:32 where we've previously been if i started
- 03:12:35 on recipes
- 03:12:36 now i do have the button because now
- 03:12:38 ionic keeps track
- 03:12:39 of that for us but more on that in the
- 03:12:43 routing and navigation module where we
- 03:12:45 will dive deeply into how navigation
- 03:12:47 works
- 03:12:48 also how we can integrate tabs and so on
- 03:12:55 we added a service we added basic
- 03:12:57 routing so we added
- 03:12:59 state management and navigation two
- 03:13:01 important features for using angular
- 03:13:03 and of course we have all the other nice
- 03:13:04 features of being able to
- 03:13:06 just use ng4 instead of writing our own
- 03:13:09 javascript logic to add elements
- 03:13:11 dynamically to the dom
- 03:13:12 and this shows us why using angular is
- 03:13:14 nice and it also shows you
- 03:13:16 that it works together with ionic just
- 03:13:19 fine
- 03:13:20 now it is especially awesome to see it
- 03:13:22 work together with angular
- 03:13:23 when we do need extra features like that
- 03:13:26 alert controller remember that
- 03:13:28 previously
- 03:13:29 if we wanted an alert controller we had
- 03:13:31 to integrate
- 03:13:33 ion alert controller as a component
- 03:13:36 and then we had to get access to it
- 03:13:39 programmatically so that we could use it
- 03:13:42 now you see i even get an error that
- 03:13:44 angular doesn't know that alert
- 03:13:45 controller
- 03:13:46 because the ionic angular package
- 03:13:48 doesn't even wrap it
- 03:13:50 into a angular component as it does for
- 03:13:52 all the other
- 03:13:53 components the reason for that is that
- 03:13:55 we now use this alert controller
- 03:13:57 differently
- 03:13:58 more conveniently to show you how to use
- 03:14:01 it
- 03:14:01 let's edit our app a little bit and
- 03:14:03 let's make sure we can delete
- 03:14:04 a recipe here shall we for this in our
- 03:14:07 toolbar
- 03:14:08 i'll add another iron buttons element
- 03:14:11 slot here is primary this will be
- 03:14:14 by default at the end of the toolbar and
- 03:14:17 i'll add a iron button in there
- 03:14:19 where i want to have a iron icon let's
- 03:14:22 find a nice icon
- 03:14:24 for deleting something
- 03:14:27 on ionicons.com
- 03:14:31 if we search for delete this trash bin
- 03:14:33 here will do
- 03:14:34 the name is trash so here i'll give this
- 03:14:38 a name of trash i only want to have the
- 03:14:41 icon so
- 03:14:42 on the iron icon i'll give it a slot of
- 03:14:44 icon
- 03:14:45 only so in that button i'll now only
- 03:14:47 have that icon that is what this does
- 03:14:53 and if you now save that on the app as
- 03:14:57 it reloads
- 03:14:58 if we go to the detail page here you see
- 03:15:00 that trash bin here
- 03:15:01 now when i tap this i want to delete
- 03:15:03 this recipe
- 03:15:04 for that let's go to the recipe service
- 03:15:07 and let's add a
- 03:15:10 delete recipe method and we need the
- 03:15:12 recipe id
- 03:15:14 of the recipe that should be deleted of
- 03:15:16 course and then
- 03:15:17 i will set this recipes equal to
- 03:15:20 this recipe's filter filter is another
- 03:15:24 function built into default normal
- 03:15:26 javascript
- 03:15:27 and this will execute a function on
- 03:15:29 every element in
- 03:15:30 this recipes array and if this function
- 03:15:32 then returns true
- 03:15:34 it will keep this element otherwise it
- 03:15:36 will get rid of it
- 03:15:37 and i of course want to keep all
- 03:15:38 elements but the element with the recipe
- 03:15:40 id here
- 03:15:42 so i go through all my recipes here and
- 03:15:44 i want to return true if i want to keep
- 03:15:46 it and false if i want to drop it
- 03:15:48 so i will return recipe id equal to
- 03:15:51 recipe id
- 03:15:53 that would now return true for all
- 03:15:55 elements where the ids are
- 03:15:57 equal but actually i want to drop the
- 03:15:59 element where the id is equal
- 03:16:00 so i will check if it's not equal here
- 03:16:03 now this is delete recipe
- 03:16:07 with delete recipe added we can use it
- 03:16:09 in the recipe detail
- 03:16:10 component there on this button
- 03:16:14 let's add a click listener and execute
- 03:16:17 on the lead
- 03:16:18 recipe or whatever you want to call it
- 03:16:20 let's add this method in the recipe
- 03:16:22 detail page
- 03:16:23 component file here and in there
- 03:16:26 i want to use my recipe service and call
- 03:16:29 delete recipe
- 03:16:31 for the recipe id we loaded here now
- 03:16:34 i'm only storing it in engion in it but
- 03:16:36 i do have my loaded recipe
- 03:16:38 so this loaded recipe and there the id
- 03:16:42 this isn't the anti-id i want to pass to
- 03:16:44 delete recipe
- 03:16:45 now once we're done deleting of course i
- 03:16:47 want to leave that page because the data
- 03:16:49 for this page will have been gone
- 03:16:51 and therefore i'll inject the router
- 03:16:56 and with that i mean the normal angular
- 03:16:58 router from at
- 03:16:59 angler slash router
- 03:17:03 and after deleting here i will call this
- 03:17:06 router
- 03:17:07 navigate and now i will go to just slash
- 03:17:11 recipes here let's see if that works
- 03:17:20 it does but of course i wanted to show
- 03:17:22 you how we can use that alert controller
- 03:17:24 in a nicer way
- 03:17:30 now for that let's say we want to ask
- 03:17:32 the user whether he really wants to
- 03:17:33 delete the recipe
- 03:17:34 before we go ahead and do it and hence
- 03:17:38 in recipe detail
- 03:17:39 in this recipe detail page i want to
- 03:17:41 show an alert
- 03:17:43 now as i mentioned we don't include iron
- 03:17:45 alert controller
- 03:17:47 in our template anymore and then select
- 03:17:49 it with
- 03:17:50 javascript instead you can now
- 03:17:54 thanks to at ionic angular simply inject
- 03:17:57 your
- 03:17:57 alert controller let's say and the same
- 03:18:00 will work for the other controllers
- 03:18:01 we'll learn about throughout the course
- 03:18:03 and the type here is alert controller
- 03:18:06 now alert controller and that's
- 03:18:08 important needs to be imported
- 03:18:11 from at ionic angular because this
- 03:18:14 wrapper package gives you this
- 03:18:15 convenience
- 03:18:16 access to the alert controller and it
- 03:18:18 does so by not giving you a default
- 03:18:20 component you have to add to your
- 03:18:22 templates and then
- 03:18:23 access manually but by giving you a
- 03:18:25 service
- 03:18:26 in the end that gives you all the
- 03:18:28 features of the alert controller
- 03:18:31 so now we can use this alert controller
- 03:18:33 service down there
- 03:18:35 to create a new alert and here thanks to
- 03:18:38 typescript we even get auto
- 03:18:39 completion and we can see what we can
- 03:18:42 set here by heading
- 03:18:43 control space so we pass our object to
- 03:18:46 create
- 03:18:47 and in there we can see what we can set
- 03:18:50 on this alert for example we can add a
- 03:18:52 header of
- 03:18:53 are you sure and then let's say a
- 03:18:57 message of
- 03:18:58 do you really want to delete the recipe
- 03:19:02 and then we can add some buttons and
- 03:19:04 here i of course
- 03:19:05 also want to give the user the option of
- 03:19:07 replying with
- 03:19:08 no so buttons here will not just be an
- 03:19:11 array where i have
- 03:19:12 okay instead we can pass an object in
- 03:19:16 here
- 03:19:16 to configure a button a bit more detail
- 03:19:19 and
- 03:19:19 that object can have a text a role and a
- 03:19:22 handler
- 03:19:24 now let me add a text here and there i
- 03:19:27 want to have the text
- 03:19:28 of let's say cancel we can give this a
- 03:19:31 roll
- 03:19:32 of cancel and that will actually just
- 03:19:34 close the dialogue and not do anything
- 03:19:36 else
- 03:19:38 and i can add a second button with the
- 03:19:40 text of
- 03:19:41 delete and there well indeed i want to
- 03:19:45 delete this
- 03:19:46 now create returns a promise which
- 03:19:50 actually gives us this alert element
- 03:19:52 this hasn't changed
- 03:19:53 and then we can call alert l percent
- 03:19:59 now i only want to delete if this button
- 03:20:01 is pressed
- 03:20:02 for that i can define a handler here
- 03:20:04 which in the end is just
- 03:20:05 defining a function and here i'm
- 03:20:07 defining an anonymous arrow function
- 03:20:09 that holds the code that should execute
- 03:20:11 when this button is pressed so there i
- 03:20:13 will delete and navigate
- 03:20:14 on cancel i'll do nothing just the alert
- 03:20:16 will be closed
- 03:20:18 then we present this alert here that
- 03:20:20 should be all we need
- 03:20:21 with this alert controller being
- 03:20:23 injected now which of course is pretty
- 03:20:25 nice
- 03:20:26 so let's wait for this and if i now
- 03:20:29 click this
- 03:20:29 trash bin i get this nice alert
- 03:20:32 if i click cancel nothing happens but if
- 03:20:35 i click
- 03:20:36 delete then we go ahead we delete this
- 03:20:38 and we are
- 03:20:39 navigated so this now works as it
- 03:20:42 should work and this is another major
- 03:20:45 advantage of using
- 03:20:46 angular here with the at ionic angular
- 03:20:49 package we got very easy access to the
- 03:20:52 alert controller
- 03:20:53 and we can inject this anywhere where we
- 03:20:55 want to show
- 03:20:56 an alert
- 03:21:02 now with the alert controller added
- 03:21:03 we're pretty much done one of the
- 03:21:05 missing things is that i also want to
- 03:21:06 redirect here
- 03:21:08 in this very unlikely case that we
- 03:21:09 somehow get to this page without having
- 03:21:11 a recipe in the url
- 03:21:13 so i will do that there and with that
- 03:21:16 i'm happy
- 03:21:17 with that uh setup with what we achieved
- 03:21:20 here
- 03:21:21 i hope you see why using angular
- 03:21:24 together with ionic can be helpful and
- 03:21:27 in the end it's just a normal angular
- 03:21:28 app with the ionic magic added to it
- 03:21:31 you could say this therefore is of
- 03:21:33 course the setup i'll continue with for
- 03:21:35 the rest of the course and with which
- 03:21:36 we'll build the entire
- 03:21:38 course project then there's one more
- 03:21:40 thing
- 03:21:41 i want to show you just to make this
- 03:21:42 really clear on how it works and how it
- 03:21:44 works together with ionic
- 03:21:46 obviously in this angular project you
- 03:21:48 can still create your
- 03:21:51 normal angular components which you use
- 03:21:53 with their selectors in your templates
- 03:21:55 so you cannot just generate pages
- 03:21:58 with angular components you can still
- 03:22:01 use them as you use them in any angular
- 03:22:03 project
- 03:22:04 so i can use ionic generate here again
- 03:22:08 and as you will see besides being able
- 03:22:10 to create a page i can also create a
- 03:22:12 normal component
- 03:22:13 so let's go with that of course you
- 03:22:14 could have typed ionic generate
- 03:22:16 component as well
- 03:22:17 and the path will be recipes recipe
- 03:22:20 item here and this will simply be a
- 03:22:23 single recipe item
- 03:22:25 which i output here in my list so i will
- 03:22:27 grab this
- 03:22:28 iron item code here from the recipes
- 03:22:30 page component
- 03:22:32 and add it to the html file of my recipe
- 03:22:34 item component
- 03:22:36 so this is now not a full ionic page it
- 03:22:39 is just
- 03:22:39 keeping or containing some ionic
- 03:22:41 components and it could also
- 03:22:43 just contain other angular components or
- 03:22:46 normal html
- 03:22:48 the key takeaway is this will not be
- 03:22:50 rendered as an ionic page
- 03:22:52 i also don't want to have ng4 on this
- 03:22:55 iron item here
- 03:22:56 instead in recipe item i want to have a
- 03:22:59 property
- 03:23:01 recipe item maybe which will be a recipe
- 03:23:04 so it will be of type recipe and
- 03:23:06 therefore you should import recipe from
- 03:23:08 the recipe model file
- 03:23:09 and this will be bindable from outside
- 03:23:12 how does it work in angular
- 03:23:14 well you add add input in front of it
- 03:23:17 right
- 03:23:18 and input is imported from at angular
- 03:23:20 core so you can
- 03:23:21 continue building these normal angular
- 03:23:23 components with inputs
- 03:23:25 outputs and so on here we're using an
- 03:23:27 input and
- 03:23:28 make recipe item bindable from outside
- 03:23:30 therefore in the template of recipe item
- 03:23:33 i can use recipe item here
- 03:23:36 and here because that is the name of my
- 03:23:38 property now
- 03:23:40 of that bindable property we can now
- 03:23:43 start using recipe item by
- 03:23:45 its selector in our recipes page
- 03:23:49 now recipes module was automatically
- 03:23:52 updated by the ionic cli and it added
- 03:23:56 recipe item component there to the
- 03:23:57 declarations which is correct because i
- 03:24:00 want to use it
- 03:24:01 in this module i want to use it in the
- 03:24:03 recipes page
- 03:24:04 so declaring it in the app module or
- 03:24:07 anything like that would have been wrong
- 03:24:09 you have to declare it in the module
- 03:24:11 where you use it and we do use it here
- 03:24:13 so now in the recipes page component
- 03:24:16 file here
- 03:24:17 we can use app recipe item that is the
- 03:24:20 selector of the component that was
- 03:24:22 created you can of course see that here
- 03:24:24 in the component typescript file and
- 03:24:27 all we have to do is we have to pass in
- 03:24:29 a value for our recipe item
- 03:24:32 now this can be done by still going
- 03:24:34 through all our recipes with ng4 here
- 03:24:38 so recipe of recipes this doesn't change
- 03:24:41 and that recipe
- 03:24:42 is then forwarded as a recipe item to
- 03:24:45 the app recipe item component
- 03:24:48 and with that if you save that it should
- 03:24:51 now rebuild and work in exactly the same
- 03:24:53 way as before
- 03:24:54 here we have our items and we can still
- 03:24:56 tap them and navigate around
- 03:24:58 so this works as before and i'm simply
- 03:25:01 showing you
- 03:25:02 this because i really want to make sure
- 03:25:03 that you understand that this is a
- 03:25:05 normal angular project
- 03:25:07 and you can build angular components as
- 03:25:09 you're used to
- 03:25:10 and indeed if you compare angular
- 03:25:12 components and ionic components
- 03:25:15 you'll see that you use them in a
- 03:25:17 similar way
- 03:25:18 inside of your angular project of course
- 03:25:21 angular components are created by you
- 03:25:23 with that component or you're importing
- 03:25:25 some other third-party library
- 03:25:27 and actually as i mentioned at ionic
- 03:25:29 slash angular
- 03:25:30 this package in the end wraps all the
- 03:25:33 ionic web components
- 03:25:35 into angular components so technically
- 03:25:37 these also are angular components now
- 03:25:40 but they're only thinly wrapped in its
- 03:25:42 core they're still web components
- 03:25:44 so we create our own components with
- 03:25:46 that component
- 03:25:47 we use them inside of our angular
- 03:25:49 templates and that's the only place
- 03:25:51 where we can
- 03:25:51 use them angular will render them to the
- 03:25:53 dom for us we'll
- 03:25:55 render the content of their templates to
- 03:25:56 the dom for us
- 03:25:58 and as i mentioned we can only use
- 03:26:00 angular components in an angular app
- 03:26:03 ionic components
- 03:26:05 well ionic ships these pre-built web
- 03:26:08 components and you can't edit them
- 03:26:10 they're open source but you can't edit
- 03:26:12 them they will not allow you to
- 03:26:14 merge your changes into the ionic
- 03:26:16 repository without a very good reason
- 03:26:18 ionic components use native web
- 03:26:20 technologies they are web components and
- 03:26:22 yes they are
- 03:26:23 wrapped here by at ionic angular but in
- 03:26:26 its core
- 03:26:26 there are still web components in there
- 03:26:28 and you can therefore use these web
- 03:26:30 components
- 03:26:31 anywhere in any project anywhere
- 03:26:34 not just inside of angular apps
- 03:26:37 and i mentioned this a couple of times i
- 03:26:40 think it's pretty clear now
- 03:26:41 it is just important to understand which
- 03:26:43 is why i'm emphasizing this over and
- 03:26:45 over again
- 03:26:50 so that's it with this first angular
- 03:26:53 anionic module
- 03:26:55 this is of course a very simple
- 03:26:56 application we built here we'll build a
- 03:26:58 way more complex application for the
- 03:27:00 rest of this course
- 03:27:02 but i hope that it's now clear how ionic
- 03:27:04 and angular work together that you still
- 03:27:06 only build a normal angular app here but
- 03:27:09 you can use these ionic components
- 03:27:11 that using ionic components is easier
- 03:27:14 especially when you think about things
- 03:27:16 like the alert controller
- 03:27:17 and therefore we now have the best of
- 03:27:19 both worlds let's use that best of both
- 03:27:22 worlds to build amazing apps then
- 03:27:28 what we get thus far in this course is a
- 03:27:30 nice looking web app
- 03:27:31 and that might be all you want to build
- 03:27:33 that is already a part where ionic with
- 03:27:36 its beautiful and feature-rich
- 03:27:37 components can help you
- 03:27:39 but of course historically a big selling
- 03:27:42 point of ionic always was that you can
- 03:27:44 build cross-platform applications
- 03:27:46 that run not only on the web but in the
- 03:27:48 past actually primarily
- 03:27:50 on native devices as real native apps
- 03:27:53 you distribute through the app stores
- 03:27:55 and that hasn't changed just that web
- 03:27:57 apps are now a more realistic option and
- 03:28:00 a fully supported platform as well
- 03:28:02 so in this module we'll focus on the
- 03:28:04 native apps
- 03:28:05 and i will show you how to create apps
- 03:28:08 for android
- 03:28:09 and ios and how to run your app on these
- 03:28:12 devices
- 03:28:13 i'll run it on emulators here but
- 03:28:15 running it on real devices will be
- 03:28:17 exactly the same process
- 03:28:19 so let me show you how you turn your web
- 03:28:21 app into a mobile app now
- 03:28:27 i will continue with the app we built in
- 03:28:29 the last course module
- 03:28:30 this very simple recipe app built with
- 03:28:33 the help of angular
- 03:28:34 now as always the official docs are your
- 03:28:37 friend
- 03:28:38 if you get stuck if something is unclear
- 03:28:40 you find step-by-step instructions here
- 03:28:43 under a guide and then under running on
- 03:28:46 ios or running on
- 03:28:47 android there you'll learn all the steps
- 03:28:50 you need to execute to turn your web app
- 03:28:52 into in this case here an android app
- 03:28:55 and
- 03:28:55 here for ios now important
- 03:28:59 you need to have certain tools installed
- 03:29:02 to succeed here and also important if
- 03:29:06 you're building locally
- 03:29:07 on your machine then you actually
- 03:29:11 need to be on a mac os system to build
- 03:29:14 for ios
- 03:29:15 you can't build ios apps on windows
- 03:29:18 unless
- 03:29:19 you're using ionix paid service app flow
- 03:29:23 that is something you can do and you can
- 03:29:25 learn more about that on
- 03:29:27 ionicframework.com
- 03:29:28 there you can build your app in the
- 03:29:30 cloud instead of on your machine
- 03:29:32 and then on the cloud it can be built on
- 03:29:34 a mac os environment but this is a paid
- 03:29:36 service i'll not be covering it here
- 03:29:38 so if you build it locally as we do then
- 03:29:40 you can only build for ios
- 03:29:42 on mac os systems android apps can be
- 03:29:45 built on both
- 03:29:46 mac os and windows systems as well as
- 03:29:48 linux so
- 03:29:49 what are the requirements then
- 03:29:56 now i want to start with android
- 03:29:57 development and to build your app for
- 03:29:59 android or ios
- 03:30:00 i will use capacitor now you can
- 03:30:02 actually use capacitor or
- 03:30:04 cordova both are tools that in the end
- 03:30:07 can take a web app and wrap it into a
- 03:30:09 native app
- 03:30:10 cordova has been around for a couple of
- 03:30:12 years and in the past ionic only used
- 03:30:14 cordova
- 03:30:15 it still fully supports it but the ionic
- 03:30:18 team now also built their own tool
- 03:30:20 capacitor which does essentially the
- 03:30:21 same but gives you
- 03:30:23 in my opinion nicer api and in this
- 03:30:26 course we'll use capacitor
- 03:30:27 which is under heavy development and
- 03:30:30 will probably see quite an exciting
- 03:30:32 future
- 03:30:33 you can learn more about capacitor on
- 03:30:37 capacitor.ionicframework.com
- 03:30:38 and there in the docs you also learn all
- 03:30:41 about how to use it how to tap into
- 03:30:43 native device features and so on
- 03:30:45 things we'll do later but you also learn
- 03:30:47 how to set up your machine
- 03:30:49 to be able to build for android and ios
- 03:30:52 to start with android here under android
- 03:30:55 click on getting started and there you
- 03:30:57 learn how to configure your machine to
- 03:30:58 build android apps
- 03:31:00 what you'll learn here is that you need
- 03:31:02 to install the android sdk
- 03:31:05 the android sdk tools or build tools in
- 03:31:08 this version or hire and this might
- 03:31:10 change over time so definitely check
- 03:31:12 this page out and you need
- 03:31:14 the android sdk platform api 21 or
- 03:31:17 greater
- 03:31:18 now this is all installed automatically
- 03:31:20 or you're
- 03:31:21 asked to install it automatically when
- 03:31:23 you do install
- 03:31:24 android studio and android studio is a
- 03:31:27 tool you need as well
- 03:31:28 you can google for android studio to
- 03:31:30 find a link to its official
- 03:31:32 page and there you can download android
- 03:31:34 studio onto your machine and then walk
- 03:31:37 through the installer
- 03:31:38 android studio is the official android
- 03:31:40 development environment
- 03:31:42 and will not write code in android
- 03:31:44 studio but we will use it
- 03:31:46 as a build tool so ionic capacitor will
- 03:31:49 use it behind the scenes
- 03:31:50 to create that native app wrapper into
- 03:31:53 which it injects your mobile app you
- 03:31:55 could say
- 03:31:56 so therefore you should download android
- 03:31:59 studio
- 03:32:00 from this android studio page and this
- 03:32:02 will give you an installer for mac
- 03:32:04 and windows and linux through which you
- 03:32:06 can walk now
- 03:32:08 when going through that installer make
- 03:32:10 sure you do install
- 03:32:12 the android sdk tools and the android sk
- 03:32:14 sdk platform as destructed here
- 03:32:16 and if you don't do that during the
- 03:32:18 installation you can still do it
- 03:32:19 thereafter
- 03:32:20 from inside android studio i already do
- 03:32:23 have it installed
- 03:32:25 by going to configure sdk manager there
- 03:32:30 and then here you want to choose an sdk
- 03:32:32 which has at least version 21 or higher
- 03:32:35 and under sdk tools you want to install
- 03:32:38 these android sdk
- 03:32:39 build tools here you also want to
- 03:32:42 install the android sdk tools here
- 03:32:44 in the latest version you see and the
- 03:32:46 platform tools as well
- 03:32:48 i also recommend installing that
- 03:32:50 emulator that hacksam installer here
- 03:32:53 to speed up your emulator if you're
- 03:32:55 running an android emulator
- 03:32:57 to test your app on basically you can
- 03:32:59 also set all the other check marks you
- 03:33:01 see here
- 03:33:02 and also make sure you do install the
- 03:33:04 android emulator
- 03:33:06 um i do have a slightly outdated version
- 03:33:08 here so i'll update it now
- 03:33:09 but you should simply tick this box here
- 03:33:11 and then
- 03:33:12 once you press apply this will install
- 03:33:15 all the things you checked
- 03:33:16 onto your machine and this will install
- 03:33:18 all the tools you therefore need
- 03:33:20 to build android apps
- 03:33:23 with that all installed you can go back
- 03:33:26 to the ionic documentation to see the
- 03:33:28 rest of the steps
- 03:33:29 we can use the ionic cli to basically
- 03:33:32 add
- 03:33:33 android as a supported platform in our
- 03:33:35 project
- 03:33:36 and you do this by inner terminal
- 03:33:39 navigate
- 03:33:39 into your project running ionic
- 03:33:42 capacitor
- 03:33:44 add and then either ios or in our case
- 03:33:47 here
- 03:33:48 android and this will now set this
- 03:33:51 project up such that you can build an
- 03:33:52 android app with it
- 03:33:54 to put it simple it will install an
- 03:33:56 extra package capacitor core
- 03:33:58 and do a couple of other things in
- 03:33:59 configurations and actually add a brand
- 03:34:02 new folder
- 03:34:02 with your android app inside of it now i
- 03:34:06 actually got an
- 03:34:07 error here the capacitor could not find
- 03:34:09 the web assets directory
- 03:34:11 and then this path here now this is
- 03:34:13 pretty normal if you never build your
- 03:34:15 app
- 03:34:16 simply run ng-build to fix this
- 03:34:19 ng-build will now build your angular app
- 03:34:22 and you always need to do that before
- 03:34:24 you can turn it into a native mobile app
- 03:34:26 because you will wrap your finished
- 03:34:28 build app
- 03:34:29 into that native mobile app so once this
- 03:34:32 build process finished you got this www
- 03:34:35 folder and that is exactly the folder
- 03:34:37 that was missing
- 03:34:38 so let's now rerun ionic capacitor at
- 03:34:41 android and now this should succeed so
- 03:34:45 let's wait for that to finish
- 03:34:47 and here it is so now it is finished and
- 03:34:50 you should now have a new
- 03:34:52 android folder in there now this is the
- 03:34:55 android app and this is actually a
- 03:34:57 folder you could now open in android
- 03:34:59 studio to launch your app
- 03:35:01 this is the native app so to say it
- 03:35:03 holds all the code for the native app
- 03:35:05 and it also will hold your web app
- 03:35:08 bundled into that native
- 03:35:10 app now if you have a look at the
- 03:35:12 official docs
- 03:35:14 you also see what you would do if you
- 03:35:16 were to use cordova which i'll not cover
- 03:35:18 here though
- 03:35:19 for us the next important step is that
- 03:35:21 we want to set the package id
- 03:35:23 for this app you can set that in the
- 03:35:25 capacitor config.json file
- 03:35:27 here it's this app id and i will name
- 03:35:30 this here to com
- 03:35:32 udemy course ionic angular
- 03:35:36 you typically use an identifier that
- 03:35:37 looks like a reverse url here
- 03:35:40 and you're free to use any identifier
- 03:35:42 you want the idea here is that your app
- 03:35:44 has a unique identifier that
- 03:35:46 differentiates it from all the other
- 03:35:48 apps in the app store
- 03:35:52 now with this setup what we can do is we
- 03:35:54 can run ionic capacitor copy android
- 03:35:57 now this is a command you should always
- 03:35:59 execute after you
- 03:36:01 created a new build with ng build
- 03:36:03 because ionic
- 03:36:04 capacitor
- 03:36:07 copy android will basically copy your
- 03:36:10 www
- 03:36:11 folder into this native app and bundle
- 03:36:14 it into that again so to say
- 03:36:16 this is a command you have to run before
- 03:36:18 you can
- 03:36:19 run your native app and see it you can
- 03:36:22 also type
- 03:36:23 ionic capacitor run android
- 03:36:26 and what this will do is it will execute
- 03:36:29 all these previous steps for you
- 03:36:31 it will run ng build essentially and
- 03:36:33 thereafter it will copy the www
- 03:36:36 folder into the native app for you so it
- 03:36:39 does all of that
- 03:36:40 and it then even opens the android
- 03:36:42 folder in
- 03:36:43 android studio and that is important
- 03:36:45 because you can launch your app
- 03:36:47 from inside there now so
- 03:36:50 when this opens for the first time let
- 03:36:52 it finish all its
- 03:36:53 tasks it's executing there they should
- 03:36:56 all finish without
- 03:36:57 errors so let's wait for that to finish
- 03:37:00 on the first load this will take a
- 03:37:02 little longer subsequent loads will be
- 03:37:04 faster no worries
- 03:37:06 and here it did finish this error here
- 03:37:08 actually is just a warning we should be
- 03:37:10 fine
- 03:37:11 and now we can launch our app now for
- 03:37:13 that we need an emulator up and running
- 03:37:15 and you can go to tools avd manager here
- 03:37:18 to create one
- 03:37:20 now i already created a couple of
- 03:37:22 virtual devices
- 03:37:23 here on the bottom left you can click on
- 03:37:25 create virtual device to build a new one
- 03:37:28 then choose any of these blueprints like
- 03:37:30 the pixel 2
- 03:37:32 click next choose the latest
- 03:37:35 stable version of android here
- 03:37:39 and then simply finish this you should
- 03:37:41 be able to use all the default settings
- 03:37:43 now you can launch such an emulator by
- 03:37:46 clicking that green play button there
- 03:37:48 and this will now open up that emulator
- 03:37:50 here it is
- 03:37:51 and there you can see your app now you
- 03:37:54 can also connect your real device
- 03:37:56 cue your computer and turn on the
- 03:38:00 developer options
- 03:38:01 there after this lecture here you'll
- 03:38:04 find a lecture where i explain how it
- 03:38:06 works
- 03:38:07 and then run the app on your real device
- 03:38:09 that works as well
- 03:38:11 here i'll go with the emulator let's
- 03:38:13 wait for the emulator to finish
- 03:38:15 booting up so here it did now finish
- 03:38:18 booting
- 03:38:18 and now back in android studio remember
- 03:38:21 this is the android folder from our
- 03:38:22 project which was opened there for us by
- 03:38:24 capacitor
- 03:38:26 you can now click that green layout icon
- 03:38:28 here
- 03:38:30 and then choose the emulator or
- 03:38:32 connected device you want to run the app
- 03:38:34 on and here i'll use that connected
- 03:38:35 emulator which
- 03:38:36 is already up and running and press ok
- 03:38:39 and this will now
- 03:38:40 actually build the native app that wraps
- 03:38:42 your web app
- 03:38:43 and then automatically install it on
- 03:38:45 that emulator
- 03:38:46 or real device and launch it there so
- 03:38:49 let's wait for that to finish
- 03:38:52 the build process succeeded it's now
- 03:38:54 installing this app
- 03:38:56 on the emulator on the connected device
- 03:38:58 here
- 03:39:00 and here the app is now the startup time
- 03:39:04 here
- 03:39:04 on my machine is not super fast because
- 03:39:06 i'm also recording and everything so
- 03:39:08 this machine here is pretty on its limit
- 03:39:11 it actually does
- 03:39:12 start up quite fast and you can demo
- 03:39:14 this by connecting a real device because
- 03:39:16 emulators also always are a bit slower
- 03:39:19 now here what we can see though and
- 03:39:23 again
- 03:39:23 any uh lag here is really just caused by
- 03:39:26 me recording
- 03:39:27 we can see this application works
- 03:39:30 exactly
- 03:39:31 as it should work and exactly as we saw
- 03:39:34 it in the browser
- 03:39:35 but now this is a real native app
- 03:39:38 on our emulator here installed
- 03:39:41 as a native app there now for the
- 03:39:44 majority of the course i will actually
- 03:39:46 keep on
- 03:39:46 developing here with the help of the
- 03:39:48 browser simply because that's easier to
- 03:39:50 debug
- 03:39:51 it updates faster and so on but being
- 03:39:53 able to
- 03:39:54 build that native app and see it run
- 03:39:56 here of course is a core part
- 03:39:58 of ionic and this is how you do go
- 03:40:00 through that process
- 03:40:02 now one note of course
- 03:40:05 when you run ionic capacitor run android
- 03:40:08 all these steps are executed for you
- 03:40:10 and with the emulator up and running all
- 03:40:12 you have to do is press that play button
- 03:40:15 but you can also execute ionic capacitor
- 03:40:17 run android
- 03:40:18 with dash l after it which stands for
- 03:40:22 live
- 03:40:22 reload now what this will do is it will
- 03:40:25 actually not
- 03:40:26 build the app but run ng-surf and
- 03:40:28 therefore
- 03:40:29 run the same command we used before for
- 03:40:31 having the server to visit it here in
- 03:40:33 the browser
- 03:40:34 and then it gives you a native app that
- 03:40:36 actually talks to that server
- 03:40:38 running on your mac or windows machine
- 03:40:42 and that will automatically update the
- 03:40:44 app on the native device
- 03:40:46 when your code changes so you get the
- 03:40:48 same behavior as you do in the browser
- 03:40:51 with live updates
- 03:40:52 on the native device now and you don't
- 03:40:54 have to rebuild
- 03:40:55 the app after every change you want to
- 03:40:58 see reflected here now
- 03:41:00 from my experience this live reload
- 03:41:02 process
- 03:41:04 is a bit clunky and sometimes doesn't
- 03:41:07 work
- 03:41:07 perfectly but generally this is a nice
- 03:41:10 thing to have
- 03:41:11 and definitely something you should
- 03:41:12 experiment with because it can be
- 03:41:15 really useful and can speed up your
- 03:41:18 development flow
- 03:41:20 if i now build a start this app again
- 03:41:23 here
- 03:41:23 after i started this live reload
- 03:41:26 process and build my app with that
- 03:41:29 and now with that app running again if i
- 03:41:33 now
- 03:41:33 change something in code let's say on
- 03:41:36 the recipe page here
- 03:41:38 where i have recipes as a title title if
- 03:41:41 i add an exclamation mark and i save
- 03:41:43 that
- 03:41:43 it will now rebuild because i have that
- 03:41:46 server up and running which was
- 03:41:47 started by ionic capacitor run android
- 03:41:51 l and by the way you can therefore now
- 03:41:54 also connect to that on your browser
- 03:41:56 again and you will see your changes
- 03:41:58 there
- 03:41:59 but now this all the live updated as you
- 03:42:01 can tell here
- 03:42:02 in the native mobile app and that can
- 03:42:05 speed up the workflow when you want to
- 03:42:07 preview your changes
- 03:42:08 inside of your real native mobile app
- 03:42:11 and not just in the browser
- 03:42:12 and let me also emphasize one more time
- 03:42:14 this is a mobile app as you could
- 03:42:16 install it from the app store
- 03:42:18 this is not the browser on the mobile
- 03:42:20 app hosting the web app
- 03:42:21 this is a custom native mobile app
- 03:42:29 in the last lecture we had a look at
- 03:42:31 getting the app
- 03:42:32 up and running with android now maybe
- 03:42:35 you're not developing for android or at
- 03:42:37 least not exclusively but also for ios
- 03:42:40 and for this in the official ionic docs
- 03:42:42 under a guide here
- 03:42:43 you should also check out running on ios
- 03:42:47 now again i will use capacitor you could
- 03:42:49 use cordova and here you will also find
- 03:42:52 steps on how to use cordova
- 03:42:54 but capacitor is developed by the ionic
- 03:42:56 team and i see the brighter future for
- 03:42:58 that
- 03:42:58 and therefore i will go with capacitor
- 03:43:01 in this course
- 03:43:02 now you can run these commands to set up
- 03:43:05 your app for ios and run it on an ios
- 03:43:07 device but first of all you need to make
- 03:43:09 sure that you have
- 03:43:10 the ios development environment set up
- 03:43:14 since we use capacitor you can visit
- 03:43:17 capacitor.ionicframework.com and then go
- 03:43:18 to the docs there
- 03:43:20 and there you'll find an ios section
- 03:43:23 here you find a detailed description of
- 03:43:25 what you need to have set up on your
- 03:43:27 machine
- 03:43:28 to build ios apps and in detail that is
- 03:43:31 xcode version 9 or higher and you should
- 03:43:33 check these docs
- 03:43:35 for updates if that changes and the
- 03:43:37 xcode command line tools
- 03:43:39 now you get xcode from the app store on
- 03:43:42 your mac
- 03:43:43 and as i mentioned before you need a mac
- 03:43:45 to
- 03:43:46 build ios apps on your system
- 03:43:50 in the app store you can search for
- 03:43:52 xcode and i already do have it installed
- 03:43:54 if you don't
- 03:43:55 install it from there it's free you also
- 03:43:58 don't need a paid apple developer
- 03:44:00 account for this
- 03:44:02 with xcode installed you need the xcode
- 03:44:05 command line tools
- 03:44:06 and you get these by opening your
- 03:44:09 terminal on your mac and then you can
- 03:44:12 type xcode
- 03:44:13 dash select now if this gives you
- 03:44:16 something like this
- 03:44:17 so maybe an error but just an error that
- 03:44:20 you didn't choose a specific command
- 03:44:22 you already got them installed only if
- 03:44:24 it tells you something like command
- 03:44:25 not found or operation not found then
- 03:44:28 you don't have it installed and you can
- 03:44:30 then simply install them by typing
- 03:44:32 xcode select dash dash install
- 03:44:35 and this will now install the xcode
- 03:44:38 command line tools
- 03:44:40 now i already have them installed hence
- 03:44:42 i don't need to do that but
- 03:44:43 if you don't well then this command here
- 03:44:46 gives you the xcode
- 03:44:47 command line tools with all of that
- 03:44:50 installed
- 03:44:51 you can go back to the ionic docs and
- 03:44:53 use the commands here
- 03:44:54 to add ios as a platform to your project
- 03:44:57 and then also run your app on ios
- 03:45:01 so back in the project i'll start with
- 03:45:03 ionic capacitor
- 03:45:07 add ios this command enables ios as a
- 03:45:11 platform in this project
- 03:45:14 here however i get an error regarding my
- 03:45:16 app id
- 03:45:18 dashes are not wanted here actually
- 03:45:23 so make sure to remove them
- 03:45:28 now let me try this command again and
- 03:45:30 what this command does is
- 03:45:32 just as before we got the extra android
- 03:45:34 folder now we get the ios folder
- 03:45:36 and this is a folder you can open with
- 03:45:38 xcode and it has
- 03:45:40 the native xcode app in there which will
- 03:45:42 wrap
- 03:45:43 your web app your ionia app
- 03:45:47 now with that created the next step is
- 03:45:50 that you build your project with ng
- 03:45:53 build
- 03:45:53 because you can only ship that build
- 03:45:55 project into your
- 03:45:57 uh native app wrapper so to say
- 03:46:00 um you will also learn how to have a
- 03:46:03 dynamically reloaded app up and running
- 03:46:06 and connected to your ios device by the
- 03:46:08 end of this video here
- 03:46:09 but for now let's go with that build
- 03:46:11 process
- 03:46:13 this spits out a www folder and that
- 03:46:16 contains your build angular project
- 03:46:18 you can now run ionic capacitor
- 03:46:23 copy ios and this will copy this www
- 03:46:26 folder into your ios folder and
- 03:46:28 basically into the place where it needs
- 03:46:30 to be
- 03:46:31 for it to be wrappable by this native
- 03:46:34 app you get out of the box by capacitor
- 03:46:37 you can also run ionic capacitor
- 03:46:41 run ios and this will combine the build
- 03:46:44 process
- 03:46:45 and the copy process for you that of
- 03:46:47 course is the more convenient command
- 03:46:49 therefore
- 03:46:50 so this is the command i will from now
- 03:46:52 on use but behind the scenes it does the
- 03:46:54 two steps you saw before
- 03:46:57 now it does not only copy your files it
- 03:47:00 also
- 03:47:00 should open xcode for you now
- 03:47:04 and it does not only open xcode but it
- 03:47:06 opens xcode
- 03:47:07 with your ios folder already selected
- 03:47:10 there so this is
- 03:47:10 inside of your ios folder now now
- 03:47:14 for this to work you should select app
- 03:47:16 in xcode
- 03:47:17 and then here under signing make sure
- 03:47:20 you select
- 03:47:21 a team if you don't see a team here add
- 03:47:24 an
- 03:47:24 account and simply log in with your
- 03:47:26 apple id
- 03:47:27 here and make sure you do also create an
- 03:47:30 apple developer account
- 03:47:32 for this id you can do that on
- 03:47:35 developer.apple.com
- 03:47:36 and then you sign in with your apple id
- 03:47:38 and basically sign up to be an apple
- 03:47:40 developer
- 03:47:41 this is free there is a paid version but
- 03:47:43 you'll only need
- 03:47:44 that once you plan on shipping your app
- 03:47:46 to the app store
- 03:47:47 as long as you're only developing you
- 03:47:49 don't need to pay
- 03:47:51 so thereafter select your team here and
- 03:47:53 now the error here should go away
- 03:47:55 if there still are errors there also
- 03:47:57 should be a description on how to get
- 03:47:59 rid of them
- 03:48:00 now with that set up and you will need
- 03:48:03 to do that
- 03:48:04 whenever you delete the ios folder
- 03:48:07 and re-edit with ionic capacitor at ios
- 03:48:11 so with that set up you can now run your
- 03:48:13 app here you can choose a simulator you
- 03:48:16 want to run the app on
- 03:48:17 and if you have a real device connected
- 03:48:19 to your machine you'll be able to choose
- 03:48:20 that here as well
- 03:48:22 a real iphone i mean and
- 03:48:25 then you click that play button and this
- 03:48:26 will now build the app you can ignore
- 03:48:28 any warnings you see here
- 03:48:30 it will build the native app the real
- 03:48:32 native app you're getting wanna
- 03:48:33 emphasize this we're talking about a
- 03:48:35 real app here
- 03:48:36 it will start a simulator if that isn't
- 03:48:39 running already the simulator you
- 03:48:41 selected basically
- 03:48:43 and it will then start the native app in
- 03:48:45 that simulator and that native app
- 03:48:47 is that wrapper around your ionic app in
- 03:48:50 the end
- 03:48:51 so let's wait for this to start up and
- 03:48:54 here is our application coming
- 03:48:56 up and the first start can always take a
- 03:48:58 bit longer here
- 03:49:00 don't worry about that it will be super
- 03:49:02 fast once you
- 03:49:03 do deploy it onto a real device and test
- 03:49:06 it there
- 03:49:07 and now here we got the behavior we saw
- 03:49:09 before and we also see
- 03:49:11 of course that we got the ios specific
- 03:49:14 back button and so on
- 03:49:15 so this looks really really nice we do
- 03:49:18 get the look and feel we would expect
- 03:49:20 it to have from the web app we built
- 03:49:23 before
- 03:49:24 so now this is our app running on a
- 03:49:27 native device on
- 03:49:28 ios but of course it's a bit cumbersome
- 03:49:32 if we always have to rerun ionic
- 03:49:34 capacitor run ios
- 03:49:36 and then press the play button here
- 03:49:38 whenever we change something in the code
- 03:49:40 we want to see here
- 03:49:41 and indeed there is a simpler method
- 03:49:45 you can run ionic capacitor run ios
- 03:49:48 with dash l added after it
- 03:49:51 l stands for live reload and now this
- 03:49:54 will not run ng build
- 03:49:55 but ng serve actually and it will bring
- 03:49:58 up that development server we already
- 03:50:00 connected to before
- 03:50:01 from our web app and you can indeed
- 03:50:05 connect again from the web app
- 03:50:07 and it will do the exact same steps as
- 03:50:09 before otherwise
- 03:50:10 but now if you start the app and you
- 03:50:12 have to restart it once now stop the old
- 03:50:14 process restart the new app
- 03:50:16 now this app will be connected to your
- 03:50:19 live reload
- 03:50:20 server so now whenever you change
- 03:50:22 anything in your code
- 03:50:23 the app here will automatically reload
- 03:50:25 just as the app in the browser does
- 03:50:27 let me demonstrate this if i go to my
- 03:50:30 recipes page here
- 03:50:31 and i add two exclamation marks after
- 03:50:34 recipes in the title
- 03:50:36 then here's our web app i have one
- 03:50:38 exclamation mark here from before when i
- 03:50:40 showed this
- 03:50:41 uh in the android video we can reload
- 03:50:44 this too by the way this is connected to
- 03:50:46 the same development server
- 03:50:48 and here we do see the two exclamation
- 03:50:50 marks
- 03:50:51 but we also see them in the native
- 03:50:53 device on the emulator
- 03:50:55 and this of course can speed up your
- 03:50:56 development workflow because now you can
- 03:50:58 write your code
- 03:50:59 change it and have your changes
- 03:51:01 reflected on the emulator or the real
- 03:51:04 device
- 03:51:04 instantly or pretty fast at least now to
- 03:51:07 my experience this can be a bit clunky
- 03:51:09 and sometimes you get results that
- 03:51:11 actually differ from the results you get
- 03:51:13 when building it and then running it
- 03:51:15 manually
- 03:51:16 so therefore this will not be my
- 03:51:17 primarily development process
- 03:51:19 instead i will stick to the browser app
- 03:51:21 simply because it's faster and easier to
- 03:51:23 debug
- 03:51:24 but now you know how you get that native
- 03:51:27 app too how you can test your app
- 03:51:29 on the native device and obviously will
- 03:51:31 test it there from time to time in the
- 03:51:33 course
- 03:51:34 as well
- 03:51:39 so in this module i walked you through
- 03:51:42 capacitor
- 03:51:43 and i explained how you can use
- 03:51:44 capacitor to get a real native app that
- 03:51:47 holds your ionic app for both android
- 03:51:50 and ios
- 03:51:51 you saw how you can easily build your
- 03:51:54 app for
- 03:51:54 android and ios and run it on emulators
- 03:51:57 or
- 03:51:58 real devices through android studio or
- 03:52:00 xcode
- 03:52:01 you also saw that live reload mechanism
- 03:52:04 and i did mention that i will stick
- 03:52:06 to the web app for now because it's a
- 03:52:08 bit faster and easier to debug
- 03:52:10 nonetheless now we know how to build a
- 03:52:13 web app we know how to build our native
- 03:52:15 apps
- 03:52:16 and that already allows us to build apps
- 03:52:19 for
- 03:52:19 free platforms with one and the same
- 03:52:22 code base
- 03:52:23 and that is just amazing now
- 03:52:26 let's continue with ionic now and with
- 03:52:29 developing ionic apps
- 03:52:31 because now we know how to turn them
- 03:52:32 into what we want them to be
- 03:52:34 well now we can focus on the logic
- 03:52:36 inside the app again
- 03:52:40 that's it for the introduction you
- 03:52:43 learned how ionic works how you can use
- 03:52:45 the many built-in components
- 03:52:47 and how you can build amazing
- 03:52:49 applications with ionic and with angular
- 03:52:52 and why you might want to use angular
- 03:52:54 you also learned how you can
- 03:52:56 use your ionic angular web applications
- 03:52:59 and turn them into real native
- 03:53:01 applications with the help of capacitor
- 03:53:04 now if you want to dive even deeper and
- 03:53:06 learn way more
- 03:53:07 then i strongly recommend taking my full
- 03:53:10 course
- 03:53:10 you'll find a link to that course with a
- 03:53:12 very nice discount below the video in
- 03:53:14 the video description
- 03:53:16 and i'd love to welcome you there in
- 03:53:18 that course you will learn things like
- 03:53:20 styling and theming your ionic angular
- 03:53:22 apps adding features like
- 03:53:24 google maps or accessing the device
- 03:53:26 camera
- 03:53:27 locating the user authentication and
- 03:53:30 much
- 03:53:31 much more the parts you already saw in
- 03:53:35 this video are actually taken from that
- 03:53:37 course
- 03:53:37 and therefore if you decide to go with
- 03:53:40 the course
- 03:53:41 you can skip all these fundamentals and
- 03:53:43 dive right into
- 03:53:44 the next more advanced parts i'd love to
- 03:53:47 welcome you on board of this course
- 03:53:49 and hopefully see you there
- 03:54:12 you