Coding

Angular 2 Complete Course – Sections 1 & 2

  • 00:00:00 hi everyone my name is Max lunch parts
  • 00:00:03 Miller and in this video I'm releasing
  • 00:00:05 content from the first two sections of
  • 00:00:07 my five-star rated 13 hours angular 2
  • 00:00:11 course I got on udemy after this video
  • 00:00:14 you should be able to create your very
  • 00:00:16 first basic angle to applications to set
  • 00:00:19 up your development environment and you
  • 00:00:21 should have a basic knowledge about
  • 00:00:22 components templates and what makes up a
  • 00:00:25 tango 2 application if you don't want to
  • 00:00:29 learn more or dive deeper I would be
  • 00:00:32 very happy to welcome you in this course
  • 00:00:34 as well of course as in all the other
  • 00:00:37 videos I got on this channel I wish you
  • 00:00:39 a lot of fun with the content and well
  • 00:00:42 let's get going
  • 00:00:46 hi everyone welcome to this course I'm
  • 00:00:49 very very happy to have you here
  • 00:00:51 throughout this course
  • 00:00:53 I will give my very best to teach you
  • 00:00:56 everything about angular 2 to get you
  • 00:00:59 really started and get you into the
  • 00:01:01 position to start writing awesome
  • 00:01:04 angular 2 applications now what
  • 00:01:06 qualifies me to do that I work with
  • 00:01:09 angular 2 since quite some time I
  • 00:01:11 started when it was in the Alpha of
  • 00:01:12 course now it's nabina and i'd say i
  • 00:01:15 have quite a profound knowledge of
  • 00:01:17 angular 2 I enjoy working with
  • 00:01:20 JavaScript and frameworks like angular 2
  • 00:01:23 and I also enjoy teaching that's
  • 00:01:25 something I've done a lot throughout my
  • 00:01:27 life for example you may also check out
  • 00:01:30 my youtube channel mindspace tutorials
  • 00:01:32 if you're interested in more tutorials
  • 00:01:34 and see what I do but that's just a side
  • 00:01:38 note so in this course it's all about
  • 00:01:40 angular 2 therefore at the end of this
  • 00:01:43 course you'll be in a good position to
  • 00:01:45 actually create angular 2 applications
  • 00:01:48 this course is structured such that we
  • 00:01:51 learn all the fundamental building
  • 00:01:54 blocks of an angular 2 application all
  • 00:01:56 the theory and how to apply it we have a
  • 00:01:58 lot of practical examples in later
  • 00:02:01 stages of the course we'll create a real
  • 00:02:03 application which is more advanced than
  • 00:02:07 all the examples in the different
  • 00:02:09 sections and which will allow you to
  • 00:02:11 train all the concepts you learn in two
  • 00:02:13 sections before this but before we do
  • 00:02:16 that we'll begin in this section with
  • 00:02:18 well the question what is angular 2 why
  • 00:02:22 we use typescript and what typescript is
  • 00:02:24 and of course how to set up our
  • 00:02:26 development environment now I know most
  • 00:02:28 of you just want to get started and we
  • 00:02:30 will do so in section 2 where we dive
  • 00:02:32 into components which are the key
  • 00:02:34 building block of any angular 2
  • 00:02:36 application thereafter we'll learn more
  • 00:02:39 about data binding which is how we can
  • 00:02:42 work with data in an angular 2
  • 00:02:44 application how we can manipulate and
  • 00:02:46 change Dom and pass data around in our
  • 00:02:49 application a very key concept
  • 00:02:51 thereafter we'll talk about directives
  • 00:02:54 learn what directives are and how we use
  • 00:02:57 them how we create our own
  • 00:02:58 and how we can again manipulate it Dom
  • 00:03:01 with directors there after it's time to
  • 00:03:04 have a look at services which allow us
  • 00:03:06 to centralize certain parts of our
  • 00:03:08 application and access it from several
  • 00:03:12 points in our application so to say
  • 00:03:14 after learning more about services we'll
  • 00:03:17 have a look at forest angle at you and
  • 00:03:19 see which awesome tools angular2
  • 00:03:21 provides us to make working with forms
  • 00:03:24 really simple because you know working
  • 00:03:27 with forms is really and everyday a task
  • 00:03:29 of every developer after having learned
  • 00:03:32 more about forms we learn about pipes
  • 00:03:35 which are little help us angler to which
  • 00:03:37 allow us to transform data we output to
  • 00:03:39 a few we'll see how hellos pipes are to
  • 00:03:43 easily transform data or output it data
  • 00:03:47 and thereafter we'll have a look at
  • 00:03:51 routing in HTTP and see how we can set
  • 00:03:53 up a router to well route between
  • 00:03:56 different blocks in our application
  • 00:03:58 different routes of course and with HTTP
  • 00:04:01 we'll be able to leave our application
  • 00:04:04 and access data or whatever on a number
  • 00:04:07 server so a lot of content we got here
  • 00:04:10 and I'm very excited to get into it I'm
  • 00:04:12 sure you are too so let's get started
  • 00:04:18 hi everyone let's take a moment to talk
  • 00:04:22 about the architecture of an angular 2
  • 00:04:25 application because understanding and
  • 00:04:28 knowing that architecture is a key thing
  • 00:04:31 when becoming an angle to developer
  • 00:04:34 angular 2 followers a certain philosophy
  • 00:04:37 or yes architecture when it comes to
  • 00:04:40 building up applications with it
  • 00:04:42 basically an angular 2 application is
  • 00:04:45 very modular we have a lot of modules
  • 00:04:47 something that types group supports
  • 00:04:50 really well that hold the different
  • 00:04:52 parts of our application and the angular
  • 00:04:55 2 framework itself also consists of a
  • 00:04:59 lot of packages or modules that is we
  • 00:05:03 have to export and import certain
  • 00:05:06 functionalities or classes when we're
  • 00:05:08 interacting with different
  • 00:05:10 yeah modules so we might have a module
  • 00:05:13 with component and we might have another
  • 00:05:15 module with a component now if we want
  • 00:05:18 to use two ponente in component B we
  • 00:05:20 will have to export the class the
  • 00:05:23 JavaScript class in module a and import
  • 00:05:27 it and what you'll be we will see this
  • 00:05:29 in the course and it's really easy to do
  • 00:05:31 it's just important for you to
  • 00:05:33 understand that this modularity is a key
  • 00:05:36 thing in an angular app or an angular q
  • 00:05:39 application everything is modular there
  • 00:05:41 now this modules as I said hold
  • 00:05:44 different things one very important
  • 00:05:47 thing that makes up every angular 2
  • 00:05:49 application are components we will have
  • 00:05:52 one or multiple components that kind of
  • 00:05:56 yet really structure our application you
  • 00:05:59 can think of it like an HTML document
  • 00:06:00 where you have a header then a main
  • 00:06:03 section and the main section might have
  • 00:06:04 a sidebar and an a Content section and
  • 00:06:07 then you have a footer at the end that
  • 00:06:09 are certain sections or components on
  • 00:06:13 your web page as well right right now
  • 00:06:16 angular 2 works the same way you define
  • 00:06:19 components and then you build up your
  • 00:06:21 application with this these components
  • 00:06:24 and these components are able to be
  • 00:06:27 siblings or you are able to nest those
  • 00:06:29 components in
  • 00:06:30 each other and they are able to
  • 00:06:32 communicate with each other to make sure
  • 00:06:35 that you're able to use these components
  • 00:06:37 you can give them selectors which is
  • 00:06:41 basically a name and then you embed that
  • 00:06:44 name in HTML text so in a greater and
  • 00:06:47 smaller sign in your HTML code that will
  • 00:06:50 be how you include components and of
  • 00:06:52 course we will see that very detailed in
  • 00:06:55 an extra video but just that you know
  • 00:06:58 you create your application from
  • 00:07:00 different components which you build
  • 00:07:03 together in which you can obviously
  • 00:07:05 reuse and that's the great benefit the
  • 00:07:07 reusability the scalability and that
  • 00:07:10 it's very easy to maintain since you
  • 00:07:13 yeah make up your app from this reusable
  • 00:07:16 parts like you probably already know it
  • 00:07:19 from server-side frameworks where you
  • 00:07:21 might use rendering engines like blade
  • 00:07:25 and laravel or smart key where you also
  • 00:07:28 have certain includes or components and
  • 00:07:31 then you put them together so we have
  • 00:07:33 these components that live in modules
  • 00:07:36 that we can put together and build our
  • 00:07:39 app up from now components are just
  • 00:07:42 directives if you have an angular 1
  • 00:07:45 background you might already know
  • 00:07:47 directives but if you don't that's no
  • 00:07:49 problem
  • 00:07:50 directives are basically just
  • 00:07:51 instructions living in the HTML code
  • 00:07:54 that telling what you trail to transform
  • 00:07:57 the piece of code the HTML element for
  • 00:08:00 example where they sit on into something
  • 00:08:03 else well it depends on the directive
  • 00:08:05 what did you components are such a
  • 00:08:07 directive but they don't live in an HTML
  • 00:08:10 element they are kind of an HTML element
  • 00:08:13 themselves specified by the selector we
  • 00:08:16 give them now we embed components in the
  • 00:08:20 code and run angular 2 runs over this
  • 00:08:23 line of code it will know okay that's a
  • 00:08:26 component I have to insert something
  • 00:08:28 there that something will be the few
  • 00:08:32 attached to a component or the template
  • 00:08:35 of that component and that is the
  • 00:08:36 difference or that is why components are
  • 00:08:39 a directive but they are a special
  • 00:08:41 directive
  • 00:08:42 directive which holds a few a normal
  • 00:08:44 directive will just hold instructions
  • 00:08:47 how to transform the element it sits on
  • 00:08:49 a component is not only such an
  • 00:08:52 instruction it has a few and this
  • 00:08:55 instruction is always swap out the
  • 00:08:57 selector and put in that few so
  • 00:09:00 components are directives with a few
  • 00:09:02 attached to them we make a component as
  • 00:09:07 well as we create a directive by taking
  • 00:09:10 a JavaScript class and attaching
  • 00:09:13 metadata to it this metadata will hold
  • 00:09:17 certain firm ation like what is the
  • 00:09:19 selector what is the template which
  • 00:09:21 directives do i want to use in that
  • 00:09:23 template that will tell angular to okay
  • 00:09:27 this class is a component or is a
  • 00:09:29 directive or is whatever and now the
  • 00:09:32 configuration for this component
  • 00:09:34 directive whatever is inside this
  • 00:09:37 metadata we attach so we have JavaScript
  • 00:09:39 classes plus metadata equals component
  • 00:09:43 directive whatever and then we take
  • 00:09:46 these components directives whatever and
  • 00:09:48 build up our apps from it because they
  • 00:09:51 are again modular now a very important
  • 00:09:54 thing our services services are also
  • 00:09:58 JavaScript classes which we turn into
  • 00:10:00 service by attaching metadata or we make
  • 00:10:04 them injectable by attaching metadata to
  • 00:10:06 put it that way and then we can do
  • 00:10:08 exactly that in check them into our
  • 00:10:11 components or directives so a service
  • 00:10:14 might holds some functionality that we
  • 00:10:17 want to access from different places
  • 00:10:19 throughout our application like from
  • 00:10:21 component a and component PB now instead
  • 00:10:24 of writing that function we might have
  • 00:10:27 in at service in component a a B and
  • 00:10:29 therefore duplicate our code we
  • 00:10:33 outsource it into this well service this
  • 00:10:36 class and then we take this service and
  • 00:10:39 inject it into component a and B and
  • 00:10:41 then both components are able to use the
  • 00:10:44 functionality provided by this service
  • 00:10:47 so services also a key thing in angular
  • 00:10:50 2 applications holding certain day
  • 00:10:55 were functionality that we store in this
  • 00:10:58 kind of centralized place that we can
  • 00:11:01 then use throughout our application so
  • 00:11:05 that's the architecture of an angular 2
  • 00:11:07 application having these modules with
  • 00:11:10 components that make up our application
  • 00:11:12 directives which change the Dom services
  • 00:11:15 which kind of stores central parts of
  • 00:11:19 our application that are usable in
  • 00:11:21 different places of our application and
  • 00:11:24 that are injected into those places or
  • 00:11:27 module code modules and that is kind of
  • 00:11:31 the core philosophy of an angular 2
  • 00:11:33 application this modularity this these
  • 00:11:36 building blocks and the reusability and
  • 00:11:40 we will see this throughout this course
  • 00:11:42 it's just important that you got your
  • 00:11:45 first feeling on how this architecture
  • 00:11:48 looks like and how an angle to
  • 00:11:50 application works see only videos by
  • 00:11:57 develop angular2 applications we need to
  • 00:11:59 create a certain development environment
  • 00:12:02 or workspace with which you will work
  • 00:12:04 throughout this course now this
  • 00:12:05 workspace is really easy to set up
  • 00:12:07 indeed
  • 00:12:09 I actually prepared it for you already
  • 00:12:11 but there are two things we will have to
  • 00:12:13 do or to install on our machines to be
  • 00:12:17 able to well use this workspace and
  • 00:12:19 especially use typescript so these two
  • 00:12:23 things are no js' or there specifically
  • 00:12:27 we need the node package manager and PM
  • 00:12:30 which is the tool which will allow us to
  • 00:12:33 well first install and update all our
  • 00:12:36 dependencies of our projects and
  • 00:12:38 secondly which will help us with the
  • 00:12:41 compilation of typescript and the the
  • 00:12:45 set up were the starting of a little
  • 00:12:48 server which serves our files and which
  • 00:12:51 will automatically update our browser
  • 00:12:54 tab so that we can always see the most
  • 00:12:56 recent well status of our application
  • 00:13:00 and that's a very handy thing especially
  • 00:13:03 the compilation of the typescript is not
  • 00:13:05 only handy but required so we will need
  • 00:13:07 that and the other thing is obviously
  • 00:13:09 well touch crypt the typescript compiler
  • 00:13:11 which we need to install in our system
  • 00:13:14 so that we can use it throughout this
  • 00:13:16 project let's get started the first
  • 00:13:19 thing I want to do is I'm going to
  • 00:13:20 search for node.js and on their website
  • 00:13:24 you want to download the latest major
  • 00:13:27 dependable ARM version here for your
  • 00:13:31 system so ever if you're a Mac you don't
  • 00:13:32 know that or Windows TV so it's
  • 00:13:34 available for all systems and then you
  • 00:13:36 just will download this save it to
  • 00:13:39 wherever you like and once it's
  • 00:13:43 downloaded me get it over here you
  • 00:13:46 really just want to follow through all
  • 00:13:48 these steps here that's really easy now
  • 00:13:50 I already have it installed ever I'm not
  • 00:13:52 going to go through the installation
  • 00:13:53 process but it's well really simple
  • 00:13:56 next thing is now we got it installed we
  • 00:13:58 need to make sure that we have the most
  • 00:14:00 recent version of NPM this package
  • 00:14:03 manager which is the only reason why
  • 00:14:05 we're using know what here right so to
  • 00:14:07 do this you want to fire up terminal
  • 00:14:09 again on window is just open the command
  • 00:14:12 line on Mac you will use your terminal
  • 00:14:15 app and then what we want to do in this
  • 00:14:17 terminal here is on Mac we type sudo on
  • 00:14:21 Windows we don't and then on both sifted
  • 00:14:24 systems we follow up with npm install
  • 00:14:27 NPM – G now you hit this and then you
  • 00:14:32 enter your your password your admin
  • 00:14:35 password on Mac and again on window you
  • 00:14:38 don't need a sudo command so this is no
  • 00:14:41 running and just make sure we have the
  • 00:14:43 latest version of NPM now after that we
  • 00:14:48 want to type NPM – V while to check
  • 00:14:50 which version we have and well that
  • 00:14:52 seems pretty good good so now we got MPM
  • 00:14:56 installed the next thing is we need
  • 00:14:58 typescript to do this
  • 00:15:00 well Google for it typescript and then
  • 00:15:05 it's the first result here typescript
  • 00:15:07 languor –g and when we click on get
  • 00:15:10 typescript now we're taking to this
  • 00:15:13 little command here which is just copy
  • 00:15:15 and then enter into our still open
  • 00:15:18 terminal here and now I'm not going to
  • 00:15:20 execute it because I have typescript
  • 00:15:22 installed but you just hit enter and
  • 00:15:24 this will install typescript and it's
  • 00:15:26 the same on Windows and Mac you don't
  • 00:15:28 need to execute this command is just for
  • 00:15:31 compilation which we're not doing
  • 00:15:32 manually we will let NPM or specifically
  • 00:15:35 gulp handle this okay now so that's that
  • 00:15:39 we have all the tools we need now we
  • 00:15:41 need the actual workspace you also find
  • 00:15:44 attach this with you a description a PDF
  • 00:15:46 document which well will guide you
  • 00:15:48 through this whole installation process
  • 00:15:50 now the last step we have to do is
  • 00:15:52 actually set up our workspace so the
  • 00:15:55 files were going to use to write our
  • 00:15:57 angular 2 application this is really
  • 00:15:59 easy attach this video you'll find a
  • 00:16:02 file called workspace manual
  • 00:16:05 installation download this file and well
  • 00:16:09 save it basically anywhere and then you
  • 00:16:12 want to extract its file what I'm going
  • 00:16:16 to do is I'm just getting this on my
  • 00:16:20 desktop
  • 00:16:22 okay so here is my folder first I'm
  • 00:16:24 going to rename it to let's say angular
  • 00:16:26 2 app name is purely up to you obviously
  • 00:16:29 and the next thing is we have to install
  • 00:16:32 our dependencies like well the angular 2
  • 00:16:36 framework itself and a couple of our
  • 00:16:37 dependencies we do this by while opening
  • 00:16:40 up our terminal again if we haven't
  • 00:16:44 already and in this terminal you want to
  • 00:16:49 navigate to this folder
  • 00:17:00 inside this folder we then have to run
  • 00:17:03 npm install and this will install all
  • 00:17:07 the packages we need now this might take
  • 00:17:10 a couple of seconds and you might see
  • 00:17:12 some errors throughout this process but
  • 00:17:15 that is not really a problem because it
  • 00:17:17 only means that something's had to be
  • 00:17:18 recompiled maybe in the end it should
  • 00:17:21 finish without an error and I will see
  • 00:17:23 you then
  • 00:17:23 so my installation just finished and
  • 00:17:26 this is how it should look like on your
  • 00:17:27 machine to no errors warnings are ok and
  • 00:17:31 now we're good to go
  • 00:17:33 now silicide this folder here in my
  • 00:17:35 terminal and now I tip type NPM start
  • 00:17:39 what this will do is it will well
  • 00:17:42 compile the files and start our light
  • 00:17:46 server and the gulp process which will
  • 00:17:49 watch all our files and recompile them
  • 00:17:51 whenever we change something there now
  • 00:17:54 this will open up a new browser tab
  • 00:17:57 specifically this one here and you might
  • 00:18:00 see that loading text here well that
  • 00:18:02 only means that basically the light
  • 00:18:04 service started before compilation was
  • 00:18:06 finished for the first time and just hit
  • 00:18:09 the refresh button and you see should
  • 00:18:11 see our hello world welcome page and
  • 00:18:14 this is the point where we will begin in
  • 00:18:16 all our future lectures by the way if
  • 00:18:18 you always want to have the most recent
  • 00:18:21 state of this workspace you might also
  • 00:18:24 clone it from my git report which you
  • 00:18:26 will find a link in the PDF document
  • 00:18:28 attached to this video ok now we're all
  • 00:18:30 good to go see you in the next videos
  • 00:18:32 bye
  • 00:18:38 hi everyone we successfully set up our
  • 00:18:41 workspace in last with you now I want to
  • 00:18:43 explain a little bit about well the
  • 00:18:45 folder structure or the overall
  • 00:18:47 workspace structure we're using
  • 00:18:49 throughout this course so that you're
  • 00:18:51 really ready to get started this is the
  • 00:18:54 well boiler plate as it was installed in
  • 00:18:57 the last video no matter if you were
  • 00:18:58 following the full already manual
  • 00:19:00 approach again you should have this
  • 00:19:02 folder structure here and let me tell
  • 00:19:05 you what each of these folders does well
  • 00:19:07 the app folder here that is just a
  • 00:19:10 folder where our compiled typescript
  • 00:19:13 files will be moved to so we don't
  • 00:19:15 change anything here that is the code
  • 00:19:17 that will actually get executed in the
  • 00:19:19 end because we're writing in typescript
  • 00:19:21 this will get compiled to JavaScript and
  • 00:19:23 JavaScript code will then get executed
  • 00:19:26 but we're not touching these javascript
  • 00:19:28 files
  • 00:19:28 it's just our output directory the
  • 00:19:32 assets folder contains the s CSS code
  • 00:19:35 now if you don't want to use s CSS you
  • 00:19:37 can write normal CSS code in there q
  • 00:19:40 this will just transpile it you well
  • 00:19:42 normal CSS code and add healthy features
  • 00:19:46 like well first of all you can use a CSS
  • 00:19:48 second of all it will also auto prefix
  • 00:19:52 it and so on so very handy to use this
  • 00:19:55 in development but you don't have to if
  • 00:19:57 you don't want to the dev folder now
  • 00:20:00 contains our typescript files so this
  • 00:20:03 will be the folder structure in which we
  • 00:20:04 will work most of the time because well
  • 00:20:06 there we write all our logic all the
  • 00:20:09 typescript logic all our real angular 2
  • 00:20:13 application files and here we got this
  • 00:20:16 app component file with just a very
  • 00:20:18 first component this hello world for you
  • 00:20:21 we see and at the same time which is the
  • 00:20:23 root component of our project now I'm
  • 00:20:25 not going to dive into project and her
  • 00:20:27 into components here this will be done
  • 00:20:29 with the component section so just you
  • 00:20:31 know this is our first component which
  • 00:20:34 renders the first page to the screen
  • 00:20:36 we're seeing here then the world page it
  • 00:20:39 is started by this boot ts file which
  • 00:20:43 will start up our application and again
  • 00:20:45 this will be explained later which is in
  • 00:20:47 more detail but just you know this is
  • 00:20:50 our booty as well
  • 00:20:51 this is how it will look throughout this
  • 00:20:54 course we will make some adjustments
  • 00:20:57 from time to time but in general there's
  • 00:20:59 the way it will stay now I noticed that
  • 00:21:02 some people had an error that a dot TS
  • 00:21:06 file ending was and it added to this
  • 00:21:09 import and then it would doesn't crash
  • 00:21:12 the app and it would not work anymore
  • 00:21:14 make sure your import looks like this
  • 00:21:17 app component from app dot component no
  • 00:21:20 dot tspn very important the node modules
  • 00:21:25 folder holds all the packages and
  • 00:21:28 dependencies we're going to use
  • 00:21:29 throughout this course or we need to
  • 00:21:32 develop angular 2 applications when
  • 00:21:35 obviously this will include angular 2
  • 00:21:37 framework but also some other
  • 00:21:38 dependencies now when we're deploying
  • 00:21:41 our app we won't ship this whole folder
  • 00:21:43 but I will bring out a specific section
  • 00:21:46 about deployment in the future just as
  • 00:21:49 you know you will find it later the
  • 00:21:52 source folder which will hold our
  • 00:21:54 compiled CSS files so as with typescript
  • 00:21:58 in the dev folder which is compiled to
  • 00:22:00 the app folder our s CSS files which
  • 00:22:02 look at the assets folder here will be
  • 00:22:05 compiled to CSS which will then be
  • 00:22:07 stored in the source folder so this
  • 00:22:10 source folder is also something we don't
  • 00:22:12 touch well the Taipings folder you can
  • 00:22:15 mainly ignore it that contains some info
  • 00:22:18 for typescript to correctly identify and
  • 00:22:22 use certain types so to say now all
  • 00:22:24 these other files here basically
  • 00:22:26 provides some configuration to our
  • 00:22:27 project you allow our IDE to correctly
  • 00:22:31 work to give typescript some information
  • 00:22:35 to not fro certain compilation errors
  • 00:22:37 and so on so that is really what's
  • 00:22:40 inside these files so I hope this clears
  • 00:22:43 this up a bit and allows you to get
  • 00:22:46 started really good and quick see you on
  • 00:22:48 the next videos bye
  • 00:22:54 every one a number instructor with you
  • 00:22:57 here very short just once you move
  • 00:23:00 through this index dot HTML file here
  • 00:23:02 where while we see certain imports in a
  • 00:23:05 certain configuration now just so that
  • 00:23:09 you know what all this stuff means here
  • 00:23:11 it's a basic HTML skeleton and as you
  • 00:23:14 might be aware with angular 2 we create
  • 00:23:16 single page applications so technically
  • 00:23:18 this HTML file is the only HTML file
  • 00:23:21 ever sent from the server to our browser
  • 00:23:24 the only HTML file which will render in
  • 00:23:28 the browser so to say and then we're
  • 00:23:30 manipulating this file through angular 2
  • 00:23:32 so we got our basic HTML skeleton here
  • 00:23:35 and the first important thing is the
  • 00:23:37 space raft tag here what this does is it
  • 00:23:41 sets the base URL so to say of our
  • 00:23:45 application to in this case the root
  • 00:23:47 directory
  • 00:23:48 therefore it's slash what this means is
  • 00:23:50 that in our case we're serving files
  • 00:23:53 from localhost and we don't serve it
  • 00:23:56 from low gloss slash Mike ulap or local
  • 00:23:59 has slash anything we're serving it from
  • 00:24:02 localhost / nothing else so from the
  • 00:24:05 root directory on this domain and
  • 00:24:07 therefore we're setting this to just a
  • 00:24:09 slash now if you were to host this app
  • 00:24:12 on your server and there you had like
  • 00:24:15 example.com slash my angular 2 app you
  • 00:24:18 would have to enter slash my angular 2
  • 00:24:20 app slash into this base tag and this
  • 00:24:24 tag is important for routing to let
  • 00:24:26 angular to know where our actual root is
  • 00:24:28 and that's very important
  • 00:24:31 okay then title and so on then we got
  • 00:24:33 several imports here and this will
  • 00:24:35 probably change as angular 2 matures but
  • 00:24:39 as of now a disaster several polyfills
  • 00:24:42 we have to import to make it work and
  • 00:24:43 Internet Explorer and so on then we have
  • 00:24:47 our system and dot source such as file
  • 00:24:51 which is system CS which again is our
  • 00:24:55 file loader and I will come back to that
  • 00:24:57 in a second
  • 00:24:58 then we have our X J's which will enable
  • 00:25:01 us to use observables observables as a
  • 00:25:04 concept we will see when we're working
  • 00:25:05 with HTTP and
  • 00:25:07 see this in a later section but this
  • 00:25:09 rxjs import here is important for us to
  • 00:25:11 well use it and basically use HDPE
  • 00:25:14 angular2 without using promises but we
  • 00:25:17 will see this in a later section just as
  • 00:25:18 you know what this import does now the
  • 00:25:21 next three imports are angular 2
  • 00:25:22 specific it's the core package then some
  • 00:25:25 router specific modules and HDPE
  • 00:25:28 specific modules theoretically we would
  • 00:25:31 not need the latter to one if we burn or
  • 00:25:33 using routing or HTTP but I already
  • 00:25:35 included them here so that we don't have
  • 00:25:37 to do this once we're in the specific
  • 00:25:39 sections in this course
  • 00:25:41 good then now we're just including our
  • 00:25:44 main stylesheet the app CSS file and
  • 00:25:46 then we're in the body where we have to
  • 00:25:48 smile uploading tag my app is our root
  • 00:25:52 component the app component and my app
  • 00:25:55 is really just a selector of this
  • 00:25:56 component to let angular 2 know where to
  • 00:25:59 render this component we will see this
  • 00:26:01 when we were in a component section but
  • 00:26:04 this is basically how we start up or
  • 00:26:06 implement our application below that we
  • 00:26:09 have another script block here and here
  • 00:26:11 we're loading all the files we need for
  • 00:26:14 our application with system KS and now
  • 00:26:17 I'm obviously not talking about
  • 00:26:18 dependencies we're doing that up here
  • 00:26:20 but about the files we write and here
  • 00:26:23 we're basically setting the folder where
  • 00:26:25 this files are to be found the app
  • 00:26:27 folder where I set our compiled
  • 00:26:29 JavaScript files won't live in and well
  • 00:26:32 at the default extension and so on and
  • 00:26:34 we also say at the beginning
  • 00:26:37 please import this app boot file which
  • 00:26:39 is the bootstrap file which will fire up
  • 00:26:42 all our our application and all other
  • 00:26:45 files will then be loaded dynamically
  • 00:26:47 when we need them so this is our setup
  • 00:26:50 this our index.html and I think you
  • 00:26:52 should now be good to go to really
  • 00:26:54 understand with what we're working here
  • 00:26:58 the next step is to understand what we
  • 00:27:02 do in an English we application how it
  • 00:27:04 works and we'll start with components
  • 00:27:06 see you in next videos then bye
  • 00:27:13 Hey after all theory you're finally
  • 00:27:17 writing some code in this lecture if you
  • 00:27:20 watched my architecture with you and
  • 00:27:22 you're really sure to have a deeper
  • 00:27:24 understanding of all the fundamentals
  • 00:27:26 behind Englert you you know that an
  • 00:27:29 angular 2 application consists of
  • 00:27:32 several components so building blocks
  • 00:27:34 from which we build up our application
  • 00:27:37 and which we combined you yeah to create
  • 00:27:41 our website our application yet now in
  • 00:27:45 this whole section we'll have a look at
  • 00:27:47 those components how to create
  • 00:27:49 components how to configure components
  • 00:27:51 and how to let components interact with
  • 00:27:54 each other because we'll have more than
  • 00:27:57 one component in most applications but
  • 00:28:00 let's start with the very basics with
  • 00:28:01 just one component let's create one now
  • 00:28:05 in my development environment the way we
  • 00:28:07 set it up in the last video and here I
  • 00:28:11 already get a component this app
  • 00:28:13 component tsts stands for typescript
  • 00:28:16 this file holds I am completely complete
  • 00:28:20 angular queue component so this file has
  • 00:28:23 everything which defines the basics of
  • 00:28:27 angular 2 component and indeed it is
  • 00:28:30 this component that we are seeing and
  • 00:28:33 this screen here where we see hello
  • 00:28:36 world
  • 00:28:36 the hello world here is the text which
  • 00:28:39 is shown or with which is inserted in
  • 00:28:43 our template here the template of our
  • 00:28:46 component here so this this might look a
  • 00:28:51 bit strange here probably does if you're
  • 00:28:53 new to angular 2 and you probably are if
  • 00:28:57 you're watching this course and you
  • 00:28:59 don't know it if you have an angular 1
  • 00:29:01 background or because this is pretty new
  • 00:29:04 and this is the core of angular q this
  • 00:29:07 component based modular approach that is
  • 00:29:10 the reason why you can read a lot in the
  • 00:29:13 internet that there is a big difference
  • 00:29:14 between angular 1 and angular 2 and it
  • 00:29:17 is this component based approach that
  • 00:29:20 really yeah sets apart angular 2 or that
  • 00:29:24 is that the fundamental
  • 00:29:26 core of angular Q now obviously there
  • 00:29:30 are more building blocks to angular 2
  • 00:29:31 and we'll cover them all but it's really
  • 00:29:33 important to understand this component
  • 00:29:35 focus concept now my opinion such a
  • 00:29:39 component based orientation makes sense
  • 00:29:42 because if you look at the way you
  • 00:29:45 create websites or your style your
  • 00:29:48 websites when we're just talking about
  • 00:29:49 HTML and CSS then you're probably having
  • 00:29:54 a header and a main container and you
  • 00:29:57 have different sections with articles in
  • 00:29:59 this container then you have the footer
  • 00:30:01 at the bottom so you're already using
  • 00:30:03 components in this way
  • 00:30:05 you're dividing your page up into
  • 00:30:08 several building blocks and if you're
  • 00:30:10 using a templating engine when you're
  • 00:30:12 coming from let's say a server-side
  • 00:30:13 background when you have some experience
  • 00:30:16 using PHP or anything there then you
  • 00:30:19 probably use a templating engine to
  • 00:30:22 build up your views from several
  • 00:30:24 building blocks so this is really the
  • 00:30:27 same concept here angular 2 this is this
  • 00:30:31 component based approach and in the next
  • 00:30:35 video we'll dive a little bit deeper
  • 00:30:37 into this component and we're going to
  • 00:30:39 build our own component see you there
  • 00:30:47 Hey so this is the component we looked
  • 00:30:50 at in the last video our basic component
  • 00:30:53 our application ships with now what
  • 00:30:56 makes this a component down here we got
  • 00:30:59 a default class default typescript class
  • 00:31:02 which will then be compiled to
  • 00:31:04 JavaScript as I told you in the
  • 00:31:06 typescript William for example we're
  • 00:31:08 exporting this class to say hey this is
  • 00:31:12 a class which should be available and
  • 00:31:14 usable in other files so to say to you
  • 00:31:19 so this is this modular approach I was
  • 00:31:21 talking in the architecture video
  • 00:31:23 angular 2 consists of modules everything
  • 00:31:27 is packed into modules so to say and we
  • 00:31:30 make things available outside of a
  • 00:31:33 module this file is a module here for
  • 00:31:35 example by exporting things like this
  • 00:31:39 class and then we will be able to use
  • 00:31:41 this class outside of this file so this
  • 00:31:45 is where we define a class and as you
  • 00:31:47 can see this class doesn't contain any
  • 00:31:49 logic here it's completely empty class
  • 00:31:52 no properties no methods so that's
  • 00:31:55 definitely not doing anything here but
  • 00:31:58 we're making this a component by firstly
  • 00:32:01 importing component let me zoom in a
  • 00:32:04 little bit here importing component from
  • 00:32:07 angular to core from oops from this
  • 00:32:11 package here from this module so as
  • 00:32:14 we're exporting our app component class
  • 00:32:16 here you can say component is just never
  • 00:32:19 class exported in this module and we're
  • 00:32:22 importing it here so that we can use it
  • 00:32:24 here now where are we using it you
  • 00:32:26 probably already saw it we have this add
  • 00:32:29 component thing here now what's that app
  • 00:32:33 component is a typescript decorator this
  • 00:32:38 app at something part here is a
  • 00:32:41 typescript decorator which adds a
  • 00:32:44 metadata to our Charest applause and
  • 00:32:48 this decorator obviously is compiled
  • 00:32:50 JavaScript too but it's very nice to
  • 00:32:53 write in typescript you have it always
  • 00:32:55 beginning of this ad and then the name
  • 00:32:58 of the decorator or
  • 00:32:59 the metadata which should be added to
  • 00:33:01 the class in this case this component
  • 00:33:03 metadata here which really is just this
  • 00:33:07 javascript object we're passing as an
  • 00:33:09 argument you could say here in the
  • 00:33:11 parentheses and inside this JavaScript
  • 00:33:14 object so between those curly braces
  • 00:33:18 we're configuring our component our app
  • 00:33:21 component here and we get a lot of
  • 00:33:23 configuration options here we're only
  • 00:33:26 using two but there are a lot more and
  • 00:33:28 we will learn about all those options
  • 00:33:30 throughout this course obviously now
  • 00:33:32 let's begin with the two we are seeing
  • 00:33:34 here we get a selector metadata attached
  • 00:33:38 to our component which basically says
  • 00:33:40 okay this component should be this can
  • 00:33:46 be used in an HTML file by using HTM and
  • 00:33:50 HTML tag which contains app so by using
  • 00:33:53 this oops this HTML tag we can then
  • 00:33:59 embed this component into the HTML and
  • 00:34:02 that is a so-called directive it's not a
  • 00:34:06 default HTML tag as you can probably
  • 00:34:08 tell it's a custom-tailored
  • 00:34:10 HTML tag and angular 2 scans our
  • 00:34:13 document for example for those tags it's
  • 00:34:17 also scans for our directives its nose
  • 00:34:19 and then when it finds this tag it knows
  • 00:34:22 ah oh I know this that's a component I
  • 00:34:24 know it because I have specified a
  • 00:34:27 selector here and I know what to do with
  • 00:34:29 that I will have to insert the template
  • 00:34:32 instead of those app tags and the
  • 00:34:36 template is specified here now template
  • 00:34:39 here really is just a string right we're
  • 00:34:42 just outputting hello world here and
  • 00:34:43 that is again the text we're seeing here
  • 00:34:45 now we could also link to an external
  • 00:34:49 document here by using template URL then
  • 00:34:55 we would have to specify the path to an
  • 00:34:57 HTML file we would use this and we will
  • 00:35:00 use this in this course when we have
  • 00:35:02 like bigger templates which would be
  • 00:35:06 really unnecessarily big here in our
  • 00:35:10 JavaScript for
  • 00:35:12 typescript file and which we want you
  • 00:35:14 you have the separate file so that this
  • 00:35:17 typescript file here stays clean and
  • 00:35:19 doesn't have like 50 lines of HTML code
  • 00:35:22 mixed in although it would be perfectly
  • 00:35:25 possible you don't have to have a short
  • 00:35:27 string here you can expand this template
  • 00:35:30 over several lines and let me do this
  • 00:35:33 for example here so that we can actually
  • 00:35:35 see how we can change the output of our
  • 00:35:37 application I will use two backticks
  • 00:35:40 here so those are quotation marks that
  • 00:35:44 are Baptist and what these backticks do
  • 00:35:49 is they allow us to have a multi-line
  • 00:35:52 string so now we can just write between
  • 00:35:56 these backticks
  • 00:35:57 like it was one single block of a yellow
  • 00:36:00 of a string variable and we don't have
  • 00:36:02 to make sure that we get light brakes
  • 00:36:05 correctly so I can now use let's say a
  • 00:36:07 an h1 tag here and this is a test
  • 00:36:12 I'll let me close it and below that I
  • 00:36:15 want to have an paragraph where I will
  • 00:36:17 just have some dummy lorem ipsum text
  • 00:36:19 and if you not using any editor where
  • 00:36:23 you can quickly insert lorem ipsum like
  • 00:36:26 i do here by just hitting Laurent and
  • 00:36:28 hitting tab while you might insert any
  • 00:36:30 text you whatever you like the text is
  • 00:36:33 read the important thing here now let me
  • 00:36:35 save this and you should see down here
  • 00:36:38 you should see that your Gallup workflow
  • 00:36:42 is updating that he's starting to build
  • 00:36:45 ts process empty that he's successfully
  • 00:36:48 finishing it now let's have a look at
  • 00:36:51 our our our website and as you can see
  • 00:36:55 it got updated with our new this is a
  • 00:36:57 test and a dummy text now okay so we get
  • 00:37:02 our component and a set we have two
  • 00:37:04 selector which we then enter into an
  • 00:37:07 HTML file and angular 2 finds the
  • 00:37:09 selector and then replaces it with
  • 00:37:12 whatever we specify here in our template
  • 00:37:15 okay now where is this HTML file we're
  • 00:37:18 embedding it well it can only be one
  • 00:37:21 because
  • 00:37:22 when you have one HTML file and hold a
  • 00:37:24 folder here or in this whole project
  • 00:37:26 here and that's the index dot HTML file
  • 00:37:29 let's have a look at this one in the
  • 00:37:30 next video because we will have some
  • 00:37:33 basic configuration there and this
  • 00:37:35 mysterious buta TS file which will
  • 00:37:38 really get our application running see
  • 00:37:41 you in the next video bye
  • 00:37:48 back we are we changed our app component
  • 00:37:51 here but until now we don't really know
  • 00:37:54 how this whole thing gets loaded up in
  • 00:37:57 the first place right now let's have a
  • 00:38:00 look at our index dot HTML file we're
  • 00:38:03 now in our body section and here we can
  • 00:38:05 see our app tags so the app tags we're
  • 00:38:10 setting up here in the provider which is
  • 00:38:15 where we're actually seeing them here
  • 00:38:17 let me just zoom in so that is where our
  • 00:38:20 component gets embedded into our index
  • 00:38:23 dot HTML and now there are two important
  • 00:38:26 things here the first thing is this app
  • 00:38:29 component will be our route component
  • 00:38:32 and all our angular 2 applications will
  • 00:38:34 have one such a route component all
  • 00:38:37 other components will be some more
  • 00:38:40 nested either in the parent-child or in
  • 00:38:43 sibling connections within this app
  • 00:38:46 component so all our components will be
  • 00:38:49 a child to our app component and the
  • 00:38:52 components and amongst themselves they
  • 00:38:54 can be siblings too but we will only
  • 00:38:56 have one root level component here which
  • 00:38:58 you see app component so that's the
  • 00:39:01 first important thing that we have this
  • 00:39:04 hierarchy and that we have this root
  • 00:39:06 component the second thing is okay we're
  • 00:39:08 inserting it here and this will kind of
  • 00:39:13 yet you load it but we need to load our
  • 00:39:17 our JavaScript files to and where our
  • 00:39:21 application itself we need to load that
  • 00:39:24 too so that we're actually able to to
  • 00:39:27 insert something here and we're doing
  • 00:39:30 this in our boot yes file this file gets
  • 00:39:34 imported here app boot so if you rename
  • 00:39:38 this boot or TS to main dot G s you will
  • 00:39:40 have to change this to main and what it
  • 00:39:43 basically does is just the first file
  • 00:39:45 that gets executed otherwise no file
  • 00:39:48 would run work no JavaScript would be
  • 00:39:50 running at the beginning of our
  • 00:39:52 application when we first fire up index
  • 00:39:55 dot HTML now in this boot dot yes
  • 00:39:58 has to be something which gets our whole
  • 00:40:01 application going and we have to imports
  • 00:40:05 here the first one is the bootstrap
  • 00:40:07 method from our angular 2 module that's
  • 00:40:12 a core method this method will like name
  • 00:40:15 says bootstrap or application it will
  • 00:40:17 start our application
  • 00:40:18 the second import is our app component
  • 00:40:21 now here you can see we're importing app
  • 00:40:24 component from our app component file
  • 00:40:27 which is this file and here we're
  • 00:40:30 exporting this class we could not import
  • 00:40:33 it if you would not export it here and
  • 00:40:36 then we're just using this bootstrap
  • 00:40:39 method we're importing here and we're
  • 00:40:41 passing one argument which is our route
  • 00:40:44 component the component we want to
  • 00:40:47 bootstrap so to say the component with
  • 00:40:49 which you want to start up our
  • 00:40:51 application so we're passing a rap
  • 00:40:53 component as an argument and this will
  • 00:40:56 set up and start our application and
  • 00:40:58 we'll take care that we can see what
  • 00:41:01 we're actually seeing here next with you
  • 00:41:04 we will write our own app component see
  • 00:41:07 you there bye
  • 00:41:15 hey so I'm not back and we learned how
  • 00:41:18 to set up our route component how to
  • 00:41:20 bootstrap it how to get our application
  • 00:41:22 starting and we had a label look at our
  • 00:41:25 template in this video we're going to
  • 00:41:27 create our own component so let's do
  • 00:41:30 this I'll do it right here in my death
  • 00:41:33 folder as a set this will be where all
  • 00:41:35 our typescript code and all our
  • 00:41:37 components modules whatever we will
  • 00:41:39 create all that lifts in this step
  • 00:41:41 folder and it's self subfolders so let
  • 00:41:45 me create the my component component and
  • 00:41:50 now the naming convention convention of
  • 00:41:53 Earth files here is to name them first
  • 00:41:56 name of our component then a dot then
  • 00:41:59 component then just defy lending ts4
  • 00:42:04 typescript and this is now the basic
  • 00:42:09 file for my component now the first
  • 00:42:12 thing we need to do here let me zoom in
  • 00:42:13 to make this work is we need to import
  • 00:42:17 component from angular 2 from angular 2
  • 00:42:25 to core now this will as enable us to
  • 00:42:29 use that component decorator this
  • 00:42:32 metadata I showed you in the app
  • 00:42:34 component second thing is I will export
  • 00:42:38 I will create a class I will export it
  • 00:42:40 so that is it is available outside of
  • 00:42:42 this um of this module so I'll export a
  • 00:42:50 class here which I will name my
  • 00:42:54 component component and normally you
  • 00:42:58 shouldn't have that component component
  • 00:42:59 thing here so what you would have like a
  • 00:43:01 contact list component or a contact
  • 00:43:04 detail component let write just the
  • 00:43:06 component here happens to be called my
  • 00:43:09 component so this is the component class
  • 00:43:14 and I don't need to add anything there
  • 00:43:16 as of now the next thing I will add
  • 00:43:19 though is the decorator so that we can
  • 00:43:22 attach the metadata to
  • 00:43:25 component here so I will use at
  • 00:43:28 component then have parentheses and then
  • 00:43:32 square bracket a curly braces using
  • 00:43:35 curly braces inside the parentheses so
  • 00:43:38 we create an in Chaves script object in
  • 00:43:40 this in these parentheses here and now
  • 00:43:45 inside here we're doing all the
  • 00:43:47 configuration for our component now as I
  • 00:43:51 said we have a lot of options how we can
  • 00:43:55 what you can configure there right first
  • 00:43:58 thing is will create our selector so the
  • 00:44:01 HTML tag by which we can embed this
  • 00:44:03 component and this should also have
  • 00:44:06 reflects the name of our component so I
  • 00:44:09 would call it my component with a dash
  • 00:44:11 between the my component then we will
  • 00:44:14 have a template here and I will again
  • 00:44:17 use my backtick notation to have
  • 00:44:19 multiple lines available and I would
  • 00:44:23 just output this is my component for now
  • 00:44:26 and this is for the moment all for our
  • 00:44:33 own component as you can see it's pretty
  • 00:44:34 similar to our app component because
  • 00:44:36 yeah it is just an average component
  • 00:44:38 right now we use this component in our
  • 00:44:42 app component because as I said this is
  • 00:44:43 our route component and we only have one
  • 00:44:45 route component so all our components
  • 00:44:48 will have to somehow live in this app
  • 00:44:50 component so we're doing this here by
  • 00:44:53 just let me get rid of this paragraph
  • 00:44:55 here then I have the never heading here
  • 00:44:58 which says now comes the second
  • 00:45:02 component and below here I will use my
  • 00:45:07 yeah the selector I just created so I
  • 00:45:10 will enter my component here to insert
  • 00:45:14 my component now if we have a look at
  • 00:45:17 our web page we're not seeing the text I
  • 00:45:21 entered there remember I had this is my
  • 00:45:24 component well it's not showing up here
  • 00:45:28 so something is not working here well at
  • 00:45:32 the moment we're we're import you're
  • 00:45:35 inputting our component you
  • 00:45:37 we're embedding it into our HTML but
  • 00:45:40 just as with the index.html and the app
  • 00:45:44 tag here where we have to start it in
  • 00:45:48 our bootstrap file our app component
  • 00:45:51 does not know what my component should
  • 00:45:54 be we have to yeah kind of bootstrap it
  • 00:45:58 here we have to kind have to tell our
  • 00:46:00 app component how to embed something
  • 00:46:04 which has this tag we do this by adding
  • 00:46:07 another configuration here so we have
  • 00:46:09 selector we have template now comes
  • 00:46:12 another one which is very important this
  • 00:46:14 is called directives now directives
  • 00:46:17 takes an array and in this array we will
  • 00:46:20 list all directives and remember
  • 00:46:23 components are directives just that I
  • 00:46:25 have a few a template attached to them
  • 00:46:28 so in this area here we will define all
  • 00:46:32 non-default built-in directives and our
  • 00:46:36 components aren't built in into angle or
  • 00:46:38 two that we will need in this template
  • 00:46:41 or in this component for it to work
  • 00:46:43 correctly so in this case I will import
  • 00:46:46 my component component and now my IDE
  • 00:46:49 automatically added this import
  • 00:46:51 statement up here but make sure you do
  • 00:46:53 have yeah you do have this import
  • 00:46:55 segment too so you need to import my
  • 00:46:58 component component from my component
  • 00:47:01 dot component so from this file right
  • 00:47:04 you need to have this import statement
  • 00:47:06 for it to work now let me save this and
  • 00:47:08 now you can see we got this this is my
  • 00:47:11 component text now to make things a
  • 00:47:13 little bit easier easier I will just
  • 00:47:15 quickly rearrange this here so if we now
  • 00:47:19 get the side by side and I will keep
  • 00:47:21 this for all the other videos in this in
  • 00:47:23 this course now this is how we create
  • 00:47:26 our own component how we embed it and
  • 00:47:28 how we use it with the directives
  • 00:47:30 configuration now obviously outputting
  • 00:47:33 just static text is not that exciting
  • 00:47:37 and probably not what you will be doing
  • 00:47:38 in your applications therefore in the
  • 00:47:41 next video we will have a look at the
  • 00:47:43 various template expressions we can use
  • 00:47:46 in angular 2 to alter our template
  • 00:47:50 to insert data dynamically see you there
  • 00:47:54 but
  • 00:48:01 okay until now we have created our own
  • 00:48:04 component we have embedded ad we have
  • 00:48:07 set it up with the directives
  • 00:48:08 configuration so we get a little bit
  • 00:48:11 into how we use those components to
  • 00:48:13 create a wrap and I hope you can already
  • 00:48:16 think how we would have liked a header
  • 00:48:18 component in a main component and how we
  • 00:48:20 could compose our application by just
  • 00:48:23 embedding them with our HTML tags
  • 00:48:25 inserting them into our directives array
  • 00:48:28 and you're building up a wrap with these
  • 00:48:31 building blocks now as a promise we're
  • 00:48:34 now going to have a look at how we can
  • 00:48:36 actually output data or content in
  • 00:48:39 general by using our template
  • 00:48:41 expressions so certain expressions – –
  • 00:48:45 all through our DOM and we will do this
  • 00:48:50 in this video let's start by outputting
  • 00:48:54 some text let's say my my component
  • 00:48:59 component here I have a property called
  • 00:49:02 name which is one of my case max you
  • 00:49:05 might enter whatever your name is I want
  • 00:49:08 to output this name somewhere here so I
  • 00:49:10 want to say like um hi I'm and then I
  • 00:49:17 want with my name here now the subtext
  • 00:49:20 for this nailart you is to have double
  • 00:49:22 curly braces I'm name and this will
  • 00:49:28 refer this name here to this property so
  • 00:49:32 it has to be the same and these double
  • 00:49:35 curly braces tell angle at you to
  • 00:49:37 replace whatever is between them with
  • 00:49:42 the result of the expression it finds
  • 00:49:43 there so this could also be like a
  • 00:49:45 condition or a function like a
  • 00:49:49 calculation but in this case it's just
  • 00:49:52 referring to this property so it will
  • 00:49:53 output the value of this property now
  • 00:49:57 let me save this and you can see here I
  • 00:50:01 hi I am max so it is exactly what this
  • 00:50:05 expression here does this is how easy it
  • 00:50:08 is to output information or data in your
  • 00:50:11 angular
  • 00:50:12 – templates awesome right now let's
  • 00:50:16 expand the sentence a little bit by
  • 00:50:18 saying and this is my very first angular
  • 00:50:22 2 component it's so awesome
  • 00:50:32 let's say we want to give us a
  • 00:50:38 possibility to say if it's awesome or
  • 00:50:41 not and if we say hey it's awesome
  • 00:50:43 while we want to let's say highlight our
  • 00:50:45 name and give gift us it's awesome some
  • 00:50:49 different styling just to showcase how
  • 00:50:52 we can dynamically influence our Dom or
  • 00:50:55 our HTML here now to do this I'll first
  • 00:51:00 add a line break here suggest a br tag
  • 00:51:03 here and then I will have like number 1
  • 00:51:10 then I have the questioner is it awesome
  • 00:51:13 for our question mark and I will have an
  • 00:51:17 input element here of type text where I
  • 00:51:21 can then enter let's say yes and if I
  • 00:51:24 enter yes I want to do this special
  • 00:51:26 highlighting and if I enter anything
  • 00:51:28 else well then nothing will happen now
  • 00:51:32 to add to make this happen
  • 00:51:34 first I will attach some styling to my
  • 00:51:39 template here that I have some special
  • 00:51:42 classes I can attach and detach – yeah
  • 00:51:45 to my document depending on whether I
  • 00:51:48 said it's awesome or not so we will add
  • 00:51:51 a new decorator here we're a new
  • 00:51:54 metadata that's more correct which is
  • 00:51:58 called style URLs and this takes an
  • 00:52:02 array of paths leading to different CSS
  • 00:52:06 files
  • 00:52:07 now this can only be one but we could
  • 00:52:08 specify 5 or 10 or 100 if you would like
  • 00:52:11 so oh don't forget to come here the
  • 00:52:15 other way of doing this would just be to
  • 00:52:17 use styles this would also take an area
  • 00:52:20 but in this area we would have strings
  • 00:52:22 with the
  • 00:52:24 hunted of the stylesheet in the string
  • 00:52:25 so it's the same with template we could
  • 00:52:28 have damp template or template URL but
  • 00:52:31 only singular because there is only one
  • 00:52:33 template where one template HTML file
  • 00:52:35 and here we have styles or style URLs so
  • 00:52:39 plural because you can have multiple
  • 00:52:41 styles or style sheets now I'll leave us
  • 00:52:44 an external sheet here
  • 00:52:46 so I'll have style URLs and I will live
  • 00:52:49 in my source folder under CSS and I will
  • 00:52:54 call this my component dot CSS now this
  • 00:53:00 file doesn't exist yet so let me create
  • 00:53:02 it here and I'm using s CSS so I'm
  • 00:53:06 creating and creating an SCSS 5 year but
  • 00:53:08 if you want to use plain old CSS you
  • 00:53:11 just do in the source folder and you
  • 00:53:13 create this file by your own or on your
  • 00:53:16 own and just enter the CSS coding you
  • 00:53:19 need there right so let's say for for
  • 00:53:24 this thing here I want I want to be able
  • 00:53:30 to add a class which is called s awesome
  • 00:53:33 I don't seem to be able to type today
  • 00:53:37 it's awesome and this will have a font
  • 00:53:41 weight of bolt it will be a bold text
  • 00:53:44 and I will give it a red color so that's
  • 00:53:47 all I'm doing here just saving this and
  • 00:53:52 now back in my component here I want you
  • 00:53:55 yes I said conditionally attach and
  • 00:53:57 detach this class so let's say I want to
  • 00:54:01 format that it's so awesome part of my
  • 00:54:05 text and give it this is awesome class
  • 00:54:08 well if we enter yes into this input
  • 00:54:10 field therefore I will wrap it into a
  • 00:54:13 span element so that I can give it some
  • 00:54:16 formatting I'm not doing anything here
  • 00:54:20 yet first I will go to my input element
  • 00:54:23 and I will add a hash tag input element
  • 00:54:28 now this text is totally up to me I
  • 00:54:31 could name it whatever I like but this
  • 00:54:34 hash tag creates a local variable so
  • 00:54:37 this is a not
  • 00:54:37 angular2 template expression so as
  • 00:54:41 syntax you can use in our angular 2
  • 00:54:43 templates and then what you will find
  • 00:54:46 this hashtag and we'll know that the
  • 00:54:49 text after this hashtag will be the name
  • 00:54:51 of our local variable and this local
  • 00:54:54 variable will be bound to the element
  • 00:54:56 where angular 2 finds it so we can only
  • 00:55:00 use it within our HTML tags so within
  • 00:55:03 the greater and lesser signs here and
  • 00:55:05 then it is bound to the complete element
  • 00:55:08 so not only to the value of this input
  • 00:55:10 here not only to whatever we enter that
  • 00:55:13 to the element as it's in its hole
  • 00:55:16 right so with this local variable we
  • 00:55:20 will have a possibility to it access
  • 00:55:22 this input field and I will do it now
  • 00:55:27 here in my spam by gear conditionally
  • 00:55:31 attaching this class vendors a way when
  • 00:55:35 this input field here holds a value of
  • 00:55:38 yes now I'll use a built in angular 2
  • 00:55:41 directive which is called class and then
  • 00:55:46 we have a dot followed by the name of
  • 00:55:49 the class we want to attach so it's orb
  • 00:55:51 is awesome class and then close all the
  • 00:55:56 square brackets and then we have an
  • 00:55:58 equal sign and quotation marks and
  • 00:56:00 between those quotation marks we will
  • 00:56:03 have the expression which will be
  • 00:56:06 evaluated and which will decide whether
  • 00:56:09 this class will be attached or not so
  • 00:56:12 what this class directive does is we
  • 00:56:15 started by just telling English who
  • 00:56:17 would want to use the class directive
  • 00:56:19 then we're using this is awesome class
  • 00:56:23 here as well to be to be attach or
  • 00:56:26 detach class and then in the expression
  • 00:56:29 here you have between equal to a
  • 00:56:31 shemites with telling or two well when
  • 00:56:33 should you attach it and when should you
  • 00:56:35 not do that now that's a special
  • 00:56:38 directive here this class directive and
  • 00:56:41 will also show you another special
  • 00:56:42 directive in a second
  • 00:56:43 generally angular two directives don't
  • 00:56:46 have this configuration where you will
  • 00:56:49 first have the name of the direct
  • 00:56:51 and then like for example here the class
  • 00:56:53 name a normal directive which just be
  • 00:56:55 square brackets like like just directive
  • 00:56:58 right without any dot something right so
  • 00:57:01 we will see this and in this course we
  • 00:57:04 will cover a lot of directives obviously
  • 00:57:07 so in this case we're using the special
  • 00:57:10 class directive which makes it really
  • 00:57:11 easy to attach and detach classes and
  • 00:57:14 this expression will be check the input
  • 00:57:17 element so does this the local variable
  • 00:57:20 we created here check its value so dot
  • 00:57:24 value we access the value of our input
  • 00:57:26 field and check if it is equal to yes
  • 00:57:30 and if it is yet so if this returns true
  • 00:57:33 if input element value equals yes this
  • 00:57:36 will return true then this awesome class
  • 00:57:39 will be attached so let me save this and
  • 00:57:43 now if I enter something here nothing is
  • 00:57:46 changing why is that well that is
  • 00:57:49 because it would be changing but our UI
  • 00:57:52 isn't updated our UI only updates if
  • 00:57:56 certain events or if events are
  • 00:57:59 happening so I will add an event to my
  • 00:58:02 input element here welcome to add events
  • 00:58:07 and data binding in general in a
  • 00:58:09 separate section in the next section so
  • 00:58:11 I'm not going to go into detail but in
  • 00:58:13 general an event is added by using
  • 00:58:15 parentheses and between the parentheses
  • 00:58:17 I add the name of the event and there
  • 00:58:20 are a couple of built-in events so all
  • 00:58:22 the default events like key up and then
  • 00:58:26 we have again equal sign and quotation
  • 00:58:29 marks and then between the quotation
  • 00:58:31 marks the code which will be executed
  • 00:58:33 when this event fires now we don't
  • 00:58:37 really want to execute anything we just
  • 00:58:38 want to catch this event so that UI
  • 00:58:41 updates so I will just enter a 0 here so
  • 00:58:44 that nothing happens but the UI will be
  • 00:58:47 updated and if I now enter yes here you
  • 00:58:50 see it got red and bold and if I write
  • 00:58:55 anything else
  • 00:58:56 well nothing changes so isn't that cool
  • 00:58:59 that is how you can attach a class to
  • 00:59:03 your document
  • 00:59:04 through angular2 to to a certain part of
  • 00:59:07 your document that is how easy that is
  • 00:59:09 now in the next video we will have we'll
  • 00:59:11 have a look at additional ways of
  • 00:59:14 manipulating our HTML document our dawn
  • 00:59:17 see you there bye
  • 00:59:24 Hey so in the last video we had a look
  • 00:59:26 at how we could conditionally attach CSS
  • 00:59:29 classes we also learned how we can
  • 00:59:32 import style sheets into our into
  • 00:59:34 specific components with this
  • 00:59:36 configuration with this metadata here
  • 00:59:38 so now let's mess a little bit more with
  • 00:59:41 our Dom here let's say we want to add a
  • 00:59:45 button which is only enabled if we yeah
  • 00:59:47 again have entered yes into our input
  • 00:59:50 field so I will add this button here let
  • 00:59:54 me just enter several line breaks
  • 00:59:55 that'll have my button only and abled if
  • 00:59:59 yes was entered so let's save this and
  • 01:00:04 at the moment obviously it's always
  • 01:00:06 enabled now I will use another directive
  • 01:00:11 here a so called attribute eye directive
  • 01:00:13 which is just a default directive with
  • 01:00:15 square brackets so we have this yet
  • 01:00:19 default that that's a standard that's
  • 01:00:20 the most default way a directive can get
  • 01:00:23 square brackets and then the name of the
  • 01:00:25 directive within those square brackets
  • 01:00:27 so this disabled thing here is not bound
  • 01:00:31 to the disabled HTML attribute of our
  • 01:00:35 button but it's an angular 2 built-in
  • 01:00:37 directive so just an instruction like
  • 01:00:41 every directive which tells angular 2
  • 01:00:44 hey I have to disable this button if and
  • 01:00:47 now here again this expression between
  • 01:00:50 the quotation marks returns true this is
  • 01:00:53 generally how all directives work you
  • 01:00:56 have the directive name here then it
  • 01:00:59 differs if you have to use square
  • 01:01:01 brackets or parentheses for events you
  • 01:01:04 have parentheses and for property
  • 01:01:08 binding for attribute directives so
  • 01:01:10 directives where you don't get an event
  • 01:01:13 went but change the element you have
  • 01:01:17 square brackets and this is how you can
  • 01:01:19 memorize this if you have square
  • 01:01:21 brackets then you're doing something to
  • 01:01:24 the element you're changing the look of
  • 01:01:26 it you're passing some value into it
  • 01:01:28 whatever you're changing the element if
  • 01:01:31 you have parentheses then you're talking
  • 01:01:35 about events we're getting some
  • 01:01:37 from that element we're catching some
  • 01:01:39 action were listening to an event from
  • 01:01:41 that element we're not changing it we're
  • 01:01:44 getting something from it that's very
  • 01:01:46 important
  • 01:01:47 square brackets putting something into
  • 01:01:49 an element parentheses getting something
  • 01:01:52 out of that element very very important
  • 01:01:54 that is how data binding works in
  • 01:01:56 angular 2 now here I got my disabled
  • 01:02:00 directive and the expression I want to
  • 01:02:02 check it again if input top value equals
  • 01:02:06 yes or if it is not equal to yes then I
  • 01:02:11 want to disable this right so let me
  • 01:02:14 save this and obviously this should be
  • 01:02:16 input element so let me save it again
  • 01:02:19 now you can see it is disabled now if I
  • 01:02:22 enter anything well it's not changing
  • 01:02:23 but if I enter yes maybe it was a little
  • 01:02:28 bit hard to see but I can now click it
  • 01:02:29 whereas if nothing is entered I can't
  • 01:02:32 click it so this is how we could enable
  • 01:02:35 a disabled button depending on the state
  • 01:02:38 of another element in our Dom now let's
  • 01:02:42 say we want to change the color of our
  • 01:02:45 name depending on if we entered yes or
  • 01:02:48 not we could again use this and attach
  • 01:02:51 this awesome class but I don't want to
  • 01:02:53 make bold obviously I could create a new
  • 01:02:56 class but we have a number shortcut
  • 01:02:58 directive light like this class
  • 01:03:00 directive here where we can directly
  • 01:03:02 apply a certain style so I will again
  • 01:03:06 wrap this into a span element here and
  • 01:03:09 then I will use this style directive
  • 01:03:13 here and ask the class directive it's
  • 01:03:15 not kind of classic directive not a
  • 01:03:18 default attribute directive which has
  • 01:03:20 this attribute styles where it name
  • 01:03:23 comes from but instead we access the
  • 01:03:27 style here again for dot and we want to
  • 01:03:29 set the color so here we set all them
  • 01:03:31 can set all the CSS properties or all
  • 01:03:36 the styles how we can edit them of CSS
  • 01:03:39 important thing here if we have a CSS
  • 01:03:41 element where which would have a – like
  • 01:03:45 background – color well then we would
  • 01:03:48 have a camel case so we would have
  • 01:03:50 background color with no – no space
  • 01:03:54 between just with a capital B so
  • 01:03:57 background capital C background that
  • 01:04:01 color capital C so this is how you would
  • 01:04:03 rename those CSS properties here but the
  • 01:04:07 general here it should be easy to figure
  • 01:04:09 out you are just setting the color and
  • 01:04:11 now in this expression well I could just
  • 01:04:13 write red in single quotation marks
  • 01:04:18 because this has to be a string and now
  • 01:04:20 it is red now I want to check if I
  • 01:04:23 entered yes so I will add input element
  • 01:04:28 value equals yes also in single
  • 01:04:33 quotation marks well then it should be
  • 01:04:36 red otherwise nothing so this is a like
  • 01:04:39 a simple tertiary operator here where we
  • 01:04:42 have this one line conditional check and
  • 01:04:46 now we can see it is not red by default
  • 01:04:47 but if I enter yes it gets red so we get
  • 01:04:53 this style directive here to quickly
  • 01:04:55 change the style of a certain part of
  • 01:04:58 our Dom we got this class directive here
  • 01:05:00 to quickly attach or detach a class to a
  • 01:05:03 certain part of our Dom we got this
  • 01:05:06 attribute directive here where we do
  • 01:05:09 pass something into our button here
  • 01:05:12 where we say you should ever be disabled
  • 01:05:15 or enabled depending on whatever is
  • 01:05:17 entered into this input element and this
  • 01:05:20 is how we play with our Dom how we pass
  • 01:05:23 data how we change it depending on what
  • 01:05:28 the user does on the state of our
  • 01:05:29 application and this is what we call
  • 01:05:33 data binding where how we yeah basically
  • 01:05:36 use our data to change the DOM and
  • 01:05:40 obviously we will have a lot deeper look
  • 01:05:43 throughout this course but that is
  • 01:05:45 really the core of it and as you can see
  • 01:05:48 it is not that difficult to get it just
  • 01:05:51 requires some exercise and we will do a
  • 01:05:54 lot of exercise throughout this course
  • 01:05:55 see in the next videos bye
  • 01:06:03 so we already covered a lot of about
  • 01:06:05 components and it's almost time to have
  • 01:06:09 our first little project using all that
  • 01:06:11 knowledge to build a little application
  • 01:06:13 first there's another thing I want to
  • 01:06:17 show to you or to other things the first
  • 01:06:20 thing is we're already nesting a
  • 01:06:23 component here we're nesting this my
  • 01:06:26 component component into a route
  • 01:06:28 component the app component now let's
  • 01:06:30 create another component Ted test cover
  • 01:06:35 just test component test dot component
  • 01:06:40 dot TS and I will again export a class
  • 01:06:45 called test component and I will let me
  • 01:06:52 zoom in a little bit I will add my
  • 01:06:54 import so I'll import my component from
  • 01:07:01 angular 2 core angular 2 it should be
  • 01:07:06 and I will add my decorator
  • 01:07:09 so again component pass JavaScript
  • 01:07:13 object for select tour of test and a
  • 01:07:19 template off well here I'm going to use
  • 01:07:23 an external template HTML file so that
  • 01:07:26 you can see how we do that so I will
  • 01:07:29 have a template URL here and I want to
  • 01:07:32 lead this to I will create a new folder
  • 01:07:35 for that to a call templates and then
  • 01:07:39 let's just say test dot TPL dot HTML
  • 01:07:42 that's just a way I will name it I would
  • 01:07:46 create that folder now here directory
  • 01:07:49 will be templates so it's on the root
  • 01:07:55 level and then I will have name of test
  • 01:08:01 GPL HTML and here I will just have an h1
  • 01:08:04 tag this is my second component
  • 01:08:12 with an external HTML file so that's
  • 01:08:17 that and now this test component I will
  • 01:08:23 embed here at the bottom of my of my
  • 01:08:27 other component of my component by using
  • 01:08:32 tests and I will have to add my
  • 01:08:36 directives metadata here so an area
  • 01:08:39 where I then import test component
  • 01:08:42 otherwise you would not be able to use
  • 01:08:44 it
  • 01:08:44 let me save – so you can already see
  • 01:08:46 there with an external HTML file my
  • 01:08:49 second component so this is how we use
  • 01:08:51 external HTML files instead of writing
  • 01:08:54 all our template like this in our
  • 01:08:56 typescript file we can use an external
  • 01:09:00 file here now that's one thing the other
  • 01:09:06 thing is back to near my component here
  • 01:09:08 I'm here setting my name to max and
  • 01:09:11 besides the fact that I probably want to
  • 01:09:14 get it dynamically in a real app or I
  • 01:09:16 want to be able to input it in an input
  • 01:09:18 field I Yahoo can do it like this that
  • 01:09:21 we set up a default value but let's try
  • 01:09:24 a different way of setting up a name
  • 01:09:27 when the component starts but not
  • 01:09:30 setting it up here so I will just delete
  • 01:09:33 the value and just say that this should
  • 01:09:36 be a string so this is types typescript
  • 01:09:38 here that I'm setting this to type
  • 01:09:40 string so it's not initialized yet it's
  • 01:09:43 just I declared this property but it has
  • 01:09:47 no value as of now now I could use my
  • 01:09:51 constructor to like say this dot name
  • 01:09:56 equals max and if I save this you can
  • 01:10:00 see it still display max so this would
  • 01:10:02 work but I don't want to use my
  • 01:10:04 constructor this has several reasons in
  • 01:10:06 it that's just not the best style
  • 01:10:09 because yet would work for this but
  • 01:10:11 let's imagine we would have an operation
  • 01:10:14 which might take a little bit longer
  • 01:10:15 than this would keep our whole component
  • 01:10:19 from low
  • 01:10:20 just because we're waiting for this
  • 01:10:22 property to be set so I will use one of
  • 01:10:26 the lifecycle hooks Engla to provides
  • 01:10:29 four components these lifecycle hooks
  • 01:10:33 are certain events which are fired
  • 01:10:36 throughout life cycle four components so
  • 01:10:38 whenever angle two creates a component
  • 01:10:40 and it does this for this my component
  • 01:10:44 because well we tell it here we need
  • 01:10:46 this my component please create it we're
  • 01:10:48 embedding it here so when it creates
  • 01:10:50 this it's entering certain phases and
  • 01:10:53 during each phase it gives us the
  • 01:10:56 opportunity to do something so I'm
  • 01:10:59 interested in the on init hook which is
  • 01:11:01 fired when well the component is ready
  • 01:11:04 to load and is initialized so I will
  • 01:11:07 implement this this is an interface on
  • 01:11:10 in it and make sure you import it import
  • 01:11:15 on init from angular to core that's as I
  • 01:11:17 said the interface which needs to be
  • 01:11:19 imported now I got an arrow here because
  • 01:11:21 I'm not implementing the method this
  • 01:11:25 interface requires me to implement now
  • 01:11:28 if you're not sure what interfaces are
  • 01:11:30 it's generally a contract our class
  • 01:11:33 which implements it has signed so it
  • 01:11:36 MSAs okay this interface requires a blue
  • 01:11:40 claw every class which implements it to
  • 01:11:42 Street to have certain methods or
  • 01:11:45 properties and those contracts those
  • 01:11:48 interfaces are therefore used to make
  • 01:11:52 sure that well for example certain
  • 01:11:54 classes can interact because they now
  • 01:11:56 hate this class implements this contract
  • 01:11:58 I can safely call this method in this
  • 01:12:01 class because it has to have it because
  • 01:12:04 this interface requires is it to have it
  • 01:12:07 so that's the same thing here we're
  • 01:12:09 implementing on in it and then angular 2
  • 01:12:12 knows well I can't execute the on init
  • 01:12:15 method in this component when this
  • 01:12:17 lifecycle hook is reached or this phase
  • 01:12:21 in the life cycle is reached because
  • 01:12:23 this interface which I'm implementing
  • 01:12:25 here requires me to have the respective
  • 01:12:29 method implemented so in this case
  • 01:12:32 that's the on
  • 01:12:34 in it the ng on innard method this will
  • 01:12:37 be called when this component is
  • 01:12:39 initialized now there are other
  • 01:12:42 lifecycle phases which we're not
  • 01:12:44 implementing and therefore angular no.2
  • 01:12:47 will not try to call the respective
  • 01:12:49 methods in our component because it
  • 01:12:52 can't be sure that we're implementing
  • 01:12:54 those methods so now this ng on in it
  • 01:12:59 will be called when our component is
  • 01:13:02 initialized and here is the place where
  • 01:13:05 I will then set my name to mags and let
  • 01:13:08 me save this and again we see nothing
  • 01:13:10 changes which means it still works and
  • 01:13:12 now we're setting the value of property
  • 01:13:16 in this place and those lifecycle hooks
  • 01:13:19 will be something we will use throughout
  • 01:13:22 this course and you will use all those
  • 01:13:25 hooks in your applications and there are
  • 01:13:28 more hooks than chassis on init hook but
  • 01:13:31 I have attached to this course a
  • 01:13:34 document which shows you all the hooks
  • 01:13:36 you can use and when they are kind of
  • 01:13:39 fired by Inglot you now this is it for
  • 01:13:43 the basics for about components how we
  • 01:13:47 insert data how we use our template
  • 01:13:49 expression expressions how will you stay
  • 01:13:52 the binding and oh yeah we really really
  • 01:13:55 really covered a lot here and I think
  • 01:13:57 it's now finally time to have our first
  • 01:14:00 lip project to to take what we learned
  • 01:14:02 and put it into action
  • 01:14:04 see you there bye
  • 01:14:14 you