Coding

Angular – Common Questions (and Answers!)

  • 00:00:01 welcome to this video where I want to
  • 00:00:03 dive into some common angular questions
  • 00:00:05 now to be honest these are just a
  • 00:00:08 questions that came into my mind when I
  • 00:00:10 thought about which questions I see a
  • 00:00:12 lot if you got our questions please
  • 00:00:15 share them in the comments of the video
  • 00:00:17 I probably won't be able to answer them
  • 00:00:19 all there but I will note them and I
  • 00:00:21 might do another video of this kind in
  • 00:00:23 the future and with that let's just get
  • 00:00:25 started and see which questions I got
  • 00:00:30 let's start with one thing that
  • 00:00:33 sometimes leads to a lot of confusion
  • 00:00:35 the angular version jungle we got
  • 00:00:38 angular 2 4 5 6 soon at least so what
  • 00:00:44 are all these versions about well let's
  • 00:00:46 have a look in the past we had angular 1
  • 00:00:51 it was released in 2010 and it was not
  • 00:00:55 the first JavaScript framework
  • 00:00:57 manipulating the Dom but it still
  • 00:01:00 started a little bit of a revolution you
  • 00:01:02 could say it subtly allowed people to
  • 00:01:05 create single page applications
  • 00:01:07 it made controlling the DOM and
  • 00:01:10 dynamically rendering content there so
  • 00:01:12 much easier and it still also had issues
  • 00:01:16 performance could become an issue in
  • 00:01:18 bigger apps and this was one of the
  • 00:01:20 major reasons why the team decided to do
  • 00:01:23 a complete rewrite of angular and
  • 00:01:25 release angular 2 in 2016 now the road
  • 00:01:29 to angular 2 was pretty long a lot of
  • 00:01:32 versions were released in between a lot
  • 00:01:34 of beta versions but in the end we had a
  • 00:01:36 brand new framework that still allows us
  • 00:01:39 to create engaging user experiences in
  • 00:01:42 the browser but with a different focus
  • 00:01:45 angular 2 and all the words thereafter
  • 00:01:48 focus on creating single page
  • 00:01:50 applications and they are highly
  • 00:01:52 component driven so like and react and
  • 00:01:55 so on you build components so the key
  • 00:01:59 takeaway here is that angular 2 has
  • 00:02:01 nothing in common with angular 1 it's a
  • 00:02:04 complete rewrite and it inherits some
  • 00:02:07 concepts but the majority of things you
  • 00:02:10 use an angle or q is brand you or works
  • 00:02:13 totally different than it did in angular
  • 00:02:15 1 now what about the other versions now
  • 00:02:18 due to that difference in the
  • 00:02:21 capabilities we nowadays typically refer
  • 00:02:24 to angular 1 as angularjs that's the
  • 00:02:28 name of the framework nowadays and
  • 00:02:29 angular q and all versions thereafter
  • 00:02:32 are simply referred to as angular just
  • 00:02:36 angular speaking of that why do we have
  • 00:02:39 more words than just angular q because
  • 00:02:42 the angular team adopted
  • 00:02:44 semantic versioning which means there
  • 00:02:46 are major releases minor releases and
  • 00:02:50 patch releases so maybe they're just
  • 00:02:52 fixing some bugs maybe they're
  • 00:02:54 introducing some major new features and
  • 00:02:57 the word number indicates that the
  • 00:02:59 important thing is angular free and four
  • 00:03:01 and so on are not complete rewrites of
  • 00:03:04 angular 2 speaking of that we never had
  • 00:03:07 an angular free due to internal version
  • 00:03:09 differences with the router and so on so
  • 00:03:12 angular 4 was the next release and
  • 00:03:14 thereafter we had 5 6 and so on now at
  • 00:03:18 the point of time recording this angular
  • 00:03:20 6 isn't out yet but new versions will
  • 00:03:22 come out every few months due to that
  • 00:03:25 semantic versioning and you can actually
  • 00:03:28 see a schedule of past and future
  • 00:03:31 angular versions on the official angular
  • 00:03:34 github repository a link to that
  • 00:03:36 schedule can be found in the video
  • 00:03:37 description there you see the more
  • 00:03:40 recent versions that we're released in
  • 00:03:42 the past and when we will see angle or 6
  • 00:03:45 & 7 approximately now again if you look
  • 00:03:48 at these versions it looks like
  • 00:03:49 everything you'll learn will be well
  • 00:03:52 stuff you don't need once the new
  • 00:03:54 version is out and that is not the case
  • 00:03:56 the version upgrades are backward
  • 00:03:59 compatible and thus far until angular 5
  • 00:04:03 we had no upgrade that introduced any
  • 00:04:06 major breaking changes at all and there
  • 00:04:09 is a long term version support so
  • 00:04:11 version which will receive security
  • 00:04:13 patches and so on even if it's a bit
  • 00:04:15 older currently that's angular 4 so you
  • 00:04:18 can find more information on that page
  • 00:04:19 the key takeaway is angular 5 6 7 and so
  • 00:04:23 on is the new normal it e because it's
  • 00:04:26 not a new framework every time it's just
  • 00:04:28 an update just as we have react 16 17 15
  • 00:04:32 and so on now that we understood the
  • 00:04:35 different versions of angular let's have
  • 00:04:37 a look at how we create angular projects
  • 00:04:39 now chances are you already noticed and
  • 00:04:41 I'm not going to show you the exact
  • 00:04:43 steps here you might know that there is
  • 00:04:45 the angular CLI you can use the question
  • 00:04:48 is do I need the CLI do you need to see
  • 00:04:51 why I get this question a lot people
  • 00:04:54 especially people coming from jQuery or
  • 00:04:57 angular
  • 00:04:57 one are used to dropping the angle
  • 00:05:00 import into their HTML files and
  • 00:05:03 starting to use angular unfortunately
  • 00:05:06 that does not work with angular 2 plus
  • 00:05:09 one of the major reasons is that we use
  • 00:05:11 typescript instead of vanilla JavaScript
  • 00:05:13 so the language in which we write our
  • 00:05:15 code doesn't run natively in the browser
  • 00:05:18 obviously we need a compilation step in
  • 00:05:20 between and whilst theoretically you
  • 00:05:23 could do that compilation in the browser
  • 00:05:25 it's not really recommended it's a big
  • 00:05:28 performance hit we also have components
  • 00:05:31 and templates that use the angular
  • 00:05:33 template language this also needs to be
  • 00:05:36 compiled by angular so from JavaScript
  • 00:05:38 to JavaScript but to a different
  • 00:05:41 JavaScript which has a meaning to
  • 00:05:42 angular and this could also happen in
  • 00:05:44 the browser but again for performance
  • 00:05:46 reasons it's recommended to do this on
  • 00:05:48 the client so in your own your
  • 00:05:50 development machine actually and we also
  • 00:05:53 probably want to employ some
  • 00:05:54 optimizations like minifying our code
  • 00:05:57 and so on this also should be done
  • 00:05:59 during development or at the end of it
  • 00:06:01 right before shipping the app to
  • 00:06:02 production so whilst we do have all
  • 00:06:05 these options of running the types of
  • 00:06:07 compilation in the browser or running
  • 00:06:09 the angular template compilation in the
  • 00:06:11 browser this does not work so we want to
  • 00:06:14 do it in the development setup in the
  • 00:06:16 development workflow and the same is
  • 00:06:19 true for bundling minifying implementing
  • 00:06:21 lazy loading and stuff like that now for
  • 00:06:24 that we use tools like web pack or
  • 00:06:27 typescript of course also minification
  • 00:06:30 optimization tools and babel possibly to
  • 00:06:34 also transpile some features though here
  • 00:06:38 we use typescript so probably not there
  • 00:06:40 are more tools still included in all of
  • 00:06:43 that for all the optimizations and all
  • 00:06:45 these steps and you can set up such a
  • 00:06:48 workflow on your own what you can't do
  • 00:06:50 is just drop it into the browser and use
  • 00:06:52 it without taking a huge performance hit
  • 00:06:55 at least but the easiest way really to
  • 00:06:59 get around all of that is to use the CLI
  • 00:07:02 this CLI gives you a really good and
  • 00:07:04 flexible workflow you can eject from a
  • 00:07:08 CLI project to get access to the under
  • 00:07:11 webpack config so it's not a lock-in but
  • 00:07:15 starting with it creating projects with
  • 00:07:17 it and using its capabilities really as
  • 00:07:19 a good approach because the seal I team
  • 00:07:22 which is part of the angular team kind
  • 00:07:24 of is actively working on this Eli and
  • 00:07:27 keeps on improving it to give you ever
  • 00:07:30 better angular performance ever better
  • 00:07:33 angular apps generated by this Eli so I
  • 00:07:36 can only encourage you to use it you
  • 00:07:38 might not find another github
  • 00:07:41 boilerplate that is dead actively
  • 00:07:43 developed now that we had a look at this
  • 00:07:46 Eli let's say we opened angular in our
  • 00:07:49 editor and let's say that editor is
  • 00:07:51 Visual Studio code I often get asked
  • 00:07:54 which extensions I can recommend for it
  • 00:07:56 and I might not be the person with the
  • 00:07:59 most extensions I am a fan of only using
  • 00:08:02 a few and for angular there really is
  • 00:08:04 one major extension I wanna recommend
  • 00:08:07 and that is the angular essentials
  • 00:08:09 extension from John Papa this is a
  • 00:08:12 extension that bundles a lot of other
  • 00:08:14 extensions so if you go to the
  • 00:08:17 extensions part of visuals to your code
  • 00:08:19 and you open that extension you see the
  • 00:08:21 our extensions it includes and these
  • 00:08:23 extensions really make developing
  • 00:08:25 angular apps much more fun you get
  • 00:08:27 better auto completion you get nice
  • 00:08:30 syntax highlighting all that fun stuff
  • 00:08:32 with the installation of just that
  • 00:08:34 single extension so definitely have a
  • 00:08:36 look at that let's leave these set up
  • 00:08:39 world and let's have a look at the real
  • 00:08:42 development problems we face when
  • 00:08:44 creating an angular app and debugging
  • 00:08:47 angular apps tends to be one of the
  • 00:08:49 hardest things from my experience so
  • 00:08:52 from the questions I saw and one thing
  • 00:08:56 that really isn't done correctly a lot
  • 00:08:59 of the time unfortunately is reading the
  • 00:09:02 error messages angular error messages
  • 00:09:05 became a lot better and often they give
  • 00:09:09 a clear hint about what it's wrong or at
  • 00:09:11 least where you should look for an error
  • 00:09:13 sometimes the error message gives an
  • 00:09:16 incorrect error but still points at the
  • 00:09:18 correct file and you find an average
  • 00:09:20 syntax error that led to the inquiry
  • 00:09:23 error message so read the error messages
  • 00:09:26 and try to incorporate the information
  • 00:09:29 you find in there let's have a look at a
  • 00:09:30 few here are two error messages the
  • 00:09:33 first one says uncaught error template
  • 00:09:36 parse errors app product is not a known
  • 00:09:39 element you often get that if you forget
  • 00:09:42 to declare your custom components so if
  • 00:09:45 you didn't add them to the declarations
  • 00:09:47 array in app module make sure that you
  • 00:09:50 check if that's the case if you did add
  • 00:09:53 them to declarations and you use
  • 00:09:55 multiple angular modules make sure that
  • 00:09:58 they interact correctly with the jabra
  • 00:10:00 that you don't use a component in a
  • 00:10:02 module where this hasn't been added to
  • 00:10:05 declarations that's not a common error
  • 00:10:07 source so read these errors and then
  • 00:10:11 dive into that part or into that file
  • 00:10:15 it's pointing to here in this case to
  • 00:10:17 the app product component which somehow
  • 00:10:18 seems to be unknown check the selector
  • 00:10:21 for typos maybe you have the wrong
  • 00:10:24 selector set up in the component
  • 00:10:25 decorator of the product component these
  • 00:10:28 are the things you should have a look at
  • 00:10:29 take these messages seriously and if you
  • 00:10:32 can't find a solution google them you
  • 00:10:34 find a lot of github issue fretts a lot
  • 00:10:37 of Stack Overflow threats for all kinds
  • 00:10:40 of common error messages besides reading
  • 00:10:43 error messages correctly also use good
  • 00:10:46 old console lock debugging it's not the
  • 00:10:49 best debugging approach in the world and
  • 00:10:51 it simply means that you put a bunch of
  • 00:10:54 console locks into your code and you
  • 00:10:56 lock different objects properties things
  • 00:11:00 you want to have a look at you see them
  • 00:11:02 in the JavaScript console in the browser
  • 00:11:04 and see the values these properties and
  • 00:11:06 so on hold at certain points in your app
  • 00:11:09 this is not the best way to thoroughly
  • 00:11:13 debug an app but to get a quick insight
  • 00:11:16 into the state of something into the
  • 00:11:18 state of your app at a given point this
  • 00:11:20 is a good solution a better solution of
  • 00:11:23 course is to use the source Maps the CLI
  • 00:11:26 project gives you automatically source
  • 00:11:28 maps are little files the chrome or in
  • 00:11:33 general the browser developer tools can
  • 00:11:35 use to
  • 00:11:36 create a bridge from the compiled and
  • 00:11:38 optimized JavaScript code running in the
  • 00:11:40 browser to your original files which are
  • 00:11:42 of course easier to read for you so use
  • 00:11:45 these source Maps in conjunction with
  • 00:11:47 the browser dev tools let me show you
  • 00:11:49 how this works here is a broken angular
  • 00:11:52 app and we got an error now let's have a
  • 00:11:54 look at the source code from within the
  • 00:11:56 dev tools we can simply click on sources
  • 00:12:00 here and there in a seal I project which
  • 00:12:03 creates these source maps I was talking
  • 00:12:05 about you should find that web pack
  • 00:12:08 folder if you access it in the subfolder
  • 00:12:10 in there you should find a folder which
  • 00:12:14 in the end replicates your app structure
  • 00:12:17 so where you find a source app folder
  • 00:12:19 with your actual typescript files and
  • 00:12:23 now in these files you can even set
  • 00:12:26 breakpoints to stop at certain points of
  • 00:12:30 time you get an insight as the value of
  • 00:12:32 a certain property for example so this
  • 00:12:35 is really something I can recommend
  • 00:12:37 having a look at because this is a
  • 00:12:40 powerful tool that allows you to take an
  • 00:12:43 in-depth look at your app and
  • 00:12:46 dynamically debug it with breakpoints
  • 00:12:50 with all the features the developer
  • 00:12:51 tools gives you in your type files even
  • 00:12:54 though these are not the fast running in
  • 00:12:56 the browser so this is really powerful
  • 00:12:58 use these tools and you get that for
  • 00:13:00 free in a CLI project you can just dive
  • 00:13:03 into your source code like this there
  • 00:13:06 also is an average rule besides the
  • 00:13:08 already implemented browser developer
  • 00:13:11 tools the browser ship with and that's
  • 00:13:13 augury that's a Chrome extension which
  • 00:13:16 you can install from the Chrome
  • 00:13:18 extension store it's free of course and
  • 00:13:21 this is a tool that gives you detailed
  • 00:13:23 insight into your app at runtime the
  • 00:13:27 difference to the browser developer
  • 00:13:29 tools is that augur is aware of the
  • 00:13:32 angular architecture and therefore it
  • 00:13:34 gives you a good overview over the
  • 00:13:35 different components in your app
  • 00:13:37 something you don't see easily in the
  • 00:13:38 browser because the rendered Dom doesn't
  • 00:13:40 contain these it gives you access that
  • 00:13:43 the properties of your components the
  • 00:13:45 state of them it gives you access to
  • 00:13:48 injections happening in your app so a
  • 00:13:51 detailed look at what's happening at
  • 00:13:53 yura in your app at runtime being aware
  • 00:13:56 of the angular concepts like services
  • 00:14:00 like dependency injections on so
  • 00:14:03 definitely have a look at this too you
  • 00:14:04 access it from the developer tools
  • 00:14:06 thereafter and you can simply analyze
  • 00:14:08 your page with it as you do with the
  • 00:14:11 normal developer tools the ones
  • 00:14:13 implemented in the browser so you do
  • 00:14:15 with that but augury offers some extra
  • 00:14:17 features that are tailored for angular
  • 00:14:20 and if you're using ng rx you should
  • 00:14:23 also have a look at the redux dev tools
  • 00:14:25 which you can connect to and grx you can
  • 00:14:28 find instructions on that on the ng rx
  • 00:14:31 documentation and this allows you to
  • 00:14:33 have a look into your ng rx store so
  • 00:14:37 these are the things I want to bring to
  • 00:14:38 your attention to dive deeper into these
  • 00:14:41 are a lot of great tools that help you
  • 00:14:43 debug your angular apps ok let's leave
  • 00:14:46 the world of errors and let's have a
  • 00:14:49 look at something else I get asked a lot
  • 00:14:50 how can I pass data from component 8
  • 00:14:53 component B so here's a concrete set up
  • 00:14:56 with the app component products
  • 00:14:58 component and a product component now
  • 00:15:01 one easy way to pass data around is by
  • 00:15:03 property binding with that input and so
  • 00:15:05 on you pass data from app component to
  • 00:15:08 products component and maybe then data
  • 00:15:10 from products to product component
  • 00:15:12 property binding is only possible from
  • 00:15:15 parent to child component so only one
  • 00:15:17 level at a time
  • 00:15:19 therefore reaching out from app
  • 00:15:21 component to product component is not
  • 00:15:23 possible if you want to do that you
  • 00:15:26 would use a service instead a service in
  • 00:15:28 between possibly or typically to be
  • 00:15:32 honest with the rxjs subject which is
  • 00:15:35 like an observable but one where you can
  • 00:15:37 emit events on your own with next so
  • 00:15:40 where you can emit an event let's say
  • 00:15:42 from the app component and where you
  • 00:15:43 then subscribe in some other place of
  • 00:15:45 your app and that place could also be a
  • 00:15:47 service by the way or something like
  • 00:15:49 that
  • 00:15:49 now here it would be the product
  • 00:15:52 component and all of a sudden we have a
  • 00:15:54 connection from app component to product
  • 00:15:55 component through the service and the
  • 00:15:58 subject and those all the works the
  • 00:16:00 other way around we can omit our
  • 00:16:02 vents to pay us data up from a child to
  • 00:16:05 a parent component but emitting an event
  • 00:16:07 from product component to app component
  • 00:16:09 directly it's not possible but again we
  • 00:16:12 can use a service with a subject to emit
  • 00:16:14 an event and listen to it in an average
  • 00:16:16 component so this is how we can
  • 00:16:18 communicate between components and pass
  • 00:16:21 data around now important if you're
  • 00:16:23 using rxjs subjects don't forget to
  • 00:16:26 unsubscribe in the components where you
  • 00:16:28 do subscribe in ng ondestroy to make
  • 00:16:31 sure you're not running into memory
  • 00:16:33 leaks so you need to store that
  • 00:16:35 subscription you're creating with the
  • 00:16:36 SUBSCRIBE method in some property and
  • 00:16:38 unsubscribe from that in the ng
  • 00:16:40 ondestroy lifecycle hook and let me all
  • 00:16:44 that there is one other way of
  • 00:16:45 communicating and passing data around
  • 00:16:47 and that is using ng rx which is
  • 00:16:50 basically a Redux implementation for
  • 00:16:52 angular apps you want to use angular
  • 00:16:56 with a server-side language because
  • 00:16:58 angular runs in the browser so a lot of
  • 00:17:00 the lot you want to execute can't be
  • 00:17:02 executed there because it needs to run
  • 00:17:04 on a server for security reasons for
  • 00:17:07 performance reasons or because you can't
  • 00:17:09 perform that action browser like
  • 00:17:11 accessing files or because you want to
  • 00:17:13 store data in a server-side database now
  • 00:17:16 I often get asked can I use angular with
  • 00:17:18 PHP with lera well which is a PHP
  • 00:17:21 framework with node with Ruby with
  • 00:17:23 anything and the answer is yes you can
  • 00:17:26 angular in the end creates the client
  • 00:17:29 side app a single page application
  • 00:17:31 running in the browser it doesn't care
  • 00:17:35 about your server because it doesn't run
  • 00:17:37 there so you can build your server-side
  • 00:17:40 backend with any language in framework
  • 00:17:42 you want angular is only good at
  • 00:17:45 creating SPS
  • 00:17:47 so it only creates that it only runs
  • 00:17:50 that and your server-side back-end now
  • 00:17:53 needs to be a restful api so not a
  • 00:17:56 backhand where you render dues like with
  • 00:17:59 layer welds plates templating engine
  • 00:18:01 you're not doing that angular is
  • 00:18:03 responsible for the front-end your back
  • 00:18:06 it is a restful service sitting there
  • 00:18:08 providing API endpoints to which angular
  • 00:18:11 can send requests through its HTTP
  • 00:18:14 client
  • 00:18:15 where it also of course receives
  • 00:18:17 responses and on the server you can then
  • 00:18:19 implement any logic including a database
  • 00:18:22 if you want that you want you
  • 00:18:24 communicate you angular through the
  • 00:18:26 restful api another question I get a lot
  • 00:18:30 is can I use read acts and I already
  • 00:18:34 kind of answered this early in this
  • 00:18:36 video
  • 00:18:36 yes you can with ng rx now Redux solves
  • 00:18:41 one problem that we have a lot of
  • 00:18:43 components communicating with each other
  • 00:18:45 and which with services and we get a lot
  • 00:18:49 of complex interactions that become hard
  • 00:18:51 to maintain especially in bigger apps of
  • 00:18:53 course Redux
  • 00:18:55 solves this by offering us a Redux store
  • 00:18:58 so one central place in the app where
  • 00:19:01 our data is stored and where we can
  • 00:19:03 connect our different parts of the app
  • 00:19:05 to so components can then receive data
  • 00:19:09 from the store and dispatch actions to
  • 00:19:11 the store and we have a clear flow of
  • 00:19:13 data and a central place where
  • 00:19:15 everything gets stored and that is Redux
  • 00:19:17 and we can use it an angular since Redux
  • 00:19:20 isn't tied to react you could implement
  • 00:19:23 Redux just like that and angular or you
  • 00:19:26 use a specific implementation of it
  • 00:19:28 called ng rx now this is not a must as I
  • 00:19:31 said you can implement the normal Redux
  • 00:19:33 your on your own but you can also use ng
  • 00:19:36 rx to get an approach that nicely fits
  • 00:19:39 into the angular world and follows many
  • 00:19:41 of the concepts angular already follows
  • 00:19:43 so ng rx is something you want a Google
  • 00:19:46 and you want to learn if you want to
  • 00:19:48 implement Redux in your angular apps
  • 00:19:50 speaking of state I also see the
  • 00:19:53 question my state is lost after i
  • 00:19:56 refresh the page and with that people
  • 00:19:58 mean that unlike on traditional web apps
  • 00:20:01 where you often have sessions to manage
  • 00:20:03 the users state on the server and
  • 00:20:05 therefore if the user refreshes the page
  • 00:20:07 he's still locked in and so on and
  • 00:20:10 client-side apps this is not the case if
  • 00:20:12 you refresh your angular app it really
  • 00:20:15 resets it doesn't keep the old state
  • 00:20:18 because no server is involved you might
  • 00:20:21 have that restful api you are sending
  • 00:20:24 data to but that is a stateless server
  • 00:20:26 it doesn't store anything any
  • 00:20:29 session information from your client so
  • 00:20:32 you have two ways of storing state
  • 00:20:34 across page reloads then you can't work
  • 00:20:37 with local storage which is a
  • 00:20:40 client-side storage of storage in the
  • 00:20:42 browser or with a server-side database
  • 00:20:45 you're still not going to be using
  • 00:20:47 sessions then but you can't persist some
  • 00:20:50 general user data there of course like
  • 00:20:52 the orders of a user stuff like that for
  • 00:20:55 a session like approaches you would have
  • 00:20:57 a look at local storage though so local
  • 00:20:59 storage runs on a client so it's not
  • 00:21:01 fully under your control with that I
  • 00:21:03 mean that if the user clears the cache
  • 00:21:06 manually and installs the browser or
  • 00:21:08 something like that this is of course
  • 00:21:10 gone but the same is true for cookies I
  • 00:21:13 guess since they're all living on the
  • 00:21:15 client it's accessible by JavaScript
  • 00:21:18 only so there's a good and a bad thing
  • 00:21:20 bad thing is if your page is vulnerable
  • 00:21:23 to cross-site scripting attacks by
  • 00:21:25 default angular should give you a good
  • 00:21:27 protection against that though if it is
  • 00:21:30 vulnerable then people can access your
  • 00:21:32 local storage and possibly extract JSON
  • 00:21:35 web tokens from there on the other hand
  • 00:21:37 it's not vulnerable to CSRF attacks for
  • 00:21:41 example so that is the upside of that
  • 00:21:44 it's a simple key value store that's
  • 00:21:46 also important to keep in mind that
  • 00:21:48 means that well you can't store complex
  • 00:21:51 data in there you can't store images in
  • 00:21:54 there really just simple data but for
  • 00:21:56 keeping track of a user session for
  • 00:21:59 example of JSON web token and so on this
  • 00:22:02 is perfect
  • 00:22:02 now the server-side database is better
  • 00:22:05 for data that needs to be under your
  • 00:22:08 control like the user itself the user
  • 00:22:12 data you store stuff like that
  • 00:22:14 it is accessible from the server only so
  • 00:22:17 the client can't access it which of
  • 00:22:19 course is a extra security layer and of
  • 00:22:21 course you can use any database you want
  • 00:22:23 and you can store whichever data and
  • 00:22:25 data types you want therefore and this
  • 00:22:27 is how you persist state or how you
  • 00:22:30 store data there is no session you do
  • 00:22:33 use these two things you can also use
  • 00:22:36 cookies I should add but you don't use
  • 00:22:39 sessions that's the key takeaway there
  • 00:22:41 is no session stored on the
  • 00:22:43 and no session keys stored in a cookie
  • 00:22:45 on the client can I host my angular app
  • 00:22:48 on Heroku and so on that's another
  • 00:22:50 question I see a lot let's understand
  • 00:22:53 how hosting angular application works if
  • 00:22:56 we use the CLI or any other build
  • 00:22:59 process in the end once we're done we're
  • 00:23:02 going to build our project which means
  • 00:23:04 we generate a bunch of build artifacts
  • 00:23:07 which is the index.html file and a lot
  • 00:23:10 of JavaScript files typically the
  • 00:23:12 bundled and optimized JavaScript files
  • 00:23:15 that make up our app so these are the
  • 00:23:18 build artifacts we might of course all
  • 00:23:20 they have some style files these need to
  • 00:23:23 be shipped to a server and these are
  • 00:23:26 just static files if you have a look at
  • 00:23:28 that there's no server-side code there's
  • 00:23:30 no PHP file the JavaScript files are not
  • 00:23:33 going to contain any node.js code so
  • 00:23:36 there's no need to execute code on a
  • 00:23:39 server and therefore a static host like
  • 00:23:43 AWS s free or firebase hosting is all
  • 00:23:47 you need a static host is basically a
  • 00:23:49 file storage that also can accept HTTP
  • 00:23:53 requests and return your files but where
  • 00:23:55 you don't run any server-side code so
  • 00:23:58 can you host your app on hiroko yes you
  • 00:24:01 can but since hiroko essentially
  • 00:24:04 requires you to create app with some
  • 00:24:08 server-side language you create a node
  • 00:24:10 JSF just to serve the index.html file in
  • 00:24:14 the end and the same might be true for
  • 00:24:15 other languages so that might be
  • 00:24:17 overkill Google for static web hosts
  • 00:24:20 instead to find fitting hosts for
  • 00:24:23 angular apps
  • 00:24:24 speaking of deployment and our question
  • 00:24:27 I see a lot is my routes don't work
  • 00:24:29 after deployment so here's the setup
  • 00:24:32 we got the user you and the server you
  • 00:24:35 enter a URL in the browser and your
  • 00:24:38 angular app loads a page with your
  • 00:24:40 angular app loads I should say you then
  • 00:24:44 navigate to the products page there by
  • 00:24:46 clicking on a link and that page loads
  • 00:24:49 this is done through the angular router
  • 00:24:52 because there you register the different
  • 00:24:54 pages and since you only have one
  • 00:24:56 real page the index.html file it's not
  • 00:25:00 really loading a new file from the
  • 00:25:01 server angular just rear Enders your
  • 00:25:04 page to give you the illusion of loading
  • 00:25:07 a new page and it can do that because it
  • 00:25:10 essentially listens to the clicks on
  • 00:25:12 your links when you use the router link
  • 00:25:15 directive and well triggers the angular
  • 00:25:17 router your server doesn't have any
  • 00:25:20 routes if you refresh the page now you
  • 00:25:24 get a 404 error because if you refresh
  • 00:25:27 the page the angular router has no
  • 00:25:29 chance of taking over because refreshing
  • 00:25:32 means you send a new request to the
  • 00:25:33 server and since you have no routes
  • 00:25:35 there except for the default route which
  • 00:25:37 returns the index.html file well you get
  • 00:25:40 an error the solution is you need to
  • 00:25:43 always load the index.html file so on
  • 00:25:46 your server you need to define the
  • 00:25:48 index.html file as your 404 error
  • 00:25:52 document this then allows the router of
  • 00:25:56 angular to take over and handle that
  • 00:25:58 request and possibly find a route and
  • 00:26:01 then render the correct page and if you
  • 00:26:04 want you have a 404 error page for
  • 00:26:07 routes you don't handle in the angular
  • 00:26:09 app ever you would need to set it up in
  • 00:26:11 angular still here's another question I
  • 00:26:14 get a lot everyone can see my code it's
  • 00:26:17 true
  • 00:26:17 everyone can see your code if you go
  • 00:26:20 into the browser and open an angular app
  • 00:26:22 and you go to that sources tab as I
  • 00:26:25 showed you earlier in this video well
  • 00:26:27 you can inspect the code and everyone
  • 00:26:30 can do that you can do that for our apps
  • 00:26:32 and other people can do it for your app
  • 00:26:34 you can't protect against it JavaScript
  • 00:26:37 runs in the browser it's not compiled
  • 00:26:39 not precompiled so it's visible to
  • 00:26:42 everyone and you can't do anything about
  • 00:26:44 that the only thing you can do is be
  • 00:26:47 aware of that and don't put sensible
  • 00:26:49 information in there make sure you only
  • 00:26:52 have code and the information in that
  • 00:26:55 javascript file that doesn't really
  • 00:26:57 matter if other people can read it you
  • 00:27:00 can make it harder for people to read it
  • 00:27:02 but you can't prevent it I also often
  • 00:27:06 see the question how you can use third
  • 00:27:08 parties see
  • 00:27:09 as libraries like bootstrap and angular
  • 00:27:12 apps and there are two major approaches
  • 00:27:15 the first one is simple you throw a link
  • 00:27:18 ref in your index.html file ever
  • 00:27:20 pointing to a local file you download it
  • 00:27:23 or to a file hosted on some CDN the
  • 00:27:26 second possible approach is to ever
  • 00:27:29 download the CSS file the CSS library
  • 00:27:33 file you want to use or use NPM install
  • 00:27:35 library to install it and then add an
  • 00:27:38 entry to the Styles array in the angular
  • 00:27:42 CLI dot JSON file and that entry simply
  • 00:27:46 needs to be the path seen from the
  • 00:27:49 source folder on so not from the root
  • 00:27:51 folder but from the source folder of
  • 00:27:53 your app on to that file you downloaded
  • 00:27:56 or you install this is how simple you
  • 00:27:59 can add a CSS library and the same for
  • 00:28:03 third-party JavaScript libraries you
  • 00:28:05 have three possibilities here you can
  • 00:28:09 put a script source import in index.html
  • 00:28:12 and you can also point to some CDN here
  • 00:28:16 you can use NPM install or download the
  • 00:28:20 file and add an entry to the scripts
  • 00:28:22 array or you do the same but directly
  • 00:28:26 import it into your typescript files by
  • 00:28:28 adding an import statement at the top
  • 00:28:30 you can of course import our typescript
  • 00:28:33 files and you do that all the time in
  • 00:28:35 angular apps well turns out you can also
  • 00:28:37 just import our JavaScript files so that
  • 00:28:40 is a perfectly fine alternative then you
  • 00:28:42 don't have to add an entry to scripts to
  • 00:28:45 descriptive array in the angular CLI
  • 00:28:47 JSON file because if you just add an
  • 00:28:49 import statement in one of your
  • 00:28:51 typescript files in the end this import
  • 00:28:54 javascript file will be included in the
  • 00:28:56 final bundle so then you got it in your
  • 00:28:59 application to you one important note
  • 00:29:02 though since you're using typescript and
  • 00:29:04 angular there are JavaScript packages
  • 00:29:06 that might be unknown to typescript
  • 00:29:08 because they don't ship with a so called
  • 00:29:11 types declaration file a file that
  • 00:29:14 basically translates the JavaScript
  • 00:29:18 functionalities to typescript if your
  • 00:29:21 downloaded library doesn't have
  • 00:29:23 such a file you have to add something to
  • 00:29:28 the source
  • 00:29:28 typing start DTS file you should find in
  • 00:29:31 your angular projects or which you can
  • 00:29:33 create if you don't have it and there
  • 00:29:35 you add that declare module and then
  • 00:29:37 your library name line here and
  • 00:29:41 thereafter when importing it in our
  • 00:29:43 JavaScript files types should understand
  • 00:29:46 the features of that library you need to
  • 00:29:50 add an import statement endow with the
  • 00:29:53 scripts array approach this will not
  • 00:29:55 work there you wouldn't stand need to
  • 00:29:57 add declare war and then any object you
  • 00:30:01 use from a library off type any at the
  • 00:30:04 top of the types could file where you
  • 00:30:06 want to use it let me show you an
  • 00:30:09 example here's a very simple project I
  • 00:30:12 created and now in there I will install
  • 00:30:15 a new library with the npm install' and
  • 00:30:17 I will install lodash which is a library
  • 00:30:20 providing a couple of utility functions
  • 00:30:22 to JavaScript I'll add – – saved to
  • 00:30:25 download and install it and also add an
  • 00:30:28 entry in package JSON file now once this
  • 00:30:32 is finished let's go to node modules and
  • 00:30:34 let's have a look at what we got so
  • 00:30:38 here's low – and if we open it we see a
  • 00:30:40 bunch of JavaScript files in there
  • 00:30:42 because it's shipped in a way that we
  • 00:30:44 can import just what we need and we
  • 00:30:46 don't have to import all the files
  • 00:30:50 one thing that's missing though or
  • 00:30:52 should be missing at least is such a DTS
  • 00:30:54 file so what can we now do how can we
  • 00:30:58 use lo – for lo – and for a lot of
  • 00:31:02 JavaScript libraries to be honest a good
  • 00:31:04 approach would be the following one
  • 00:31:05 let's say want to use it here in the
  • 00:31:08 constructor of our app component there I
  • 00:31:11 will create a new array one two three
  • 00:31:15 and I want to shuffle that and lo – has
  • 00:31:18 a function for that so normally I can
  • 00:31:20 use the lo – symbol the underscore and
  • 00:31:23 call shuffle and pass my array and I
  • 00:31:27 could output the result of that
  • 00:31:30 operation now if I do that and I run ng
  • 00:31:33 surf we already can see it here in the
  • 00:31:36 file that this underscore isn't
  • 00:31:38 recognized typescript doesn't know and
  • 00:31:41 therefore during building it gives me an
  • 00:31:44 error it shows me that it con can't find
  • 00:31:47 that name now we can import lo – so we
  • 00:31:52 can import lo – like this and this would
  • 00:31:56 be the correct import statement but
  • 00:31:57 still it would fail now what I said is
  • 00:32:01 that you can now declare a var
  • 00:32:03 underscore so the symbol you're going to
  • 00:32:06 use and of type any so that you're
  • 00:32:08 allowed to call anything in that types
  • 00:32:10 could file and now the error is gone
  • 00:32:13 because now we're telling typescript
  • 00:32:14 it's okay I know that this symbol is
  • 00:32:17 available and you don't need to care
  • 00:32:19 about what I can do with it and now if
  • 00:32:22 we go back to our running application
  • 00:32:24 and I reload the page we see the
  • 00:32:28 shuffled array so we're using lo – here
  • 00:32:30 we're importing it like this and we add
  • 00:32:33 a declare war and the alternative I
  • 00:32:36 mentioned would be to go to the Taipings
  • 00:32:38 TTS file and add declare module lo –
  • 00:32:45 like this
  • 00:32:48 with that it should also work if I save
  • 00:32:50 this and you're in the app component
  • 00:32:52 file I removed the declare of our lodash
  • 00:32:54 thing and now I can import underscore
  • 00:32:58 from lodash so this is now an
  • 00:33:00 alternative and with that it still works
  • 00:33:04 well here it now gives us a shuffled
  • 00:33:08 result and this is another way of doing
  • 00:33:12 this you're basically using that import
  • 00:33:15 statement where I say I'm importing a
  • 00:33:17 specific symbol from that file so these
  • 00:33:19 are two common approaches you use for
  • 00:33:22 using Java Script packages or files
  • 00:33:25 libraries a lot of libraries already
  • 00:33:27 ship with these DTS files though and
  • 00:33:30 have es6 imports and exports so there
  • 00:33:34 you just import something from that
  • 00:33:36 library and you don't need to declare
  • 00:33:38 the module you can basically find it out
  • 00:33:40 by checking out the github repositories
  • 00:33:43 of whichever libraries you're going to
  • 00:33:45 use and that was basically it
  • 00:33:47 I hope you enjoyed it I hope this was
  • 00:33:49 helpful share any other common questions
  • 00:33:52 you see you know individual comments and
  • 00:33:55 I will see what I can do and I hope to
  • 00:33:58 see you again in future videos on my
  • 00:34:00 Academy Channel so see you then bye