Coding

Angular – Node – MongoDB & Express (MEAN) Tutorial for Beginners – Getting Started

  • 00:27:16 and walk through the installer it gives
  • 00:27:17 you there should be nothing special
  • 00:27:19 about that
  • 00:27:20 and once you got it installed open it if
  • 00:27:22 you open it
  • 00:27:23 it should look something like this you
  • 00:27:24 probably see that welcome page
  • 00:27:26 and there you can click open folder to
  • 00:27:29 open that
  • 00:27:29 angular project we created with the cli
  • 00:27:32 a few seconds ago
  • 00:27:33 if you don't see that page you can
  • 00:27:34 always open it through file open
  • 00:27:37 now let's click open folder and navigate
  • 00:27:39 to the folder here i selected that mean
  • 00:27:41 course project and i can click open now
  • 00:27:44 and this loads it into this id so that
  • 00:27:46 we can work on it there
  • 00:27:47 now the idea might look a bit different
  • 00:27:49 for you maybe it doesn't have this dark
  • 00:27:51 theme it probably has different icons
  • 00:27:54 and that is simply something i
  • 00:27:55 fine-tuned for myself so i like this
  • 00:27:58 way of it looking and working and i will
  • 00:28:01 show you how to get there
  • 00:28:02 if you're using a different id you of
  • 00:28:04 course have to fine tune it on your own
  • 00:28:06 for visual studio code i want to install
  • 00:28:09 a certain
  • 00:28:10 extension first of all two extensions to
  • 00:28:12 be precise
  • 00:28:13 and for that go to view extensions
  • 00:28:16 you might also see a bar on the left
  • 00:28:18 where you can click on extensions icon
  • 00:28:21 and on this page make sure to install
  • 00:28:23 angular essentials
  • 00:28:24 now here i already got that installed
  • 00:28:27 you can search for
  • 00:28:28 angular here and you should quickly find
  • 00:28:31 the angular essentials package
  • 00:28:32 search for angular essentials otherwise
  • 00:28:35 and that's a pretty amazing collection
  • 00:28:37 of different extensions that enhance the
  • 00:28:39 ide to work better with angular
  • 00:28:42 so simply install this with the install
  • 00:28:44 button and feel free to skip or read
  • 00:28:46 through the documentation here to find
  • 00:28:48 out what's included and how it works
  • 00:28:50 besides that i use one other extension
  • 00:28:53 which
  • 00:28:53 is purely optical it's the material
  • 00:28:58 icon theme here so by searching for
  • 00:29:00 material you should find it
  • 00:29:03 also install this if you like the way my
  • 00:29:05 icons look in this course
  • 00:29:06 it's purely visual it gives you nicer
  • 00:29:08 file icons
  • 00:29:09 and i quite like these so with that you
  • 00:29:12 can go back to view explorer once you're
  • 00:29:14 done
  • 00:29:14 and you should see something like this
  • 00:29:17 well i also use a dark theme
  • 00:29:19 and you can get that same look by going
  • 00:29:20 to the code thing here
  • 00:29:22 preferences and there color theme
  • 00:29:25 and here i'm using dark plus
  • 00:29:28 by default you probably are using light
  • 00:29:30 plus or light
  • 00:29:32 now you can try out these different
  • 00:29:34 themes here by simply clicking on them
  • 00:29:35 you can always switch
  • 00:29:36 and choose the style you like now with
  • 00:29:38 that you get the same setup as i do
  • 00:29:41 now let's get started working on our
  • 00:29:43 angular app
  • 00:29:44 this is the folder the angular cli
  • 00:29:46 created for us
  • 00:29:47 time to edit it
  • 00:29:57 so let's quickly start working on the
  • 00:29:59 angular app we created
  • 00:30:00 this is the folder dcli gave us and as
  • 00:30:03 you can see it has a bunch of subfolders
  • 00:30:05 and files
  • 00:30:06 as i said most of these files are purely
  • 00:30:09 for configuration and we don't need to
  • 00:30:11 worry about them
  • 00:30:12 the package.json file is interesting
  • 00:30:14 because here you can see all the
  • 00:30:16 dependencies
  • 00:30:17 and development only dependencies of the
  • 00:30:19 project and later once we
  • 00:30:21 start adding some mongodb related
  • 00:30:24 dependencies we'll also see them here
  • 00:30:26 we got files for configuring the
  • 00:30:28 typescript compilation and you don't
  • 00:30:30 need to worry about that the defaults
  • 00:30:31 are fine we get the angular json file
  • 00:30:34 which is for the angular cli
  • 00:30:36 and we also don't need to worry about
  • 00:30:37 this file in the course for now