Installing our IDE
A free video tutorial from Maximilian Schwarzmüller
Professional Web Developer and Instructor
4.6 instructor rating • 37 courses • 1,531,026 students
To write code efficiently, an IDE is required - here's my recommendation.
Learn more from the full courseAngular & NodeJS - The MEAN Stack Guide [2021 Edition]
Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application
12:41:09 of on-demand video • Updated March 2021
- Build real Angular + NodeJS applications
- Understand how Angular works and how it interacts with Backends
- Connect any Angular Frontend with a NodeJS Backend
- Use MongoDB with Mongoose to interact with Data on the Backend
- Use ExpressJS as a NodeJS Framework
- Provide a great user experience by using Optimistic Updating on the Frontend
- Improve any Angular (+ NodeJS) application by adding Error Handling
English So in the last lecture, we created our Angular application and now we want to edit it. As I mentioned, for this we want to use an IDE or some advanced text editor because that simply makes working with our code much easier. In this course, I will use a Visual Studio Code and that code part is important, not Visual Studio, Visual Studio Code. It's a free IDE, totally free, it's pretty powerful, it's highly extensible, it's awesome and it's available for Mac but also for Windows, Linux, you can pick your installer version here if it doesn't auto-select the right one automatically. Simply download it then and walk through the installer it gives you, there should be nothing special about that and once you've got it installed, open it. If you open it, it should look something like this, you'll probably see that welcome page and there you can click open folder to open that Angular project we created with the CLI a few seconds ago. If you don't see that page, then you can always open it through File, Open. Now, let's click open folder and navigate to the folder. Here I've selected that MEAN course project and I can click open now and this loads it into the IDE so that we can work on it there. Now, the IDE might look a bit different for you, maybe it doesnt have this dark theme, it probably has different icons and that is simply something I fine-tuned for myself, so I like this way of looking and working and I will show you how to get there. If you're using a different IDE, you of course have to fine-tune it on your own. For Visual Studio Code, I want to install a certain extension first of all, two extensions to be precise and for that, go to View -> Extensions, you might also see a bar on the left where you can click on the extensions icon and on this page, make sure to install Angular Essentials. Now here I already got that installed, you can search for Angular here and you should quickly find the Angular Essentials package, search for Angular Essentials otherwise and that's a pretty amazing collection of different extensions that enhance the IDE to work better with Angular. So simply install this with the install button and feel free to skip or read through the documentation here to find out what's included and how it works. Besides that, I use one other extension which is purely optical, it's the Material Icon Theme here, so by searching for material, you should find it. Also install this if you like the way my icons look in this course, it's purely visual, it gives you nicer file icons and I quite like these. So with that, you can go back to View Explorer once you're done and you should see something like this. Well I also use a dark theme and you can get that same look by going to code thing here, preferences and there, color theme and here, I'm using Dark+, by default, you probably are using Light+ or Light. Now you can try out these different themes here by simply clicking on them, you can always switch and choose the style you like. Now with that, you get the same setup as I do, now let's get started working on our Angular app. This is the folder the Angular CLI created for us, time to edit it.