You've created your first Angular project and know how to use "ng serve" to see it in a browser. Now let's talk about the Angular project folders and a few tips on how the folders can help you to organize your project.
Today we focus on the EXPLORER window of Visual Studio Code, where you will be able to see the folder structure of your project. Here's how that window can be opened.
Once opened, you should see this:
Note the project name of RESUME, because Visual Studio Code was opened to a folder named resume which was created from the "ng new resume" command.
Open that folder and you should see something like this:
We'll talk about each of the files later, but now we will focus on the folder named 'src', this folder represents the location of all the components we will build to make up your site.
SRC Folder
The SRC Folder's most important file is the index.html file, this is the eventual root of your web application which means it's the main file your web server will look for when serving up your web site.
For now, ignore the index.html file and take a look at the app and assets folders. The 'app' folder is where we will eventually put all of the web pages/components for your web site. The 'assets' folder is where all the media (images, and other things) will be stored.
Assets
The 'assets' folder is special because it's the folder that collects non-html files that are needed to be used on the web site. For now just think of it as the place where images go even though other files types can be put there too.
I've recently made a switch to prefer .jpg file types as I see a lot of folks indicating they are better for web site images. However, all other image types and even media types work too.
To put an image into this folder, 'Google an image' right click on it and then pick 'Save as' and put the image directly into your 'assets' folder.
Components Folder
I like to create a folder named Components. I switch to that folder anytime I use the 'ng g c xyzname' command (the Angular command to create a new component). It's a very good idea to think about a proper name for each component using these rules:
- Each Component should only do one thing
- Each Component's name should reflect that single thing they do.
- 'header' is a good name because it describes an area of the web site
- 'footer' is a good name for the same reason.
- 'main' is a good name because it could be the main area on the web site that contains all the content.
Other good names would be:
- 'resume', where the resume section would be contained.
- 'directives', where all the directives are stored (will discuss later)
Any specific section of your web site that you want to be separate from other parts may be put into the components folder.
ng g c xyzName
The angular command to generate a component mentioned earlier is
'ng g c xyzName'
This will eventually be the most used and favorite command to tell angular to create a new component. Just make sure you are in the right folder first (where you want to the component to be created) before you issue the command.
Each new component will look similar to this:
Assume we want an education part in our resume web site, we switch to the resume folder and type in 'ng g c education' it will create the folder 'education' and also put 4 files into that folder. Three of these four files make up the component. Those three file are the HTML file, for the GUI, the .scss file for the style of that page only and the .ts file which is the typescript code associated with this component. Look at the concept of a component as a collection of files that give you everything needed for a web page.
In the next article, we'll cover the content of those files.
For now, just type in 'ng serve' and your web site will pop up on your localhost:4200 port for viewing.
Good luck, and remember stay focused.
If you are new to Angular, check this site out it's free! Just add your email and get the first 21 courses free.
JWP2021
Top comments (0)