Angular 2 | Tutorial 3 | Project Overview [w/ subs]



00:00:00 – so what is going on everybody my name is
00:00:02 – Mei hole and welcome to your third
00:00:04 – angular tutorial and in this tutorial
00:00:07 – I'm just going to give an overview of
00:00:09 – the project layout and structure what
00:00:12 – angular CLI has done for us so in the
00:00:16 – last tutorial we installed actually
00:00:19 – rather setup a very basic app using
00:00:22 – angular CLI and let's just see basically
00:00:26 – what this app consist of and how this
00:00:29 – all is working so starting from the top
00:00:33 – we see something e to e now this is
00:00:36 – end-to-end testing and we're not going
00:00:39 – to go a lot
00:00:40 – deep into it right now because we do not
00:00:43 – need that then we have the node modules
00:00:45 – and then we have the source folder which
00:00:48 – is of our interest line setup folder you
00:00:52 – will see that you have your component
00:00:54 – which is this app component right just
00:00:56 – kind of discuss component in a moment so
00:00:58 – the CSS file is blank the HTML file is
00:01:01 – something which we see on the page
00:01:04 – itself but you can see that right now
00:01:06 – here we are making use of this
00:01:08 – expression in angular which is welcome
00:01:11 – to title and this title might have been
00:01:12 – defined somewhere right so yeah this is
00:01:17 – pretty much what we were seeing last
00:01:18 – time on the screen so this is your HTML
00:01:21 – file of that component this is the CSS
00:01:24 – file and then we have some typescript
00:01:26 – files here so if you take a look at this
00:01:29 – app that component you can see that our
00:01:31 – title is app the variable which is being
00:01:35 – used here and then we have defined a
00:01:38 – component and imported all the necessary
00:01:41 – stuff so anyway so yeah this is the
00:01:47 – module file and we're going to discuss
00:01:50 – what modules are later on so inside our
00:01:53 – assets we do not have a lot of stuff
00:01:55 – inside environment you can see that we
00:01:57 – have Environment production and
00:02:00 – environment ts files which is just
00:02:04 – simple constant which says production
00:02:07 – falls in production true so not a lot of
00:02:09 – interest or
00:02:12 – these things right now then finally we
00:02:15 – have our index.html which is the actual
00:02:18 – files of to the browser after
00:02:20 – compliation which has the title hello
00:02:23 – world lab which is the name of our app
00:02:25 – right and then we have this app root tag
00:02:28 – which actually is the root of all the
00:02:31 – application the full application and
00:02:33 – hear all the stuff would be put by
00:02:37 – angular right so MnDOT es is the main
00:02:41 – types of file which is actually compiled
00:02:43 – by web pack and angular to actually
00:02:48 – produce some relevant JavaScript for the
00:02:51 – browser then again you can see that we
00:02:53 – are importing our add module which is
00:02:55 – this module or component you can say
00:02:58 – right now from our app folder and then
00:03:03 – we are just making use of that then we
00:03:07 – have some shrimps and polyfills here we
00:03:10 – do not need to worry a lot about them
00:03:11 – right now it's just for compatibility
00:03:14 – with all the browsers and all the stuff
00:03:16 – then we have some Styles here as say we
00:03:19 – can add global signs here so then we
00:03:23 – have something that's test and all of
00:03:26 – this karma dot J stuff so we are not
00:03:29 – gonna touch it right now because it's
00:03:32 – not a lot useful for us right now it's
00:03:35 – used for testing and all that stuff so
00:03:37 – we are not going to go into that much
00:03:39 – right now then we have this angular CLI
00:03:41 – dot JSON which is the angular internal
00:03:45 – file in delicious own settings
00:03:47 – we're not gonna touch these ones as well
00:03:50 – we're just gonna operate either from
00:03:52 – command line or they're going to
00:03:54 – directly add code to our components and
00:03:56 – modules and other stuff then again we
00:03:58 – have the star model config dot JSON file
00:04:02 – purchase files then we have our package
00:04:04 – to JSON file let me give you that we
00:04:06 – have a lot of dependencies which angular
00:04:09 – needs all that school and their local
00:04:13 – dependencies as well so yeah then
00:04:16 – finally coming down we have a typescript
00:04:19 – configuration file as usual and what you
00:04:23 – can do if you're running sublime text
00:04:25 – only is
00:04:26 – you can go to package control and write
00:04:30 – install package here and you can
00:04:35 – actually install typescript package
00:04:37 – which would allow you to enable syntax
00:04:41 – highlighting for typescript so you can
00:04:42 – write typescript here in my case I have
00:04:46 – already installed it so the package does
00:04:48 – not appear as typescript name but for
00:04:51 – your case it would be probably three and
00:04:53 – one of them would be just type scripts
00:04:56 – and just go ahead and install that and
00:04:58 – you will be good to go so yeah yeah well
00:05:02 – that's all for this one and in the next
00:05:05 – tutorial we're going to see how to get
00:05:09 – started with things in angular so that's
00:05:12 – all for this one and if you like that
00:05:14 – then don't forget to subscribe and thank
00:05:15 – you for watching I'll see you then in
00:05:17 – the next one


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

Comments

comments