Coding

Angular 2 Full App Tutorial – Weather App – #2 Components & Directives

  • 00:00:00 hi in this video I will start with the
  • 00:00:04 very basics of our angular applications
  • 00:00:06 with the project structure and what core
  • 00:00:09 parts of our application are now I
  • 00:00:13 already have my well very basic
  • 00:00:16 application here set up and in the
  • 00:00:18 description you will find a link to the
  • 00:00:20 github repository which will have
  • 00:00:22 several branches for several well states
  • 00:00:26 of this series and there you will find a
  • 00:00:28 set up branch which is this state what
  • 00:00:31 you see here so basically if you want to
  • 00:00:36 know how to well setup a project from
  • 00:00:39 scratch
  • 00:00:39 watch my setup video I got on this
  • 00:00:43 channel to where explain how to set up
  • 00:00:45 my well custom-built boilerplate for
  • 00:00:48 angular 2 applications so maybe this
  • 00:00:51 application and what this currently does
  • 00:00:53 is display this page
  • 00:00:55 well that isn't that useful but it has
  • 00:01:00 all the basics of language to
  • 00:01:02 application in it now the boilerplate I
  • 00:01:05 am using here has a structure where I
  • 00:01:07 have app and assets of death and a
  • 00:01:10 source folder for my code source and app
  • 00:01:14 will hold the compiled code so
  • 00:01:18 typescript compiler to JavaScript and
  • 00:01:21 scss compiled CSS and the uncompelled
  • 00:01:25 code which is the code will actually
  • 00:01:27 work with lives in the assets folder in
  • 00:01:30 case of the S CSS code and the dev
  • 00:01:33 folder in case of the typescript code
  • 00:01:37 and we're of course writing our
  • 00:01:39 application in typescript here so in
  • 00:01:42 this folder I got my app component here
  • 00:01:45 and my boot dot T as far but started
  • 00:01:49 this Buddha taught yes far what this
  • 00:01:51 file does is it bootstraps our
  • 00:01:54 application it loads up a regular to
  • 00:01:57 application this is the part where
  • 00:01:59 everything starts and we need this
  • 00:02:01 application we need this file and this
  • 00:02:03 bootstrap method here specifically for
  • 00:02:06 everything to work otherwise we wouldn't
  • 00:02:08 have anything any application we also
  • 00:02:13 have this
  • 00:02:14 next our HTML file here in our root
  • 00:02:16 directory
  • 00:02:17 well this file imports a couple of
  • 00:02:20 dependencies or a couple of famous we
  • 00:02:22 need for application and this might very
  • 00:02:24 well change a bit and telling that she
  • 00:02:26 was released but basically it contains
  • 00:02:30 some poly faults we need for a lot you
  • 00:02:32 to work correctly in older browsers
  • 00:02:34 it contains alert you itself as well as
  • 00:02:39 the router and the HTTP module because
  • 00:02:41 we're going to use this and it also
  • 00:02:46 contains rxjs which are our observables
  • 00:02:50 and system Jas
  • 00:02:53 which is just our well loader which will
  • 00:02:57 load the components or the JavaScript
  • 00:03:00 files we need for the current page to
  • 00:03:04 render correctly system she has setup
  • 00:03:07 here in this script part here where we
  • 00:03:10 basically define the root folder app but
  • 00:03:14 all our JavaScript files will live in
  • 00:03:16 and that it should start with the app
  • 00:03:21 boot file the bootstrap file to load up
  • 00:03:24 our application this is the structure we
  • 00:03:29 have now I also said we have this app
  • 00:03:32 component and here is a key part a
  • 00:03:36 component and we're two applications are
  • 00:03:39 made up of components and what you
  • 00:03:43 embraces the web components standard and
  • 00:03:46 when we build an angular application we
  • 00:03:50 create many components which you then
  • 00:03:52 put together to get one single page in
  • 00:03:56 the end and of course all these
  • 00:03:59 components are then rendered together
  • 00:04:01 into one single Dom but we create our
  • 00:04:05 application by well bottom-up so to say
  • 00:04:09 by creating these tiny pieces these
  • 00:04:12 components now I do have videos on this
  • 00:04:15 channel where I explain this whole
  • 00:04:18 concept and explain your role
  • 00:04:20 architecture
  • 00:04:21 for the application but to give you a
  • 00:04:23 black but to give you a quick overview
  • 00:04:26 but basically do you have components
  • 00:04:28 which makeup or app or Dom in the end –
  • 00:04:32 we have directives and components are
  • 00:04:35 just directives and directives in the
  • 00:04:38 end are only certain commands
  • 00:04:42 instructions so to say we place in our
  • 00:04:44 HTML code which challeng want you to do
  • 00:04:47 something when it finds these
  • 00:04:49 instructions for example in our
  • 00:04:53 component case here this instruction
  • 00:04:55 would be in or in isolation of well this
  • 00:04:59 my app tag my app is not a default HTML
  • 00:05:03 element of course but it is a directive
  • 00:05:07 and instructional what you will be able
  • 00:05:09 to help because we tell it how to handle
  • 00:05:12 it
  • 00:05:13 in our app component file we're setting
  • 00:05:17 a selector which is also Maya and
  • 00:05:19 there's no coincidence of course by
  • 00:05:22 setting up my app as a selector here
  • 00:05:24 angle to you is able to render whatever
  • 00:05:27 we define here in the template of our
  • 00:05:30 component in this place here where we
  • 00:05:34 set up will replace this custom-made
  • 00:05:38 component by placing this instruction
  • 00:05:41 this directive here my app which is as I
  • 00:05:44 said found that you matched as we have
  • 00:05:47 set it up here as a selector and then it
  • 00:05:50 renders whatever we specify here as a
  • 00:05:52 template of course our selectors
  • 00:05:55 therefore have to be unique so that
  • 00:05:57 angular 2 knows when to render what we
  • 00:06:02 of course may use a component model
  • 00:06:04 times in our Dom but if you want to have
  • 00:06:08 two different components with the same
  • 00:06:10 tool sector
  • 00:06:11 that won't work the way you want now
  • 00:06:14 yeah I was talking about a selector this
  • 00:06:16 template what is this what is this add
  • 00:06:18 component thing here well this is a
  • 00:06:21 default typescript class which will be
  • 00:06:24 compiled down to JavaScript code
  • 00:06:27 actually runs at every browser nowadays
  • 00:06:30 and
  • 00:06:32 we and annotated this class with this
  • 00:06:36 metadata this is just some metadata and
  • 00:06:40 we can attach metadata in typescript by
  • 00:06:42 using this at notation here there's some
  • 00:06:46 Manna Dey that you find bangla to which
  • 00:06:48 can be attached to any class and this
  • 00:06:50 kind of transforms this class into a
  • 00:06:52 component technically of course it stays
  • 00:06:55 a class but it
  • 00:06:57 well provides some annotation which
  • 00:06:59 allows angle to when it comes over this
  • 00:07:01 class you know that this class is
  • 00:07:03 actually a component and a component has
  • 00:07:06 several features and one very important
  • 00:07:08 one is dead it has a view which is
  • 00:07:11 rendered the template we specify here
  • 00:07:13 this is what will actually be rendered
  • 00:07:15 to the Dom and this does header here is
  • 00:07:18 what we're seeing here at the top this
  • 00:07:20 is rendered by and what you knowing that
  • 00:07:23 this is a component and that is has this
  • 00:07:25 template which should be rendered
  • 00:07:27 whenever it finds this my app selector
  • 00:07:31 here so this is our component decorator
  • 00:07:35 which basically contains some
  • 00:07:37 configuration for this component so that
  • 00:07:39 this configuration or so that this
  • 00:07:41 component is displayed that way or use
  • 00:07:44 the way we want that's our project
  • 00:07:47 structure that are two key parts of
  • 00:07:50 language to application and this is in a
  • 00:07:54 nutshell and I'm very short explanation
  • 00:07:56 of course how components who work how we
  • 00:07:59 configured them and why we configure
  • 00:08:01 them the way now of course in the next
  • 00:08:05 videos we will see more configuration
  • 00:08:07 and being a data to this component we
  • 00:08:09 all see multiple components we'll see
  • 00:08:12 how we can output dynamic data in our
  • 00:08:14 components we'll see how we can make
  • 00:08:16 components work together across several
  • 00:08:19 well components and how we can access
  • 00:08:23 the web to fetch data and much more and
  • 00:08:26 if you want to dive into some concepts a
  • 00:08:30 little bit deeper right now you might
  • 00:08:32 have a look at the other videos on this
  • 00:08:34 channel where I do talk about a lot of a
  • 00:08:37 metoo things already see you next videos
  • 00:08:39 bye