Angular 2 | Tutorial 4 | Components [w/ subs]



00:00:00 – so what's going on everybody my name is
00:00:02 – Mei hole and welcome to your fourth
00:00:04 – tangela tutorial in which I'm going to
00:00:07 – discuss about components and this
00:00:10 – decorator component in angular so
00:00:14 – angular has been using the es 7 syntax
00:00:19 – for decorators and what that essentially
00:00:23 – means is that angular with the help of
00:00:26 – this component decorator provides extra
00:00:28 – information to the component what the
00:00:31 – component is and what it's going to do
00:00:34 – right so as I have told in my angular 2
00:00:37 – video as well right here inside your
00:00:43 – component you have this selected tag
00:00:46 – which is a fruit which informs that this
00:00:49 – component is targeted on this tag right
00:00:52 – here right and the template for this
00:00:57 – component would be this after component
00:01:01 – or HTML and the style URL is an array
00:01:03 – which consists of all the Styles used by
00:01:06 – the component so basically what happens
00:01:09 – is that a component area and then let's
00:01:15 – just say you have a footer as well so
00:01:17 – you can pretty much distribute all of
00:01:21 – your website into different components
00:01:23 – right so every color is another
00:01:28 – component and you can have components
00:01:32 – inside component and then finally what
00:01:36 – this is right here is your root
00:01:38 – component root component right so right
00:01:44 – now our app root is the root component
00:01:46 – of our application which consists of the
00:01:48 – full application and then further we can
00:01:51 – just split our application into
00:01:54 – different sort of components depending
00:01:56 – upon how our application should look so
00:01:59 – if you are kind of developing a blog
00:02:02 – template or something so it would
00:02:04 – probably look something like this only
00:02:06 – but you know you get the idea how
00:02:09 – components are actually how you can map
00:02:12 – them
00:02:13 – – graphical interface right so more or
00:02:17 – less the components consist of what you
00:02:20 – see as individual on the screen and then
00:02:25 – if you take a look and the documentation
00:02:27 – in the metadata properties it says it
00:02:31 – tells us a lot of properties which we
00:02:34 – can have but currently we are having
00:02:35 – just three selected template URL and
00:02:38 – style URLs which is enough for us to get
00:02:40 – started so you can see that we have this
00:02:43 – animations and I guess this one is new
00:02:45 – in angular 4 so we have animations
00:02:48 – change detection encapsulation and all
00:02:50 – that good stuff we're going to discuss
00:02:52 – later on in our application so again a
00:02:56 – component is nothing but a part of your
00:02:59 – web page which is laid in your
00:03:03 – application right so what you can do is
00:03:08 – you can actually create components wacom
00:03:11 – online as well so that open command
00:03:14 – window here and start writing like ng
00:03:17 – space chief component and then let's
00:03:21 – just say how to create a header write a
00:03:24 – nice intro now you can see that it saves
00:03:29 – me that it has created header component
00:03:32 – CSS HTML typescript SPECT I tripped and
00:03:36 – I tripped so what essentially a
00:03:38 – component consists of if we take a look
00:03:40 – in here is the CSS file which defines
00:03:45 – all the Styles the HTML file like it
00:03:49 – saves me header works which is the view
00:03:51 – and the typescript file which is the
00:03:54 – logic of the file so more or less
00:03:57 – angular is model-view-controller type of
00:04:00 – framework where this is your type script
00:04:05 – file is your file where all the hot
00:04:08 – chicken goes then this is your HTML file
00:04:11 – which is your view file and then finally
00:04:14 – we have the CSS file which is used for
00:04:17 – designing your component right so I can
00:04:20 – see that we have pretty much two
00:04:22 – components the first one is our root
00:04:24 – component which
00:04:26 – you can see this creek gray box right
00:04:28 – here and the second one is our hidden
00:04:31 – component which is this orange box right
00:04:34 – here so that's how really much you
00:04:37 – create a component and that's what
00:04:39 – components are in angular so that's all
00:04:42 – for this one and if you liked it then
00:04:43 – don't forget to subscribe and thank you
00:04:45 – for watching and see you then in the
00:04:47 – next one


Video Url:
http://youtu.be/pd1WQMMRTw4

Comments

comments