Coding

Angular 2 & NodeJS (MEAN 2.0) Tutorial for Beginners – Getting Started

  • 00:00:00 hi everyone on my channel you find quite
  • 00:00:04 a lot of material on angular 2 which I
  • 00:00:06 by the way we'll also update in the
  • 00:00:08 future one singlet you is stable and out
  • 00:00:11 and so on and on no chairs now you might
  • 00:00:15 know that angular 1 and no Chi as was a
  • 00:00:19 quite popular combination and the same
  • 00:00:22 is true for English you are no chairs it
  • 00:00:24 works together very well and I thought
  • 00:00:27 why not make a video where I show the
  • 00:00:30 basics of how to connect angular 2 with
  • 00:00:34 no chairs and give you the tools to
  • 00:00:37 create applications based on that now
  • 00:00:41 little South advertisement right at the
  • 00:00:44 beginning but also might be very helpful
  • 00:00:46 to you if you want to dive really deep
  • 00:00:48 into that you might want to check out my
  • 00:00:51 angle or to an air chess course over on
  • 00:00:53 udemy and you'll find a link in the
  • 00:00:54 description and also if available Sam
  • 00:00:57 discounts to get it cheaper than the
  • 00:01:00 default price as you can see it's pretty
  • 00:01:02 well right and in this course you will
  • 00:01:05 learn how to bolt angular 2 plus no
  • 00:01:08 chess application how to implement
  • 00:01:11 authentication how to create data on the
  • 00:01:14 servers store it fetch had manipulated
  • 00:01:15 deleted how to manage the state in your
  • 00:01:19 angular 2 application also how to handle
  • 00:01:21 errors in the end you'll even learn how
  • 00:01:24 to deploy to Heroku or AWS so really a
  • 00:01:28 big package and obviously I can't really
  • 00:01:30 do that here in one single video or in
  • 00:01:33 this serious since this requires a lot
  • 00:01:35 of work and is really really in-depth
  • 00:01:38 but what I can do and what I want to do
  • 00:01:40 is well show you the basics how do you
  • 00:01:43 connect both ends and how do you get
  • 00:01:45 them to interact so therefore I am in a
  • 00:01:48 brand new workspace and now that's not
  • 00:01:51 helpful to you because you don't have
  • 00:01:53 this project right do you well you can
  • 00:01:55 get it on my github account and you'll
  • 00:01:57 find a link to this in the description
  • 00:01:58 too there I have a repository angle to
  • 00:02:02 know chess where you can switch to the
  • 00:02:04 branch seed project and then just clone
  • 00:02:08 it or download it as a zip file and
  • 00:02:10 extract it and this
  • 00:02:11 exactly the project I have currently
  • 00:02:13 opened
  • 00:02:22 you
  • 00:02:26 now what is this project well I'm not
  • 00:02:30 going to go super deep through all the
  • 00:02:32 files and folders but to give you an
  • 00:02:34 overview the assets folder here will
  • 00:02:37 basically hold my angular 2 application
  • 00:02:38 in its typescript form so I'm compiled
  • 00:02:41 so here in the app folder this is where
  • 00:02:44 I will write my code then indepent
  • 00:02:46 falter that's on the back end that will
  • 00:02:49 be my note chess server running and I
  • 00:02:53 created all the notes yes Express I'm
  • 00:02:55 using Express back-end using Express
  • 00:02:58 generator so if you watched my notes yes
  • 00:03:01 basic serious
  • 00:03:02 you saw how this works and there's a
  • 00:03:05 world structure might not be too
  • 00:03:06 unfamiliar to you so this was basically
  • 00:03:09 created with Express generator this is
  • 00:03:11 the server generated by it then I have
  • 00:03:14 my routes folder with the app chess fall
  • 00:03:16 holding my wealth routes currently only
  • 00:03:18 one rendering my index view and then
  • 00:03:21 this is the view in the index in the
  • 00:03:24 views folder and then I have my app
  • 00:03:26 chess file which is basically my well
  • 00:03:29 application the application running or
  • 00:03:32 the main file on my back and handling
  • 00:03:35 all the requests so my server in the www
  • 00:03:39 file basically loads this app file sends
  • 00:03:42 all requests into this app file in this
  • 00:03:45 application and here note and Express
  • 00:03:48 handles it applies a couple of middle of
  • 00:03:50 wares and so on one important beware is
  • 00:03:53 this one here which is required if your
  • 00:03:55 unlike in this project hosting your
  • 00:03:58 back-end on a different server than your
  • 00:04:01 front-end now here in this project both
  • 00:04:03 will be sent from the same server so
  • 00:04:05 this middleware mirror so the smilla
  • 00:04:07 where here would not be necessary but
  • 00:04:10 this basically allows you to do this if
  • 00:04:12 you were having two different servers
  • 00:04:13 what do I mean with both coming from the
  • 00:04:16 same server angular2 runs in a browser
  • 00:04:18 right yes it runs in a browser but it
  • 00:04:21 has to be served from some server in the
  • 00:04:23 beginning right it's a single page
  • 00:04:25 application but this single page is
  • 00:04:26 needed to and this single page you get
  • 00:04:29 is this next on HP s file this is just
  • 00:04:33 normal quite HTML code and here my app
  • 00:04:36 gets loaded and you saw a man or two
  • 00:04:38 videos how that works
  • 00:04:39 and I'm using system chess – I'll start
  • 00:04:42 my Apple load all the dependencies in my
  • 00:04:46 public folder in the JavaScript folder
  • 00:04:48 here the compiled angular 2 files live
  • 00:04:52 so the typescript code in the assets
  • 00:04:54 folder in the app folder here will get
  • 00:04:57 compiled into the JavaScript app folder
  • 00:04:59 which is then loaded once my application
  • 00:05:01 runs and the vendor folder here
  • 00:05:05 that's a folder automatically generated
  • 00:05:07 by gulp which is configured in the gulp
  • 00:05:09 file which basically copies all the
  • 00:05:11 angular 2 specific dependencies from my
  • 00:05:14 node modules folder into this vendor
  • 00:05:16 folder so that I have access to that on
  • 00:05:19 my front end as well because of course I
  • 00:05:21 need them on my front end in my client
  • 00:05:23 and not on the server where this node
  • 00:05:25 modules folder would lie so let's take
  • 00:05:27 quick overview over this folder
  • 00:05:30 structure and lift that I'd say why
  • 00:05:32 don't we get started right away let's
  • 00:05:34 see what we're currently got so I will
  • 00:05:38 start my app and PM start will run my
  • 00:05:41 server and I also need to compile my
  • 00:05:44 application for this I run npm run gulp
  • 00:05:47 these are all scripts set up in the
  • 00:05:49 package that json file which you might
  • 00:05:51 check out here so with that I got gulp
  • 00:05:54 running which will keep running and
  • 00:05:56 watch my files and recompile them
  • 00:05:57 whenever needed and I got my server
  • 00:06:00 running so with that if Y well let's
  • 00:06:03 reload here we see hello world test
  • 00:06:06 that's the basic application with which
  • 00:06:08 we start here based in the C project I
  • 00:06:11 let the closed two steps and I'll both
  • 00:06:14 on that and what I wanna bolt is a tiny
  • 00:06:18 little application where you're able to
  • 00:06:20 create random messages and basically see
  • 00:06:23 them in a list here doesn't sound too
  • 00:06:25 amazing but actually does a lot shows
  • 00:06:29 you how to connect back-end and
  • 00:06:31 front-end and enough to talking let's
  • 00:06:34 start so back in my workspace in
  • 00:06:37 webstorm here which is the ID I'm using
  • 00:06:40 I'll start working on my front end first
  • 00:06:44 so that we have something to to see
  • 00:06:47 right so in this app template file I of
  • 00:06:51 course don't want to display hello world
  • 00:06:53 instead notice I'm also importing
  • 00:06:56 bootstrap so some styling in the index
  • 00:06:58 file instead I want to create the well
  • 00:07:02 the classes or the HTML code for the
  • 00:07:07 list of messages I want to display so
  • 00:07:10 for this I'll use a container element it
  • 00:07:12 is just a bootstrap class of course with
  • 00:07:14 a row inside of it and then just a
  • 00:07:17 column to give this some nice basic
  • 00:07:19 styling here so that's all bootstrap
  • 00:07:21 classes here and then what I want to
  • 00:07:25 have here is I want to have a button
  • 00:07:26 which allows me to create and you ran
  • 00:07:29 the message like this new random message
  • 00:07:32 and of course this partner should
  • 00:07:34 receive some bootstrap classes as well
  • 00:07:36 so I'll give this to the classes button
  • 00:07:39 and button primary next I'm going to
  • 00:07:42 copy all of that code and your
  • 00:07:47 duplicated because in here I will use
  • 00:07:51 the general skeleton with the bootstrap
  • 00:07:53 classes but then I want to create an
  • 00:07:55 article element which all give the
  • 00:07:58 bootstrap classes panel and panel
  • 00:08:00 default just to give to some nice look
  • 00:08:03 to and you'll later on see how this
  • 00:08:05 looks of course and then here I will
  • 00:08:08 create a div where the panel body 0 this
  • 00:08:11 will just be my messages and here I want
  • 00:08:14 to output my message content of course
  • 00:08:16 here I'm referring to a variable I have
  • 00:08:20 created yet or a property in my
  • 00:08:22 component but I'll come back to that
  • 00:08:24 soon also of course in my article I want
  • 00:08:29 to have multiple articles multiple
  • 00:08:31 messages so for this I'll create the
  • 00:08:34 energy for loop here and I'll loop
  • 00:08:37 through all my messages so with that
  • 00:08:39 message of Massachusetts again messages
  • 00:08:42 doesn't exist yet now message in here at
  • 00:08:45 least does existed this message and
  • 00:08:47 create in here with the ng for loop but
  • 00:08:50 messages would refer to a property in my
  • 00:08:53 component class body and that doesn't
  • 00:08:55 exist yet so there's something I need to
  • 00:08:58 do there also on my button up here I
  • 00:09:01 want to add a click event and I want to
  • 00:09:05 Gyan ad message method whenever someone
  • 00:09:08 clicks this button so that's my HTML
  • 00:09:11 code and actually you can have a look at
  • 00:09:14 this if I reload my page you see okay
  • 00:09:17 this is my button right now nothing will
  • 00:09:19 happen I would indeed get an error if
  • 00:09:21 you open up the console if I click this
  • 00:09:22 but yeah that's my application right now
  • 00:09:25 not too amazing but we'll get there
  • 00:09:28 I should probably start by adding this
  • 00:09:30 messages property so I'll do this in my
  • 00:09:33 app component I want to create a
  • 00:09:36 messages property but which type should
  • 00:09:39 that have well probably my own type I
  • 00:09:42 think it makes sense to create my own
  • 00:09:44 message class which I can use so I'll do
  • 00:09:48 that then I'll create a new file in my
  • 00:09:51 app folder which I will name message dot
  • 00:09:54 model dot TS and that's just naming
  • 00:09:57 conventions that I describe what will
  • 00:09:59 live inside this file here I'm just
  • 00:10:01 setting up a basic model for the data
  • 00:10:03 I'll be using throughout my app and here
  • 00:10:06 all I want to do is I want to export a
  • 00:10:08 class which I will name message and this
  • 00:10:11 class will have a constructor and here
  • 00:10:13 I'm using a shortcut in typescript I'm
  • 00:10:16 both setting up my constructor with the
  • 00:10:20 arguments it needs as well as the
  • 00:10:22 properties of this class here in one
  • 00:10:25 step by adding the public keyword in
  • 00:10:27 front of the name of this argument here
  • 00:10:30 I'm automatically also creating a class
  • 00:10:33 property named content in this case so I
  • 00:10:36 will have access to this property later
  • 00:10:38 on and this should be of type string and
  • 00:10:40 that's really also not really
  • 00:10:43 complicated model by any means but it
  • 00:10:45 will be the model I'll use froths
  • 00:10:47 video and with that I can make my
  • 00:10:51 messages here an array of messages like
  • 00:10:55 so and I want to make it an empty array
  • 00:10:58 at the beginning now of course I need to
  • 00:11:00 import my message and I'm doing this
  • 00:11:03 here at the top by importing message
  • 00:11:05 from dot slash message dot model without
  • 00:11:08 the file extension that's important when
  • 00:11:10 using imports and typescript here we
  • 00:11:12 don't specify the file extension now if
  • 00:11:14 that we're almost able to see some
  • 00:11:17 in our HTML page or on our real
  • 00:11:21 application running here so let's work
  • 00:11:23 on that for now I'll simply create a
  • 00:11:26 dummy message here where I'll just write
  • 00:11:28 hello as the content and with that if I
  • 00:11:32 reload my page you see this message now
  • 00:11:35 that doesn't look too nice maybe it
  • 00:11:38 doesn't hurt to enter a horizontal line
  • 00:11:40 here between the button and the messages
  • 00:11:43 yeah looks much better and later on
  • 00:11:46 we'll be able to add random messages by
  • 00:11:48 clicking this button and it should
  • 00:11:49 appear here and of course they should
  • 00:11:51 not only appear here they should also be
  • 00:11:53 stored on the server and fetched from
  • 00:11:55 the server that's a part we haven't
  • 00:11:57 touched on yet but I'll come to that
  • 00:11:59 no worries before I actually start
  • 00:12:02 adding my server-side code I'll first
  • 00:12:04 implement just add semi-colons should be
  • 00:12:07 there I'll first implement my on add
  • 00:12:10 messages on add message method that's
  • 00:12:13 the method I'm calling with this click
  • 00:12:16 handler here on add message so here in
  • 00:12:20 this on add message method I want to
  • 00:12:25 generate a random number between 0 1 and
  • 00:12:29 100 and I can do this by using the
  • 00:12:31 math.random method but this gives me a
  • 00:12:35 number between 0 & 1
  • 00:12:37 and a floating point number 2 & 1 would
  • 00:12:40 be excluded so a lot of things I don't
  • 00:12:42 want so the first step is to multiplied
  • 00:12:45 with 100 so now at least I'm getting
  • 00:12:46 numbers between 1 and 99.99999 almost
  • 00:12:52 there
  • 00:12:53 but I still only want non floating point
  • 00:12:56 numbers so integers for that I'll use
  • 00:12:59 the math.floor function which will
  • 00:13:05 basically always round down the number
  • 00:13:07 so it would give me 0 to 99 and then I
  • 00:13:13 just add +1 to get numbers from 1 to 100
  • 00:13:18 and of course an even quicker way to
  • 00:13:21 write us would be to use my seal here
  • 00:13:24 which will just round it up so then I
  • 00:13:26 get 1 to 100 as
  • 00:13:27 number so that's a random number but not
  • 00:13:30 a random message yet so next I will
  • 00:13:32 create a message and that said a message
  • 00:13:35 should be message a new message of
  • 00:13:37 course and then my random number of plus
  • 00:13:39 and then some string let's say is an
  • 00:13:42 awesome number so the randomness message
  • 00:13:45 will really be more like a random number
  • 00:13:47 and then appending this string to it but
  • 00:13:50 I think you get my point of course you
  • 00:13:52 can generate whatever you want to
  • 00:13:53 generate here or even create an array
  • 00:13:56 with predefined random messages and then
  • 00:13:59 pick one from that array whatever you
  • 00:14:00 like so this is my message and next I
  • 00:14:05 want to push my message on to my message
  • 00:14:09 array here so if I now save this and
  • 00:14:12 then I reload my page and now I click
  • 00:14:16 ran a message well you see I'm adding my
  • 00:14:20 random messages here that looks pretty
  • 00:14:22 good to me so the front-end part is
  • 00:14:24 working and we're almost done if we went
  • 00:14:29 missed a complete back-end part now if
  • 00:14:32 you look at the top
  • 00:14:33 this video has named something like
  • 00:14:34 alert you and noches the note J as part
  • 00:14:38 is really not included unless well the
  • 00:14:42 loading of the page here so time to
  • 00:14:45 actually work on that and store our
  • 00:14:48 messages on the server and get it from
  • 00:14:50 there I'll start by getting rid of the
  • 00:14:54 dummy message here first before I get
  • 00:14:56 that but then it's time to continue and
  • 00:14:59 I'll first implement the well method to
  • 00:15:02 actually add messages because that of
  • 00:15:05 course allows us to see them in a second
  • 00:15:07 step then now for interaction with the
  • 00:15:10 server I'll first create I'm a service
  • 00:15:13 here on the front end in angler 2 and
  • 00:15:15 I'll name it message dot service 30s so
  • 00:15:18 that's the filename and the service
  • 00:15:19 itself should be named message service
  • 00:15:24 of course exported and we need the
  • 00:15:28 injectable decorator here we need that
  • 00:15:34 because I will later on in check angular
  • 00:15:36 choose HTTP service and you can only
  • 00:15:38 inject services into services if the
  • 00:15:42 services into which you want to inject
  • 00:15:44 does have this injectable annotation
  • 00:15:47 otherwise this will not work if you try
  • 00:15:50 to inject a service into a service which
  • 00:15:52 doesn't have the injectable metadata it
  • 00:15:55 won't work so therefore I'm importing
  • 00:16:09 injectable here wonderful so now that's
  • 00:16:13 working I will start by adding a new
  • 00:16:17 method which I call save message and I
  • 00:16:21 expect to get a message of type message
  • 00:16:24 so my own custom message which also
  • 00:16:27 needs to be imported from the message
  • 00:16:28 dot model file therefore and I expect
  • 00:16:32 you well get this in the safe message
  • 00:16:34 method and there I want to reach out to
  • 00:16:36 my server and give this message to the
  • 00:16:39 server so that on the server I can
  • 00:16:41 actually store it in my Mongo database
  • 00:16:44 so with that
  • 00:16:45 timed you go back and work on the server
  • 00:16:49 now as just mentioned I'll use MongoDB
  • 00:16:51 as a database and therefore I expect you
  • 00:16:54 to have it installed and running on your
  • 00:16:55 machine if you don't and you don't know
  • 00:16:57 how to get there in the description of
  • 00:17:00 the video you'll find a link to a video
  • 00:17:02 where I show how to setup MongoDB so
  • 00:17:05 that you're up and running and able to
  • 00:17:07 follow along with that the first step is
  • 00:17:10 to install Mongoose so I'll open up a
  • 00:17:13 new terminal window and that's just a
  • 00:17:15 normal terminal navigated into my
  • 00:17:17 project here by the way
  • 00:17:18 and I will install Mongoose which is
  • 00:17:22 just a third party package making data
  • 00:17:26 interaction between Express and MongoDB
  • 00:17:29 really easy and allow us to work with
  • 00:17:32 data in a very intuitive way and you'll
  • 00:17:35 also find a link to its documentation
  • 00:17:37 and a video on Mongoose in my channel in
  • 00:17:40 the description too so with that I got
  • 00:17:44 Mongoose installed
  • 00:17:46 the first step is in my app touches file
  • 00:17:48 so in the fall which will first get my
  • 00:17:52 request on the server we're on the
  • 00:17:54 server now angler to stand for now I
  • 00:17:56 will import mom us by creating a new
  • 00:18:01 variable and requiring Mongoose here and
  • 00:18:09 as a side note the color for God that
  • 00:18:11 you might want to install it with the
  • 00:18:13 save flag to also add an entry in the
  • 00:18:15 packaged adjacent file which is
  • 00:18:17 important for actually deploying the app
  • 00:18:19 for example so if that Mongoose is
  • 00:18:22 installed it was before and now we're
  • 00:18:25 importing it here in the app touch s
  • 00:18:26 file and next I want to connect to my
  • 00:18:30 database so I can use the Mongoose
  • 00:18:32 connect method for that in here I have
  • 00:18:35 to specify the path to my database now
  • 00:18:39 since I'm running this on my local
  • 00:18:40 server its localhost and then the
  • 00:18:44 question is which port does it run on
  • 00:18:47 well let's have a look this is the
  • 00:18:50 terminal window where my MongoDB service
  • 00:18:52 running and after starting it up you
  • 00:18:56 will see something like this here this
  • 00:18:58 port specification which tells you which
  • 00:19:01 port is occupied by your MongoDB server
  • 00:19:03 in my case and this is the default is
  • 00:19:07 27,000 Oh 17 so I'll enter this here –
  • 00:19:12 seven Oh 17 and then you add a slash and
  • 00:19:17 the name of the database you want to use
  • 00:19:19 now you don't have to create this
  • 00:19:20 database before using it it will be
  • 00:19:23 traded for you so pick whatever name
  • 00:19:25 seems appropriate to you I'll use new
  • 00:19:27 note
  • 00:19:28 angular 2 here so that will be the
  • 00:19:31 database I use draw a project here but
  • 00:19:33 you again choose whatever you want to
  • 00:19:35 choose now we'll connect to Mongoose
  • 00:19:38 we're ready to use it and Mongoose and
  • 00:19:40 I'm not going to go deep into mom who is
  • 00:19:43 here because I really got a video on
  • 00:19:44 that but Mongoose uses models so to work
  • 00:19:48 with data your so you set up a model on
  • 00:19:50 your back-end and you work with the
  • 00:19:52 model to create data to store it to
  • 00:19:56 interact with it and be
  • 00:19:58 seen smoke Mongoose will map this model
  • 00:20:01 to your database will create a
  • 00:20:03 collection based on that model and
  • 00:20:05 whenever you store a variable based on
  • 00:20:08 it model it will actually store an entry
  • 00:20:11 in the database and you can fetch data
  • 00:20:13 from the database through that model too
  • 00:20:16 so this model is really important and
  • 00:20:18 therefore I will create one I'll create
  • 00:20:20 a new folder first on the root level of
  • 00:20:22 my project and I'll name it models now
  • 00:20:24 it's named models but here it will only
  • 00:20:26 hold one
  • 00:20:27 I'll give this file a name of message
  • 00:20:29 shares because it will hold my message
  • 00:20:32 model now in here I'll first import
  • 00:20:35 Mongoose again so require Mongoose and
  • 00:20:43 then I'll need the schema that's a
  • 00:20:46 property Mongoose offers me oops I want
  • 00:20:49 to add a e at the end though and here I
  • 00:20:53 just access the schema property that's
  • 00:20:56 me that you create a schema which again
  • 00:20:59 is something among who is you need in
  • 00:21:01 order to create a model so our model and
  • 00:21:03 Mongoose is based on a schema which is
  • 00:21:05 like a blueprint for the model so that
  • 00:21:07 Mongoose knows how its model should look
  • 00:21:10 like next I will create this blueprint
  • 00:21:14 this schema with the new operator and I
  • 00:21:18 pass a JavaScript object to the
  • 00:21:20 constructor here where I define how this
  • 00:21:23 schema should look like for this message
  • 00:21:25 model I'm setting up here now I want my
  • 00:21:28 message is only to have a content so
  • 00:21:31 I'll give this a key name of content
  • 00:21:32 it's freely totally up to you choose
  • 00:21:35 whatever you want to choose and then I
  • 00:21:37 configure it by passing a chava script
  • 00:21:39 object as a value and here I'll set the
  • 00:21:43 type which should be string uppercase
  • 00:21:45 string that's introduced by Mongoose
  • 00:21:47 here and I also want to make it required
  • 00:21:50 which means you have to set this so
  • 00:21:53 that's the schema not the model however
  • 00:21:55 we do work with the model therefore I'll
  • 00:21:57 do that next I'll set up my model I want
  • 00:22:00 to export that model therefore I'll do
  • 00:22:02 with module exports and that is equal to
  • 00:22:05 Ma newest model and now to dysfunction
  • 00:22:08 here I passed the name of the model and
  • 00:22:11 this is important the convention is to
  • 00:22:14 use uppercase leading character and then
  • 00:22:17 well whatever name you like message in
  • 00:22:19 my case and Mongoose will automatically
  • 00:22:22 create a collection in the Mongo
  • 00:22:25 database based on that model name and it
  • 00:22:28 will always take the lowercase version
  • 00:22:30 of that and PluralEyes it so message
  • 00:22:34 would become messages it will
  • 00:22:36 automatically create a collection
  • 00:22:37 messages for you and then as a second
  • 00:22:40 parameter I passed the scheme on which I
  • 00:22:42 want to base this model so now I got
  • 00:22:46 this message model available to work
  • 00:22:48 with throughout my application which is
  • 00:22:50 of course great because that is what I
  • 00:22:51 need with that time to switch to my
  • 00:22:53 routes file and in here I currently only
  • 00:22:56 got the route to serve my index file my
  • 00:23:00 index page but since we're working on
  • 00:23:03 creating messages I'll also add a post
  • 00:23:05 route slash message for example and here
  • 00:23:09 I'll take my default express middle
  • 00:23:12 aware function to handle this request
  • 00:23:14 and here I then want to create this
  • 00:23:18 message and store it in the database so
  • 00:23:20 for this I'll just create a new variable
  • 00:23:22 which should be new message now here I
  • 00:23:25 want to use the message model I just
  • 00:23:27 created so therefore I have to import
  • 00:23:30 this message from my models folder which
  • 00:23:34 is on a higher level therefore I go up
  • 00:23:37 one folder then the models folder and
  • 00:23:40 then a message fall without file
  • 00:23:42 extension on the back end here – you
  • 00:23:45 don't specify the file extension so now
  • 00:23:48 I'm able to create this new message and
  • 00:23:50 this constructor also takes a JavaScript
  • 00:23:52 object and here of course I'm not
  • 00:23:54 defining how it should look like I did
  • 00:23:56 this in a schema but here I passed the
  • 00:23:58 actual data so I know that my model
  • 00:24:01 expects to have a content so therefore I
  • 00:24:04 provide a content here and once you put
  • 00:24:07 the value of the content well I expect
  • 00:24:10 to get this value with the request so
  • 00:24:15 here I will
  • 00:24:15 is my body since it is a post request
  • 00:24:17 and fetched a content from it and I
  • 00:24:20 expect to have this field available
  • 00:24:22 since we're the ones sending the request
  • 00:24:24 I can make sure that the content field
  • 00:24:27 will be available next I will save my
  • 00:24:31 message by calling the save function and
  • 00:24:34 I could leave like that but I want to
  • 00:24:37 provide a callback to handle any
  • 00:24:39 possible errors this callback takes two
  • 00:24:42 arguments error and result and name them
  • 00:24:45 whatever you want and important thing is
  • 00:24:47 you have two arguments you get back and
  • 00:24:49 then you either get an error or if this
  • 00:24:52 is now you'll probably have a result of
  • 00:24:54 this operation now here I want to handle
  • 00:24:57 the case that we do get an error and in
  • 00:24:59 this case I want to return a response
  • 00:25:01 where the status code is 500 or for 404
  • 00:25:05 or whatever you want to set and then
  • 00:25:08 I'll add a JSON object
  • 00:25:10 where I basically want to say message
  • 00:25:12 error while saving data and of course
  • 00:25:15 you may pass the error object here or
  • 00:25:17 whatever you like so that's really up to
  • 00:25:20 you get some generic error handling here
  • 00:25:23 and again if you want to see a more
  • 00:25:25 elaborate error handling in udemy course
  • 00:25:27 I showed earlier I actually do this and
  • 00:25:30 I will display a modal to the user to
  • 00:25:32 show any possible errors that happened
  • 00:25:35 so that's the error case and in case we
  • 00:25:38 were successful I just want to send to a
  • 00:25:40 one status code for everything okay a
  • 00:25:43 resource was created and then I'll also
  • 00:25:46 append a JSON object where I send let's
  • 00:25:49 say a message with the text saved data
  • 00:25:52 successfully something like that so
  • 00:25:57 that's my post route you create a
  • 00:25:59 message now of course we have to wire
  • 00:26:02 that up to our front end so that's the
  • 00:26:04 next step so back to the message service
  • 00:26:07 here we're currently not doing anything
  • 00:26:09 so time to change this I will need to
  • 00:26:13 reach out to the web so I'll definitely
  • 00:26:16 need a constructor where I want to
  • 00:26:18 inject the angular to HTTP service and
  • 00:26:22 dependency injection of course works
  • 00:26:24 like that now I need to inject us from
  • 00:26:27 the HTTP
  • 00:26:29 module which can be found in the HTTP
  • 00:26:33 package at angular slash HTTP now in
  • 00:26:37 order to be able to use it though I also
  • 00:26:39 need to make a change in my boot dot ts
  • 00:26:41 file here I need to setup the HTTP
  • 00:26:46 providers in my bootstrap methods so I'm
  • 00:26:49 doing this by adding HTTP providers and
  • 00:26:52 also I need to import those from the
  • 00:26:55 angular 2 or at angular HTTP package
  • 00:27:01 here so HTTP providers so if that I can
  • 00:27:05 use HTTP but still I'm not doing that
  • 00:27:08 mat match in my message service here
  • 00:27:10 right so in order to change this I need
  • 00:27:14 to first set up the data I want to pass
  • 00:27:18 with the request because remember on the
  • 00:27:20 back end and my routes file here I try
  • 00:27:24 to extract this content field from the
  • 00:27:27 body sent with the request so I kind of
  • 00:27:29 somehow need to send the content now on
  • 00:27:33 the front end though if I create a new
  • 00:27:36 message like I do here in the app
  • 00:27:38 component remember each new message
  • 00:27:41 based on my model here does have a
  • 00:27:43 content field so somehow I just need to
  • 00:27:46 turn my message object into a string I
  • 00:27:50 can send to my server in able to parse
  • 00:27:53 the data there
  • 00:27:54 well nothing easier than that in my
  • 00:27:56 message service I can create a new body
  • 00:27:59 constant here I'll use the built-in json
  • 00:28:02 stringify method 210 stringify the
  • 00:28:05 message I pass to this save message
  • 00:28:08 method here with that I'm doing what I
  • 00:28:11 just described I take my message object
  • 00:28:13 and I turned it into a JSON string which
  • 00:28:17 has this content field my server will
  • 00:28:19 look for so we're almost there
  • 00:28:23 but I also need to set up some headers
  • 00:28:24 here so new headers that's another
  • 00:28:28 built-in object in angular 2 so I'll
  • 00:28:31 import that too from at angular HTTP and
  • 00:28:34 it expects a JavaScript object in this
  • 00:28:37 constructor or nothing at all if you
  • 00:28:40 don't want to
  • 00:28:40 any headers but here I want you to set
  • 00:28:43 up the content type to tell my server
  • 00:28:45 which content it will receive
  • 00:28:47 application Jason with that I set up the
  • 00:28:51 body and the headers so I'd say I'm
  • 00:28:53 finished or I'm prepared to send a
  • 00:28:56 request now as a matter angler to videos
  • 00:28:59 related to HTTP I will use observables
  • 00:29:02 here therefore and check out those
  • 00:29:05 videos if you if you want to learn more
  • 00:29:06 about that therefore I will here return
  • 00:29:09 this HTTP and then a post method so on
  • 00:29:13 the HTTP service offered Bangalore –
  • 00:29:15 there is this post method and I'm
  • 00:29:18 executing that and this of course as you
  • 00:29:21 probably are aware will give me an
  • 00:29:22 observable to which I can subscribe and
  • 00:29:25 unless I subscribe no request will be
  • 00:29:27 sent so here I'm just configuring the
  • 00:29:30 request therefore and this post method
  • 00:29:33 expects at least two arguments the first
  • 00:29:36 one is to URL and this will be HTTP
  • 00:29:40 localhost since I'm running this node
  • 00:29:42 server on my local host 3000's the
  • 00:29:45 default port setup in the bin www file
  • 00:29:49 and then the slash message route that's
  • 00:29:54 throughout you just created this one
  • 00:29:56 here now with this you are all being set
  • 00:30:01 up I next need to pass data I want to
  • 00:30:03 send and that's of course body so I want
  • 00:30:07 to send my body here I also want to send
  • 00:30:11 some headers so I'll pass a JavaScript
  • 00:30:14 object as deferred argument and here I
  • 00:30:16 specify the headers key but just of
  • 00:30:18 course a kind of built-in key angler to
  • 00:30:21 will look for it and then I pass the
  • 00:30:23 headers while constant I created up here
  • 00:30:25 to set the right headers for this
  • 00:30:27 request with that I'm actually posting
  • 00:30:31 the data and we can try this out if I
  • 00:30:34 restart my server like quitting and
  • 00:30:38 running NPM start again and I reload my
  • 00:30:41 page
  • 00:30:43 well I can't click here and we see them
  • 00:30:45 here but of course we don't see if they
  • 00:30:47 are actually added on the server and
  • 00:30:49 they wouldn't be because we're not
  • 00:30:52 subscribing to this room
  • 00:30:54 we're only setting this up but this
  • 00:30:57 isn't observable we have to subscribe to
  • 00:30:59 actually send the request it's in order
  • 00:31:01 to do this I will go to my app component
  • 00:31:04 and then here in the on add message
  • 00:31:07 method after pushing it on my local
  • 00:31:10 messages array I will reach out to my
  • 00:31:14 message service but I haven't I can't
  • 00:31:17 access it here right now well I need to
  • 00:31:20 inject it of course so I'll add a
  • 00:31:23 constructor and set up my private
  • 00:31:26 message services property or message
  • 00:31:28 service property and then message
  • 00:31:32 service the service I just created also
  • 00:31:35 add the import to slash message dot
  • 00:31:37 service without the file extension now
  • 00:31:41 in order to make it work and consult my
  • 00:31:44 videos or other tutorials on dependency
  • 00:31:46 injection in angler to I also need to
  • 00:31:49 add the providers metadata here I'm
  • 00:31:51 telling angler to hey this component
  • 00:31:54 will need this message service can you
  • 00:31:57 take care about finding out how to
  • 00:31:58 create it and then hang on to knows okay
  • 00:32:01 I need to be able to create the service
  • 00:32:03 and once it encounters this line here it
  • 00:32:05 is able to create it and give it to me
  • 00:32:07 and therefore I got this message service
  • 00:32:10 available here and I can now call the
  • 00:32:13 save message method and pass this
  • 00:32:15 message I create right here now still
  • 00:32:19 nothing would happen because I haven't
  • 00:32:22 subscribed to it yet so let's do this
  • 00:32:24 next I'll call subscribe on it and just
  • 00:32:29 to make it clear we can't also specify
  • 00:32:32 that we will return and observable here
  • 00:32:34 just to make this 100 persecuted you
  • 00:32:36 don't have to do this it's just a good
  • 00:32:38 practice to well be explicit with the
  • 00:32:41 types you're returning of course in this
  • 00:32:44 case I also need to import observables
  • 00:32:47 from in this case rxjs observable and
  • 00:32:51 then yeah I need the observable here so
  • 00:32:56 as a chest said this is an optional step
  • 00:32:58 I'm just being explicit here so back in
  • 00:33:01 the app component I'm subscribing to it
  • 00:33:03 and now in the success case so in the
  • 00:33:06 case first
  • 00:33:07 sass fall well here all I want to do is
  • 00:33:09 I simply want to log out success to see
  • 00:33:12 that it seemed to work on the server in
  • 00:33:16 the error case I will instead
  • 00:33:19 well lock this error to the console and
  • 00:33:23 with that if I now reload this page
  • 00:33:26 again and I open by developer tools to
  • 00:33:29 see my console let's see what happens if
  • 00:33:31 I click new ran the message I see
  • 00:33:35 success so it looks like it works and we
  • 00:33:39 can even verify this if you go back to
  • 00:33:41 the terminal and you open up a new one
  • 00:33:43 keep the server running navigate into
  • 00:33:46 your MongoDB folder and in there go into
  • 00:33:49 your bin folder where you started your
  • 00:33:51 server and run your Mongo database now
  • 00:33:55 use your database you setup in your app
  • 00:33:59 chess fowl node angular 2 in my case
  • 00:34:02 that's the database that was created for
  • 00:34:04 you so no danglers you in my case here
  • 00:34:06 and then you may access the messages
  • 00:34:09 collection remember I said mom whose
  • 00:34:11 would create this collection
  • 00:34:13 automatically based on your model name
  • 00:34:15 and execute the find method and indeed
  • 00:34:18 you see that we have three messages in
  • 00:34:21 there with 92 131 which are exactly the
  • 00:34:25 numbers you see here so that's great
  • 00:34:28 storing the data on the server actually
  • 00:34:30 works now of course the problem is if we
  • 00:34:34 reload the page here everything is gone
  • 00:34:37 so even though it's stored on a server
  • 00:34:39 we're currently not fetching it so let's
  • 00:34:42 finish this app by actually adding this
  • 00:34:44 functionality as well a good point to
  • 00:34:47 start implementing this of course is on
  • 00:34:50 the backend so I'll go to my app chess
  • 00:34:52 file and above the post route where I
  • 00:34:55 actually create a new message I'll add a
  • 00:34:58 navigate route to slash messages plural
  • 00:35:01 because I'm fetching multiple messages
  • 00:35:03 here at least potentially and of course
  • 00:35:07 here I'll have my default express mail
  • 00:35:11 aware function and then here you will
  • 00:35:14 see through note excuse me from Mongoose
  • 00:35:17 it's really easy to fetch data
  • 00:35:20 I can use my model like a class of
  • 00:35:24 static methods here so the small I'm
  • 00:35:26 importing here at the top and then I can
  • 00:35:29 use the find method and find allows me
  • 00:35:33 to specify some conditions or criteria
  • 00:35:36 by which I want to find it now here I
  • 00:35:39 want to find all messages so I don't
  • 00:35:42 need to specify anything I can directly
  • 00:35:44 pass the callback function I want to
  • 00:35:47 execute once I got data this callback
  • 00:35:53 function also takes two arguments the
  • 00:35:55 first one is in potential error at the
  • 00:35:57 second one you can name it whatever you
  • 00:35:59 like that goes for both arguments of
  • 00:36:01 course is or will be the messages I
  • 00:36:03 retrieved so here I will first check if
  • 00:36:07 we got an error and in case we did I
  • 00:36:10 will actually just copy this error
  • 00:36:12 handling from the post route so your I
  • 00:36:17 will just say error while fetching data
  • 00:36:19 some generic error handling or very
  • 00:36:22 simple error handling here but if we're
  • 00:36:25 successful I want to set my status to
  • 00:36:27 200 and I want to send back a JSON
  • 00:36:31 object and now this is of course
  • 00:36:33 important here I want to set a data
  • 00:36:36 field which actually holds the messages
  • 00:36:39 I got from my database and you can name
  • 00:36:42 this field whatever you like you can
  • 00:36:44 name it massachusett Evac lear
  • 00:36:47 distinction to messages here and message
  • 00:36:50 here and so on so now I'm returning the
  • 00:36:53 messages that I've fetched in the
  • 00:36:57 database if I haven't got an error in
  • 00:37:01 which case I would return this response
  • 00:37:04 and the return keyword here is important
  • 00:37:06 by the way if I would not have it
  • 00:37:08 I would generate my response but then
  • 00:37:11 continue execution and generate another
  • 00:37:14 response which is not what I want
  • 00:37:15 so therefore have returned here but you
  • 00:37:18 don't need it here since no code is
  • 00:37:20 executed after this line so of this I'm
  • 00:37:24 actually sending back T objects I got
  • 00:37:27 from the server
  • 00:37:28 or from the database and now I need to
  • 00:37:30 handle them
  • 00:37:31 front end so I go to my message service
  • 00:37:34 again and here I'll create a new method
  • 00:37:37 which I'll call get messages and this
  • 00:37:42 will also give me an observable wrapping
  • 00:37:46 any object the same is true down here
  • 00:37:50 and that's all as I said optional so
  • 00:37:54 what I want to return here is using the
  • 00:37:57 angler to HTTP service executing the get
  • 00:37:59 method and observable configured frutos
  • 00:38:02 now that method to get method only
  • 00:38:05 expects one argument it's of course the
  • 00:38:08 URL to the resource I want to get so
  • 00:38:11 here localhost 3000 and then slash
  • 00:38:15 messages is the route we set up here in
  • 00:38:18 the app touch as file this one now
  • 00:38:21 that's fine and what would this give me
  • 00:38:23 well actually it would give me some JSON
  • 00:38:28 the one I'm returning here but messages
  • 00:38:31 here will not be an array and the form I
  • 00:38:35 want to use it in my front end it will
  • 00:38:37 be the data I get back from the database
  • 00:38:39 and it will of course also include the
  • 00:38:41 content of the messages but also the IDS
  • 00:38:44 of the database entry and so on so a lot
  • 00:38:47 of stuff I don't need and therefore I
  • 00:38:49 need to transform the data I get back
  • 00:38:51 the cool thing about observables is they
  • 00:38:54 have a lot of operators we can use and
  • 00:38:55 one cool operator is the map operator
  • 00:38:58 which allows me to transform values in
  • 00:39:01 order to be able to use this I need to
  • 00:39:03 add an import here which is just rxjs
  • 00:39:06 /rx
  • 00:39:07 and that simply unlocks all those
  • 00:39:10 observable operators to be used now it's
  • 00:39:15 red because my ID has some problems
  • 00:39:17 finding that but it is available and
  • 00:39:19 with the map operator I can they it
  • 00:39:21 basically take the data I get back from
  • 00:39:23 this observable do something with it and
  • 00:39:26 return a new observable with that
  • 00:39:29 transformed data so put in easier words
  • 00:39:31 it allows me to transforms the data I
  • 00:39:33 get back from this request so therefore
  • 00:39:36 I'll use a fat arrow function here to
  • 00:39:39 work with that and to
  • 00:39:41 work with the data I get and to specify
  • 00:39:43 the logic by which I want to transfer it
  • 00:39:46 so or transform not transfer so I want
  • 00:39:50 to create a constant here and I'll just
  • 00:39:53 name this extracted name it whatever you
  • 00:39:57 like and here I will use the data and
  • 00:40:01 run the JS method on it I can do this
  • 00:40:04 because this data here behind the scenes
  • 00:40:08 is of type response which is a
  • 00:40:12 JavaScript interface basically I can
  • 00:40:16 import from the HTTP package which has a
  • 00:40:19 Jason method available which just means
  • 00:40:21 this response of course also has to stay
  • 00:40:24 this code and so on I don't need that
  • 00:40:25 just give me the body of the response
  • 00:40:27 the data of the response and that not
  • 00:40:31 only give me that data also immediately
  • 00:40:33 transformed it into a JavaScript object
  • 00:40:35 so that's a huge important first step
  • 00:40:38 only with that single line we're leaving
  • 00:40:40 out all the stuff we don't need status
  • 00:40:42 code and so on we're just getting the
  • 00:40:43 data as a JavaScript object but still
  • 00:40:46 this data also has some stuff we don't
  • 00:40:48 need like database IDs and so on so in
  • 00:40:52 order to fix this I'll next create a
  • 00:40:54 helper array on a mat message array and
  • 00:40:58 this should just be an empty array at
  • 00:40:59 the beginning an empty array of messages
  • 00:41:04 of course and then I'll create a message
  • 00:41:08 here this variable and next I want to
  • 00:41:12 loop through all my elements in my
  • 00:41:17 extract data but here in the data field
  • 00:41:21 now what is this data field well if you
  • 00:41:24 remember our routes here data is the
  • 00:41:27 name I specified here data and if you
  • 00:41:30 redemptor stew messages or if you net
  • 00:41:32 renamed this to anything else then you
  • 00:41:35 also have to rename it here but in my
  • 00:41:38 case it's called data and now I'm
  • 00:41:40 looping through all the entries in this
  • 00:41:42 data so through all the messages with
  • 00:41:45 all the stuff they got attached I don't
  • 00:41:46 need and all I do here is then I will
  • 00:41:49 take my message variable I created up
  • 00:41:51 here and assign it to a new message
  • 00:41:54 in each iteration where I only extract
  • 00:41:59 the content so each element here in this
  • 00:42:03 data field also has an ID and so on and
  • 00:42:06 I only extract the content now it's read
  • 00:42:09 here because it doesn't know that
  • 00:42:10 content will be available but I know and
  • 00:42:12 then I want to push it on to my message
  • 00:42:16 array and in the end I will of course
  • 00:42:20 return this message array because
  • 00:42:22 remember map simply transforms to data
  • 00:42:25 here I'm setting up the logic by which I
  • 00:42:28 want to transform it and in the end of
  • 00:42:30 course I have to return the transformed
  • 00:42:31 data
  • 00:42:32 I've arise otherwise nothing is
  • 00:42:34 available so that's to get messages
  • 00:42:36 function time to use it in our app
  • 00:42:38 component of course I want to fetch
  • 00:42:41 messages right when the uploads and I
  • 00:42:44 could do this in a constructor but it is
  • 00:42:45 a good practice to not do any heavy
  • 00:42:47 lifting or HTTP calls in a constructor
  • 00:42:50 for example for testing reasons where
  • 00:42:53 it's better to control through angular 2
  • 00:42:56 if you do it in another place now what
  • 00:42:59 is this other place
  • 00:43:00 it's the on init lifecycle hook
  • 00:43:03 implements on in it is to code I need to
  • 00:43:06 add to my class here and this basically
  • 00:43:09 tells angular 2 and typescript that I
  • 00:43:12 want to use an interface the on init
  • 00:43:14 interface which I do need to import from
  • 00:43:17 at angular core and this interface
  • 00:43:21 requires me to implement a certain
  • 00:43:25 method the ng on init method to be
  • 00:43:28 precise now this ng on init method will
  • 00:43:32 get executed automatically as long as I
  • 00:43:36 implement this interface here by angular
  • 00:43:40 2 whenever it creates this component so
  • 00:43:43 when I load the app it creates a
  • 00:43:45 component it will execute this method
  • 00:43:47 automatically and so since I want to
  • 00:43:50 load everything up one startup this is
  • 00:43:53 the perfect place to whoops to actually
  • 00:43:56 fetch the data so I will do this by
  • 00:43:58 using my message service again
  • 00:44:01 and then here I call the get messages
  • 00:44:04 method and remember dis returns me an
  • 00:44:06 observable so I have to subscribe to it
  • 00:44:09 to actually get something and to
  • 00:44:10 actually send the request in the first
  • 00:44:12 place and here in the success case I get
  • 00:44:17 back some messages and I will use those
  • 00:44:20 messages to assign them to my local
  • 00:44:23 messages property here so to dis
  • 00:44:27 messages array this will then be set
  • 00:44:29 equal to the messages I got back from
  • 00:44:31 the server and I will also handle a
  • 00:44:35 potential error case by simply logging
  • 00:44:37 it to the console for now okay so let's
  • 00:44:42 see if this works I'll first restart my
  • 00:44:45 server since I did some or made some
  • 00:44:47 changes there too and then I'll restart
  • 00:44:50 my app here while you reloading it well
  • 00:44:54 we almost got it we see three entries so
  • 00:44:59 we got three objects that is good to
  • 00:45:02 service I kill it seems to work but
  • 00:45:05 somehow we fail to extract the content
  • 00:45:07 let's see what went wrong it's a tiny
  • 00:45:11 thing this shouldn't be a lat
  • 00:45:13 a4 in a loop it should be a for off loop
  • 00:45:16 so I should loop through all the
  • 00:45:18 elements in this array and not try to
  • 00:45:21 loop through any keys and some kind of
  • 00:45:23 object so now if I save this I don't
  • 00:45:26 need to restart my server if I reload
  • 00:45:28 this page now this looks much better and
  • 00:45:32 if I add new random numbers and reload
  • 00:45:34 again they're still there because
  • 00:45:37 they're still stored on the server so I
  • 00:45:40 think even though we only have a very
  • 00:45:43 basic app here you're still able to see
  • 00:45:46 how easy and fun it is to connect no
  • 00:45:50 chairs with angular 2 now of course
  • 00:45:52 there are different ways to connect it
  • 00:45:54 you could also run angular 2 or serve
  • 00:45:56 angular 2 from a different server that's
  • 00:45:58 just a setup here with which I went and
  • 00:46:01 of course there are a lot of things how
  • 00:46:03 you could extend this app you could make
  • 00:46:05 messages edible editable or deletable or
  • 00:46:09 anything else you can sort them on the
  • 00:46:11 server they're really quite a lot of
  • 00:46:14 abilities and again just a quick note if
  • 00:46:17 you want to dive into this deeper check
  • 00:46:20 out my you deme course you'll find a
  • 00:46:21 link and possible discounts in the
  • 00:46:23 description to this video and I'm happy
  • 00:46:25 to see you in all the other lecturers on
  • 00:46:26 this channel have a great day bye