Angular 2 | Tutorial 11 | Ng Module | TutorialsPoint [w/ subs]



00:00:00 – so what's going on everybody my name is
00:00:03 – maples and welcome to your eleventh
00:00:05 – tutorial for angular and in this
00:00:08 – tutorial we're going to learn about what
00:00:11 – ng modules is in angular four right so
00:00:17 – we have seen some tutorials where we are
00:00:20 – making use of angular app but we do not
00:00:22 – really draw till now what ng module is
00:00:25 – so ng module was actually added to
00:00:29 – angular 2 later on it was not when it
00:00:32 – was not with the release version of
00:00:34 – angular 2 the first version when K when
00:00:36 – it came out so ng module was added later
00:00:40 – on to angular 2 but it's quite useful
00:00:43 – actually and what it does is pretty much
00:00:47 – organizers are dependencies and imports
00:00:51 – whatever we need for a specific module
00:00:53 – now first things first let's see what
00:00:57 – module is in angular so angular
00:01:00 – introduces module concept as something
00:01:05 – like a box which contains a lot of
00:01:09 – components right so your web page can
00:01:12 – contain like header component then
00:01:16 – sidebar component Content area component
00:01:19 – then maybe a shopping cart component all
00:01:22 – that stuff then you could pretty much
00:01:24 – organize all of these components into
00:01:26 – one module which could be user module
00:01:29 – right which or rather view module or
00:01:33 – whatever you want to say that so that
00:01:35 – module would be created with this ng
00:01:37 – module right and with what this ng
00:01:40 – module contains or rather this engine
00:01:44 – module decorator is that it is a
00:01:47 – metadata object which contains some
00:01:50 – useful information about what this
00:01:52 – module would do and what this module
00:01:55 – requires like the imports and the
00:01:59 – services and dependencies it needs so
00:02:03 – for example if you are making use of
00:02:05 – something like you're doing login and
00:02:09 – you want to make use of HTTP requests so
00:02:13 – make use of HTTP or rather it is a
00:02:16 – module so it would go inside imports so
00:02:19 – it would be HTTP modules right so with
00:02:23 – this you will have access to HTTP module
00:02:25 – in angular and let's say you want to
00:02:29 – make some routing stuff so you would
00:02:31 – import a route router module and this
00:02:35 – would give you access to the router
00:02:37 – module inside your components of this
00:02:40 – module right so again modules would
00:02:43 – contain one or more components and
00:02:47 – components could then make use of all
00:02:49 – these important modules which we have in
00:02:51 – here ok so that's good but what about
00:02:55 – these declarations import provider well
00:02:58 – and booster what's these well to start
00:03:01 – off with this declarations would is an
00:03:04 – array of components which would be
00:03:07 – included in this module right so right
00:03:09 – now we are just making use of one
00:03:10 – component which is AB component which is
00:03:13 – the default component in default
00:03:17 – installation or default setup with the
00:03:20 – angular CLI so you can see that this is
00:03:23 – pretty much a simple component which
00:03:27 – have some of our data right now and
00:03:30 – again this component just targets up
00:03:33 – route and with a template you are of
00:03:35 – asked component HTML and it just simply
00:03:38 – display the seller world so nothing
00:03:40 – fancy here
00:03:41 – so this declarations would contain a
00:03:44 – list of an array of all the components
00:03:47 – which you want to use so it would
00:03:49 – typically look like head of component
00:03:52 – and then let's just say sidebar
00:03:55 – component or if you are creating
00:03:58 – something like I don't know a quiz app
00:04:00 – so you can say like question component
00:04:03 – and the option component anything like
00:04:09 – that maybe like share links component
00:04:13 – something like that so that's very much
00:04:16 – what would go here the next thing is
00:04:21 – that in both will now impose what this
00:04:24 – does is that it would allow you to
00:04:26 – import other modules into the app so so
00:04:34 – the app can pretty much make use of
00:04:36 – other modules like making use of this
00:04:41 – browser module to access what we have as
00:04:44 – ng-if and ng4 so those are the
00:04:47 – directives which are not really we have
00:04:50 – not really imported it anywhere in our
00:04:52 – component as well but still we were able
00:04:55 – to make use of li star nga for ng 4 now
00:05:01 – the reason is that because again this is
00:05:03 – simply a directive right it's not
00:05:05 – different from a directive so we were
00:05:07 – able to access this directive because we
00:05:09 – imported this the browser modules from
00:05:13 – angular
00:05:14 – platform browser and this browser module
00:05:18 – contains the code or the definition for
00:05:21 – the directives of ng-if and ng 4 so
00:05:25 – pretty much this makes this this makes
00:05:27 – it a lot modular to import other sort of
00:05:30 – modules and finally what goes in
00:05:34 – providers is pretty much like your
00:05:37 – service like if you are creating a login
00:05:39 – application with angular and you want to
00:05:43 – create a persistent sort of session so
00:05:46 – that the user can go from one page to
00:05:48 – another and doesn't lose its
00:05:51 – login state so we can do is pretty much
00:05:54 – create a user service and fill it in to
00:05:58 – provider inside our module so let's say
00:06:01 – if our if your module is – if your
00:06:04 – module is dashboard right and that
00:06:07 – module contains components of different
00:06:10 – different pages so you want to just hook
00:06:12 – in providers with user service and then
00:06:17 – this user service would contain all the
00:06:19 – methods and variables for the user data
00:06:23 – like user name or whatever you know user
00:06:28 – profile URL and the user image URL
00:06:31 – stuff if the user is logged in how long
00:06:33 – the user has been logged in and all that
00:06:36 – stuff and finally we have this bootstrap
00:06:40 – which very much just bootstraps your app
00:06:42 – with the specified components now it's
00:06:46 – very rare to bootstrap your app with
00:06:49 – more than one component I guess I
00:06:52 – haven't seen it anywhere but yes very
00:06:56 – much you can do that because it's
00:06:58 – exception array so which probably would
00:07:01 – work as well but in most of the cases or
00:07:04 – you I don't know if you would ever need
00:07:06 – that but you will just need to bootstrap
00:07:09 – only one component in a module right so
00:07:14 – to sum up what goes in declaration is
00:07:16 – your components and directives and all
00:07:18 – that stuff if you remember from that
00:07:20 – blue directed tutorial we created I
00:07:24 – don't know a couple of curious blacks we
00:07:27 – saw that angular CLI automatically plays
00:07:30 – that directive dependency inside these
00:07:32 – declarations so declaration contains
00:07:34 – components and directives the import
00:07:37 – contains other modules which pretty much
00:07:40 – gives you access to the components and
00:07:43 – directives of that particular modules
00:07:45 – right so declaration goes like you
00:07:49 – import your own modules into own
00:07:53 – components and directives into your
00:07:55 – module and import actually impose the
00:08:00 – full other modules right now there's no
00:08:03 – kind of relation between this imports
00:08:05 – and this input right these two are
00:08:08 – different things so don't confuse them
00:08:10 – as one of the same thing so and finally
00:08:14 – providers contains services which we'll
00:08:17 – take a look at later on and
00:08:20 – bootstrapping bootstrap would contain
00:08:22 – the component you want to bootstrap
00:08:24 – where do you want to start your
00:08:25 – application with right so that is how
00:08:28 – very much how this engine module
00:08:30 – decorator is laid out and that's how it
00:08:33 – works so that's all for this one and if
00:08:35 – you liked it then don't forget to
00:08:36 – subscribe and thank you for watching
00:08:38 – I'll see you then in the next one


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

Comments

comments