Angular 2 Fundamentals 6 [w/ subs]



00:00:01 – okay we're going to dive into code real
00:00:03 – quick here but first let's take a
00:00:05 – high-level look at angular 2 once we
00:00:08 – understand the conceptual model of how
00:00:10 – angular 2 works it will be easier to
00:00:12 – understand each of the pieces as we
00:00:14 – start coding them angular 1 was pretty
00:00:17 – much an NBC or model-view-controller
00:00:19 – framework angular 2 kind of departs a
00:00:22 – little bit from that although it's not
00:00:23 – difficult to relate the concepts
00:00:25 – together in Engler 1 you had a view or a
00:00:29 – template and the view would refer to a
00:00:31 – controller and your controller would
00:00:33 – expose models or objects that
00:00:35 – represented your data in Engler 2 you
00:00:38 – have a component and that component has
00:00:40 – an Associated template and as with
00:00:43 – angular 1 you have models that represent
00:00:45 – your data so at a glance you can kind of
00:00:47 – relate these together
00:00:48 – however in angular 1 the template was
00:00:51 – kind of in control your template would
00:00:53 – identify one or more controllers that
00:00:56 – control the sections of your page
00:00:57 – whereas in angular 2 components and
00:01:00 – templates really are one-to-one in fact
00:01:02 – you can kind of consider the template to
00:01:05 – be a part of the component and you can
00:01:07 – actually write your code like this and
00:01:08 – have your HTML right inside your
00:01:11 – component if you choose in this way a
00:01:14 – component in angular 2 is actually more
00:01:16 – comparable to a directive in angular 1
00:01:19 – in angular 1 you could define a
00:01:22 – directive that allowed you to basically
00:01:24 – create custom HTML elements which
00:01:26 – encapsulated both display and
00:01:28 – functionality in a more cohesive unit if
00:01:31 – you wanted a sortable list component to
00:01:34 – let you display an array in a stylized
00:01:36 – table with sortable columns you could
00:01:39 – just create a directive that gave you a
00:01:41 – sortable list element and the directive
00:01:44 – contained all the logic and HTML to make
00:01:46 – it all come together something about the
00:01:49 – directive bringing it all together made
00:01:51 – it feel very cohesive that's basically
00:01:53 – what components are except it feels a
00:01:56 – lot smoother as awesome as directives
00:01:58 – were they often felt clunky and you'd
00:02:01 – run into weird edge cases that were
00:02:03 – quite difficult to solve components feel
00:02:05 – much more smooth so let's take a
00:02:08 – graphical look at an angular 2
00:02:10 – application when you navigate to the URL
00:02:12 – of an angular 2 application
00:02:14 – there's always a root application
00:02:16 – component that is loaded first and then
00:02:19 – the angular router takes a look at the
00:02:21 – URL and says oh I have a component that
00:02:23 – matches that route and it loads that
00:02:25 – component the components template is
00:02:28 – then displayed in the browser and the
00:02:30 – component may then load some data from
00:02:32 – the server and give it to the template
00:02:34 – to be displayed of course if this page
00:02:36 – is very complex it's likely to be
00:02:39 – composed of lots of smaller components
00:02:41 – and those components may be composed of
00:02:44 – other components and so this kind of
00:02:46 – ends up creating a tree like structure
00:02:48 – it's helpful sometimes to think about
00:02:51 – your angular app in this way so here's
00:02:53 – the tree view of our imaginary
00:02:55 – application now imagine what happens if
00:02:58 – a user navigates to another URL
00:03:00 – well then basically you start a new tree
00:03:03 – except that your app component remains
00:03:05 – the router sees the new route and loads
00:03:08 – the corresponding component and all of
00:03:11 – its sub components and this repeats for
00:03:14 – all of your routes as your application
00:03:16 – gets bigger and bigger this can become a
00:03:19 – lot of stuff to load into memory this is
00:03:22 – where angular modules come in don't
00:03:24 – confuse angular modules or ng module
00:03:27 – with es2015 module that we've been
00:03:30 – talking about before angular modules are
00:03:33 – meant to be containers that group all of
00:03:35 – these routes or component trees and
00:03:37 – their corresponding bits of code into
00:03:39 – modules that can be loaded independently
00:03:42 – of each other that way if a user only
00:03:45 – ends up visiting this section of the
00:03:46 – site only these files will get loaded
00:03:48 – and the browser will only load these
00:03:50 – other files if the user navigates over
00:03:53 – into this section of the site this is
00:03:55 – one of the main purposes behind angular
00:03:57 – modules you don't have to use multiple
00:04:00 – modules in your app but as your app gets
00:04:02 – larger you may consider it one more high
00:04:05 – level concept regarding modules that is
00:04:07 – important to mention is how modules are
00:04:09 – used to make components services and
00:04:11 – directives available to the rest of your
00:04:13 – application when you create a component
00:04:16 – service directive or pipe you register
00:04:20 – it within a module that makes that
00:04:22 – object available for use by everything
00:04:24 – else in that module and with all of
00:04:26 – these except for services
00:04:28 – they are now only available in that
00:04:30 – module if you want to use them in
00:04:32 – another module you must register them
00:04:34 – with that module also that's true for
00:04:37 – all of these except for services
00:04:39 – services or providers get registered in
00:04:43 – the root injector so they're available
00:04:45 – across angular modules so that's kind of
00:04:48 – our high-level view of angular
00:04:50 – applications let's take a look at what
00:04:52 – we'll actually be building in this
00:04:53 – course


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

Comments

comments