Project Files Structure in Angular | Editing the Angular App

 Hey Hi Folks, today we are going to see that how our angular project files can be seen and their respective descriptions

First of all I want to mention it that we have to be in our Angular Project in Visual Studio Code to see structure of our Files. In our Example, our Angular project is AlienPro. So Open AlienPro in Visual Studio Code.

Steps to open AlienPro Project,  just open new cmd window. Type following commands:

   1. cd AngularProject

   2. cd AlienPro

   3. code .  (It's a code dot[.])

You can see following window on your computer/laptop

Here important files which we have to see are:

1. package.json

2. angular.json

3. e2e

4. node_modules

5. src

6. assests

7. enviroments

1. package.json :

   1. This is a configuration file.

   2. This file has all the dependencies that are required for node packages.

2. angular.json :

   1. This is a configuration file.

   2. This file has all the configuration that are required for current Angular Project .In our example AlienPro            is our current Angular Project

3. e2e :

   This file is used for end to end testing in our Project

4. node_modules:

   1. This consist of all the modules which are required timely in our Project

5. src:

  Note: Our src folder consist of following files

  1. style.css:

      This file consist of global css that means css present in this file will be applicable to whole current project

  2. index.html

     This is the only html file which is run or serve by our Angular application

3. assests:

     This file has all static assests like images etc.

4. environments:

   This file is used for environment variables

Now Let's see how our Angular application looks on browser .Also we will see description of some other files

 and do some editing in our application for fun play.

First of all , we will run/ serve the application by using integrated terminal present in our Visual studio code.

This integrated terminal looks like cmd , so instead of going to cmd , we will run the commands by using integrated terminal of Visual studio code.

Steps to open integrated terminal of Visual studio code:

1. Open AlienPro project in Visual Studio Code

2. Click on "Terminal" on above toolbar

3. Then click on "New Terminal" 

4. A New Terminal will be opened below

5. Type command "ng serve" and click on enter.

For reference find below two images to know how to open New Terminal and type command "ng serve"

After running "ng serve" command in terminal , after sometime you will get an message as "Compiled Successfully" on terminal

Note : If you find any errors in terminal then run "ng serve" command in cmd,  after sometime you will get an message as "Compiled Successfully" on terminal

To see the running Angular application on browser, Enter the url  http://localhost:4200/  in your browser and then click on enter

You can see following application running on browser

Now let's edit this application

Whatever you can see in the above screenshot , that everything is coming from app.component.html file

Now let's remove all thing present in above screenshot , so to that we have to remove everything from 

app.component.html file

After deleting all from app.component.html file , you can see blank at  http://localhost:4200/ in the browser

Now , we will do one small exercise in which we want to see following statement in our browser:

  " Hey Hi. This is my First Angular application called AlienPro" 

So to this, we have to go to app.component.html file and paste following code:

<p>Hey Hi. This is my First Angular application called AlienPro</p>

You can see some change at http://localhost:4200/  in your browser

Following window can be seen :

From these we can say that, whatever can be seen on browser that content is coming from app.component.html file

There are some important files in our application like:

1. app.component.html : This is the file from where Angular application renders the content

2. app.component.css : This file consist of css which can be just use for html present in app.component.html       file 

3. app.component.spec.ts : This file is used for testing purpose

4. app.module.ts : This file is used to register components, modules and services. That means whatever component,services and modules are generated has to be compulsory registered in app.module.ts to get the effect of particular generated component,service and module