Coding

COMPONENTS & APPMODULE – Angular 2.0 Final – Getting Started

  • 00:00:01 in the last video of the series I left
  • 00:00:04 you with this project created and with
  • 00:00:06 our running application i roughly
  • 00:00:09 explained what these folders view that
  • 00:00:12 we create our app in the App subfolder
  • 00:00:14 of the source folder and that many of
  • 00:00:17 these files here our files we won't work
  • 00:00:19 in now it's time to take a bit deeper
  • 00:00:22 and learn what actually happens when we
  • 00:00:24 visit the index.html file again the
  • 00:00:27 important thing to know is even though
  • 00:00:29 we don't see it here there are some
  • 00:00:31 script imports in the running
  • 00:00:32 application they just get added
  • 00:00:34 automatically by web pack we can't see
  • 00:00:37 this if we simply inspect our source
  • 00:00:39 code here do you see that we got some
  • 00:00:41 scripts in there we reference free
  • 00:00:44 script imports inline styles and main
  • 00:00:47 well the inline and style script tag
  • 00:00:50 here basically bundles some polyfill
  • 00:00:54 webpack styling related code code we
  • 00:00:57 barely work on the interesting part for
  • 00:01:00 us is the main bundle which holds our
  • 00:01:02 application code and the angular 2 code
  • 00:01:05 how does this bundle get created or what
  • 00:01:08 does it actually do how is our
  • 00:01:10 application starting well as you just
  • 00:01:13 explained we do have two scripts in the
  • 00:01:15 index.html file and then we recognize
  • 00:01:17 this strange element in the index.html a
  • 00:01:20 prude nowadays clearly is not a default
  • 00:01:23 HTML element it's not a built-in one we
  • 00:01:26 don't have that by default instead this
  • 00:01:30 seems to have something to do with our
  • 00:01:32 angle to application and deaths because
  • 00:01:35 you build up your any allure to
  • 00:01:37 applications with components this is a
  • 00:01:41 topic or design idea you might know from
  • 00:01:44 react chess where you're all to build
  • 00:01:46 components you do the same an angular
  • 00:01:48 tube though angular 2 is a bit of a more
  • 00:01:51 all-in-one framework than react chess is
  • 00:01:55 just as a side note but here we
  • 00:01:58 reference such a component app root and
  • 00:02:01 in our app folder well it looks like
  • 00:02:05 this might be the component we're
  • 00:02:07 looking for this app component we
  • 00:02:10 structure our components in separate
  • 00:02:12 files and it is a naming convention
  • 00:02:15 to get the file which holds the
  • 00:02:16 component a name of name of the
  • 00:02:19 component dot component dot TS TS for
  • 00:02:22 typescript so if we have a look at this
  • 00:02:24 here we see that we have a typescript
  • 00:02:27 class which again is yet all compiled to
  • 00:02:30 JavaScript and to this class we get this
  • 00:02:33 add component thing here now this thing
  • 00:02:37 here is a decorator which behind the
  • 00:02:39 scenes at hatch a some metadata to
  • 00:02:41 disclose and this actually transforms
  • 00:02:44 this class into something else so by
  • 00:02:47 default it's just a normal class but
  • 00:02:49 with this decorator to angular 2 it's
  • 00:02:52 more than that it becomes a component
  • 00:02:54 with a couple of extra features the
  • 00:02:58 extra features I'm talking about are
  • 00:03:00 configured in the object we passed to
  • 00:03:02 this component decorator we specify a
  • 00:03:05 selector and this selector app root is
  • 00:03:08 exactly what we see here in the
  • 00:03:11 index.html so here we specify how we can
  • 00:03:15 use this component how we can add it to
  • 00:03:17 our HTML code the interesting part here
  • 00:03:20 is this selector here works like a CSS
  • 00:03:24 selector which means as it is written
  • 00:03:26 like this it selects any element which
  • 00:03:29 looks like this but we're not limited to
  • 00:03:32 this I could also add a hash tag and now
  • 00:03:35 we would select any element let's say a
  • 00:03:37 div which has an idea of a brute so just
  • 00:03:41 like a CSS selector works you could also
  • 00:03:44 use a dot to select by class name I'm
  • 00:03:47 going to revert this since the
  • 00:03:49 convention is to use this element style
  • 00:03:51 here for components but I just want you
  • 00:03:54 to realize that you could use any other
  • 00:03:57 style here too so this is the selector
  • 00:04:00 the next thing template URL is pretty
  • 00:04:04 self-explanatory it points to the HTML
  • 00:04:08 code we want to render when this
  • 00:04:10 component is loaded so the template off
  • 00:04:12 this component in the end to component
  • 00:04:15 something to display on the page and we
  • 00:04:17 can only display something if we got
  • 00:04:19 some HTML code this code is held in this
  • 00:04:22 app component HTML file to which this
  • 00:04:25 template URL property points and here
  • 00:04:27 again we see
  • 00:04:28 what we're seeing on this page page one
  • 00:04:30 tagged with some kind of dynamic data in
  • 00:04:33 between I'll come back to this these
  • 00:04:35 style URLs is the same but for styles
  • 00:04:39 and here notice we also have an array
  • 00:04:41 because we may reference multiple style
  • 00:04:43 sheets the important thing to realize
  • 00:04:45 here is by default these Styles will
  • 00:04:48 only be applied to this component not
  • 00:04:51 application white so if we style h1 tags
  • 00:04:54 in this CSS file only the h1 tags in
  • 00:04:58 this template will get stalled not at
  • 00:05:00 any our templates well I'm going to
  • 00:05:03 remove these style URLs here since I
  • 00:05:05 don't want to apply any specific styles
  • 00:05:07 and I'm also going to remove the app
  • 00:05:10 component dots back to TS file since
  • 00:05:13 this file is used for unit tests and I
  • 00:05:16 won't cover that here ok so we get the
  • 00:05:19 basics this is our component this is
  • 00:05:22 what we see the question seems to be
  • 00:05:25 answered we have a brute here we load
  • 00:05:28 our angular 2 application we have a
  • 00:05:31 prude here we load this component it's
  • 00:05:34 not that simple
  • 00:05:35 by default angle 2 doesn't scan all your
  • 00:05:38 components for their selectors and then
  • 00:05:40 whenever it finds a selector use it and
  • 00:05:43 it's good that it doesn't do this
  • 00:05:45 because this would really be a
  • 00:05:46 performance hit in a bigger applications
  • 00:05:48 instead we have to be explicit and tell
  • 00:05:51 angular 2 hey which component should you
  • 00:05:55 have a look at when this application
  • 00:05:57 starts because what does starts mean it
  • 00:06:02 means that of course as a shop before we
  • 00:06:05 have this main bundle chairs file which
  • 00:06:07 gets injected here but the thing which
  • 00:06:09 actually gets executed first and that's
  • 00:06:11 just something to keep in mind is to
  • 00:06:14 code in this main dot ts file this is
  • 00:06:17 the bootstrap code of an angular 2
  • 00:06:19 application this is the code which gets
  • 00:06:22 run first which actually starts our
  • 00:06:24 Inglot to application which gets it to
  • 00:06:27 run and here we get a couple of imports
  • 00:06:30 including some polyfills which are
  • 00:06:32 managed in this polyfills file but the
  • 00:06:34 important part is the last line here
  • 00:06:36 here we bootstrap a module which means
  • 00:06:40 we start our angular 2 up
  • 00:06:42 and we pass a module to it and we hadn't
  • 00:06:46 look at this module yet but we will have
  • 00:06:49 no second for now it's important to
  • 00:06:51 understand this starts the application
  • 00:06:53 and we started with an argument the
  • 00:06:56 module we pass here with that let's have
  • 00:06:59 a look at this module it's the last file
  • 00:07:01 in our app folder app module ts Anglet
  • 00:07:05 who uses modules to structure more
  • 00:07:09 complex applications in simpler
  • 00:07:11 applications like this one you may very
  • 00:07:13 well only use one module this app module
  • 00:07:16 but a more complex ones you might have
  • 00:07:18 multiple modules now this module
  • 00:07:21 basically tells engli to which parts
  • 00:07:24 does my application have and with Parts
  • 00:07:27 I mean which components which directives
  • 00:07:30 which is another feature of angle to
  • 00:07:32 which pipes yet another feature which
  • 00:07:35 services which other modules might I use
  • 00:07:39 that could be built in modules or if I
  • 00:07:42 were to structure my app with multiple
  • 00:07:44 modules my own modules so this is how
  • 00:07:48 you structure your application and this
  • 00:07:50 is why we load this file when we start
  • 00:07:53 the application because we have to tell
  • 00:07:55 and what you hey which parts does my
  • 00:07:57 application actually have now here you
  • 00:08:01 will realize in the module file here we
  • 00:08:04 also get a class which has no content in
  • 00:08:07 itself but which also has a decorator
  • 00:08:09 here the ng module decorator the energy
  • 00:08:13 module decorator also takes a javascript
  • 00:08:16 object as an argument and here we
  • 00:08:19 configure this root module again the
  • 00:08:22 kind of description of our application
  • 00:08:25 we have our declarations error here
  • 00:08:28 which basically holds all directives
  • 00:08:30 components and pipes our application
  • 00:08:32 uses this is why we can see the app
  • 00:08:34 component here it's the only component
  • 00:08:36 or application has thus far but as soon
  • 00:08:39 as we add our components we will also
  • 00:08:41 register them here in the declarations
  • 00:08:43 array the imports array imports our
  • 00:08:46 modules not just said we're only going
  • 00:08:49 to use one module but there are a couple
  • 00:08:51 of built-in ones for example the browser
  • 00:08:53 module is definitely needed it gives
  • 00:08:56 some core functionality Zangla to offers
  • 00:08:58 us four browser applications the forms
  • 00:09:01 an HTTP module may be removed though as
  • 00:09:03 you might imagine the forms module is
  • 00:09:06 neither been working with forms HD and
  • 00:09:08 the HTTP module is needed when working
  • 00:09:10 with HTTP both will not be things I'll
  • 00:09:13 cover here the providers array is empty
  • 00:09:16 here we would and later on we will add
  • 00:09:20 services we want to have in our
  • 00:09:22 application what our services I'll come
  • 00:09:24 back to that bootstrap is the last array
  • 00:09:27 here and this is an important one it
  • 00:09:29 specifies most of the time only one
  • 00:09:32 component which actually gets loaded
  • 00:09:35 first remember I told you Anglet uu does
  • 00:09:39 not scan all components for their
  • 00:09:41 selectors automatically now it does scan
  • 00:09:44 the components we add to declarations
  • 00:09:47 but it would still not find the selector
  • 00:09:50 we use here in the index.html this is
  • 00:09:54 the one part where we have to be
  • 00:09:55 explicit and tell Anglet you hey please
  • 00:09:58 when you start the application first
  • 00:10:01 have a look at app component it's the
  • 00:10:04 root component of our application and
  • 00:10:07 this is important take away your angular
  • 00:10:10 2 application will have a root component
  • 00:10:13 which will then hold all other
  • 00:10:15 components you may add as nested as you
  • 00:10:18 want but you have this one single root
  • 00:10:20 component which is added here to the
  • 00:10:22 bootstrap array so that egg what you
  • 00:10:24 knows okay this is my root component
  • 00:10:26 I'll have a look at it
  • 00:10:28 I find a selector it's the same selector
  • 00:10:30 as here I load the component in this
  • 00:10:32 place and this is how an angler to
  • 00:10:35 application starts okay you're probably
  • 00:10:39 now totally shocked what an F word for
  • 00:10:42 this here this single output yep the
  • 00:10:45 startup and the creation of angular 2
  • 00:10:48 application really can be a daunting
  • 00:10:50 task and really can be overwhelming but
  • 00:10:55 these are the basics and I promise you
  • 00:10:57 from now on if you get the basics set if
  • 00:11:00 you understand how the application
  • 00:11:03 starts how you manage your application
  • 00:11:05 if that is set the rest will be very
  • 00:11:08 easy to
  • 00:11:09 all along and it allows us to create
  • 00:11:11 very powerful applications in a very
  • 00:11:14 simple way and I mean simple because the
  • 00:11:17 setup is a bit more complex the rest is
  • 00:11:20 indeed very simple so let's dive deeper
  • 00:11:23 into creating new components and
  • 00:11:25 actually editing our application in the
  • 00:11:28 next video