#04 Angular files and folder structure| Getting Started with Angular | A Complete Angular Course

Summary

This lecture offers an insightful overview of Angular project structure, focusing on the files and folders generated by Angular CLI. It explains the purpose of each, including the 'node_modules' for third-party libraries, 'package.json' for project configurations and dependencies, and the crucial 'angular.json' for project-wide settings. The video also delves into the 'src' folder, highlighting its role in housing application source code and differentiating between global and component-specific CSS styles. The session aims to familiarize developers with essential Angular components, setting a foundation for deeper exploration in subsequent lectures.

Takeaways

• 📁 The 'node_modules' folder stores all third-party libraries that the Angular application depends on and is not deployed in production or checked into the repo.
• 🛠️ Developers can reinstall dependencies by running 'npm install' after checking out the project code, which is not including the 'node_modules' folder.
• 📝 The 'package.json' file contains project configurations and lists of dependencies and devDependencies that the Angular project relies on.
• 🔍 The 'package-lock.json' file ensures consistent installation of dependencies across different environments by recording their exact versions.
• 👥 The '.editorconfig' file sets coding standards for a team, helping to maintain consistency across multiple developers' contributions.
• 🚫 The '.gitignore' file specifies which files and folders to exclude from the git repository, such as 'node_modules' and other non-essential files.
• 🛠️ The 'angular.json' file is crucial for Angular project configuration, detailing project settings, styles, scripts, and the main entry point.
• 📖 The 'tsconfig.json' file includes settings for the TypeScript compiler, which compiles TypeScript code into JavaScript for browser execution.
• 🏗️ The 'src' folder is the central location for all application source code, including components, services, and modules.
• 📸 The 'assets' folder holds static assets like images and icons, which are publicly accessible when referenced in the application.
• 🌐 The 'index.html' file is the main HTML rendered in the browser, with dependencies injected during the build process by Angular CLI.

Q & A

What is the purpose of the 'node_modules' folder in an Angular project?

The 'node_modules' folder is used to store all the third-party libraries that the Angular application might depend on. These libraries are downloaded from npm and are essential for the development of the application. However, this folder is not deployed to the production server nor checked into the version control system like git.

Why is the 'node_modules' folder not included when pushing to a git repository?

The 'node_modules' folder is not included in the git repository because it is purely for development purposes. It can be regenerated by running 'npm install' whenever needed, which makes it unnecessary to keep in version control.

How does an Angular application function without the 'node_modules' folder?

If the 'node_modules' folder is missing, such as after checking out code from a repository, the developer can run 'npm install' to download and install all the necessary packages that the Angular project depends on, thus regenerating the 'node_modules' folder.

What role does the 'package.json' file play in an Angular project?

The 'package.json' file is a standard configuration file for Node projects, including Angular. It contains project-related configurations, such as the project's name and version, as well as scripts for starting and building the project. Importantly, it lists the dependencies and devDependencies that the project relies on.

How does 'npm install' know which packages to install for an Angular project?

The 'npm install' command looks inside the 'package.json' file to determine the dependencies and devDependencies that need to be installed. It then downloads and installs these packages into the 'node_modules' folder.

What is the purpose of the '.editorconfig' file in a development team environment?

The '.editorconfig' file is used to define and maintain consistent coding styles between different editors and IDEs used by developers in a team. It helps to avoid errors and maintain a consistent code style across the project.

What does the '.gitignore' file specify?

The '.gitignore' file specifies which files and folders should be excluded from the git repository. This is useful for not tracking files that are not needed in version control, such as the 'node_modules' folder or temporary files.

What is the significance of the 'angular.json' file in an Angular project?

The 'angular.json' file contains all the configurations related to the Angular project, such as project name, type, styles, scripts, and the main entry point. It is the most important configuration file for an Angular application.

What is the 'package-lock.json' file and why is it important?

The 'package-lock.json' file records the exact version of every installed dependency, including their sub-dependencies. It ensures that the same versions of dependencies are installed consistently across different environments, which is crucial for avoiding inconsistencies in development, production, and other environments.

What is the role of the 'tsconfig.json' file in an Angular project?

The 'tsconfig.json' file contains settings for the TypeScript compiler. The compiler uses these settings to compile TypeScript code into JavaScript that browsers can understand. It's an important configuration for managing how the code is transpiled.

What is the 'src' folder in an Angular project and why is it important?

The 'src' folder is where all the application's source code is stored. It contains components, services, modules, and other essential parts of the application. Developers spend most of their time in this folder, creating and managing the application's functionality.

What is the purpose of the 'assets' folder in an Angular project?

The 'assets' folder is used to store static assets such as images, icons, and text files. These assets are made public and can be accessed directly from the browser, making it the place to keep all publicly accessible resources.

Why is the 'index.html' file in the 'src' folder important for an Angular application?

The 'index.html' file is the main HTML file that gets rendered in the browser when the Angular application runs. It is where the application is bootstrapped, and all dependencies are injected during the build process by the Angular CLI.

What is the 'main.ts' file and its significance in starting an Angular application?

The 'main.ts' file is the starting point of an Angular application. It is where the app module is bootstrapped, and the application's execution begins. It is similar to a main method in other programming languages, marking the entry point of the application.

What is the difference between global CSS styles and component-specific CSS styles in an Angular project?

Global CSS styles are defined in the 'style.css' file and are applied to the entire application, affecting all components and directives. In contrast, component-specific CSS styles are defined in a component's own CSS file (e.g., 'app.component.css') and only affect the HTML elements of that particular component.

Outlines

00:00

📁 Understanding Angular Project Structure

The lecture provides an introductory overview of the file and folder structure generated by Angular CLI when creating a new project. It explains the purpose of each file and folder, starting with the 'node_modules' folder, which stores third-party libraries. The importance of not deploying 'node_modules' in production and not including it in the version control system is emphasized. The explanation includes how to reinstall dependencies using 'npm install' after deleting the 'node_modules' folder and the role of 'package.json' in managing project configurations and dependencies.

05:02

📝 Navigating Angular Configuration Files

This paragraph delves into the significance of 'package.json', detailing how it lists project configurations, scripts for project operations like 'ng serve' and 'ng build', and the dependencies and devDependencies sections that Angular projects rely on. It also touches on the '.editorconfig' file for team environment setup, ensuring consistent coding standards, and the '.gitignore' file for specifying files and folders to exclude from version control. The paragraph further explains how 'npm install' uses 'package.json' to identify and install the necessary packages.

10:03

🛠️ Angular's Core Configuration and Source Files

The script continues with an exploration of the 'angular.json' file, highlighting its role as the central configuration file for the Angular project, including project details and build configurations. It also mentions 'package-lock.json', which ensures consistent installation of dependencies across different environments. The 'README.md' file is briefly acknowledged, followed by an explanation of 'tsconfig.json', the TypeScript compiler settings file. The focus then shifts to the 'src' folder, emphasizing its importance as the repository for all application source code, including components, services, and modules, and the default files and folders it contains.

15:04

🌐 Public Assets and Angular Application Entry Points

The final paragraph discusses the 'assets' folder, where static assets like images and icons are stored and made publicly accessible. It demonstrates how to access these assets via the browser and the importance of placing them within the 'assets' folder for public access. The paragraph also covers the 'web-icon.ico', the main entry point 'index.html', and the 'main.ts' file, which serves as the starting point for the Angular application. Additionally, it explains the role of 'style.css' for global CSS styles and component-specific styles in 'component.css' files.

Keywords

💡Angular

Angular is a platform and framework for building client-side applications using HTML, TypeScript, and other technologies. It is maintained by Google and is known for its robustness and scalability. In the video, Angular is the main subject, as the script discusses the structure and components of an Angular project, which is essential for understanding how to build and organize Angular applications.

💡Angular CLI

Angular CLI is a command-line interface tool that is used to initialize, develop, scaffold, and maintain Angular applications. It automates many aspects of development, such as creating new components or services. In the script, the CLI is mentioned as the tool used to generate the initial project structure and files, emphasizing its importance in streamlining the setup process for Angular projects.

💡Node Modules

The 'node_modules' folder is a directory in an Angular project where all third-party libraries and dependencies are stored. These libraries are typically installed via npm (Node Package Manager). The script explains that while this folder is crucial for development, it is not deployed to production servers and is excluded from version control repositories, such as Git.

💡npm install

The 'npm install' command is used to install all the dependencies listed in a project's 'package.json' file. This command is vital for setting up a new Angular project or after deleting the 'node_modules' folder, as it restores all necessary packages. The script illustrates this by showing how the command is used to reinstall dependencies after manually deleting the 'node_modules' folder.

💡package.json

The 'package.json' file is a manifest that includes important metadata about the project, such as its name and version. More importantly, it lists the project's dependencies and devDependencies, which are third-party libraries that the project relies on. The script discusses how 'npm install' reads this file to determine which packages to install, highlighting its role in managing project dependencies.

💡Dependencies

Dependencies in the context of an Angular project refer to the third-party packages that the application directly relies on to function. The script explains that these are listed in the 'dependencies' section of the 'package.json' file and are installed by 'npm install', ensuring that the project has all the necessary libraries to run.

💡Dev Dependencies

Dev Dependencies are packages that are used during the development process of an Angular project but are not required for the application to run in production. These are listed separately in the 'package.json' file and are used for tasks such as testing or building the project. The script clarifies the distinction between dependencies and devDependencies.

💡Source Folder

The 'src' folder is the directory in an Angular project where all the application's source code resides. It contains components, services, modules, and other essential parts of the application. The script emphasizes the importance of the 'src' folder as the primary location for developers to write and organize their Angular code.

💡Components

In Angular, a component is a fundamental building block of the application's UI. It consists of a TypeScript class, an HTML template, and optionally a CSS stylesheet. The script mentions components in the context of the 'app' folder, where the default app component is created, and explains that every Angular application must have at least one component.

💡Modules

An Angular module is a container for providing and organizing code into functional units of an application. Each module can have its own components, directives, and services. The script refers to modules when discussing the 'app.module.ts' file, which is the main module file for the default application in an Angular project.

💡Assets

The 'assets' folder in an Angular project is used to store static assets such as images, icons, and text files. These assets are made publicly accessible and can be referenced in the application's code. The script demonstrates how assets are served from this folder and how they can be organized into subfolders for better management.

💡index.html

The 'index.html' file is the main entry point for an Angular application. It is the HTML file that gets rendered in the browser when the application runs. The script explains that this file does not contain direct references to stylesheets or JavaScript files, as these are injected during the build process by the Angular CLI.

💡main.ts

The 'main.ts' file is the starting point of an Angular application. It is where the application's root module is bootstrapped, effectively starting the application. The script describes this file as analogous to a 'main' method in other programming languages, signifying its role in initiating the application's execution.

💡TypeScript

TypeScript is a superset of JavaScript that adds static types and other features to the language. Angular applications are written in TypeScript, which is then compiled to JavaScript that browsers can execute. The script mentions TypeScript in the context of the 'tsconfig.json' file, which contains settings for the TypeScript compiler.

💡Global CSS

Global CSS styles are styles that apply across the entire Angular application, regardless of the component. The script discusses 'style.css' as the place to define these global styles, as opposed to component-specific styles that would be placed in individual component CSS files.

Highlights

Angular CLI generates a set of files and folders required for a new Angular project.

Node modules folder stores third-party libraries used by the application and is not deployed in production.

The 'npm install' command is used to install dependencies after checking out code from a repository.

Package.json file contains project configurations and lists of dependencies and devDependencies.

Angular applications depend on the exact versions of installed dependencies recorded in package-lock.json.

The 'ng serve' and 'ng build' commands are used to start and build Angular projects, respectively.

EditorConfig file defines coding standards for a team environment to maintain consistency in code.

Gitignore file specifies which files and folders to exclude from the Git repository.

Angular.json file is crucial for project configuration, including styles, scripts, and the main entry point.

The Source folder contains all the application's source code, including components, services, and modules.

App folder within Source is used for creating components, services, and modules specific to the application.

Assets folder holds static assets like images and icons, which are publicly accessible.

Index.html is the main HTML file rendered in the browser when the Angular app runs.

Main.ts is the entry point of the Angular application, responsible for bootstrapping the AppModule.

Style.css contains global CSS styles applied to all components and directives in the application.

Each component has its own CSS file for styles specific to that component.

Angular has removed unnecessary files and folders in version 16, streamlining the project structure.

Transcripts

in this lecture we are going to have a

quick overview of angular files and the

folders which gets generated when we

first create the angular project and we

are going to understand the use of each

of them one by one in brief so whenever

we create a new angular project using

angular CLI it generates a bunch of

files and folders inside the project

directory as you can see this angular

ecart is our project directory and in

this project directory there are a bunch

of folders and files that have been

generated automatically when we used

angular CLI to create a new angular

project and we created this new angular

project using NG new command so when we

use NG new command using angular CLI it

creates a new project it generates a

bunch of files and folders which is

required for that project

and each file and folder has its own

purpose so let's see the use of some of

the important files and folders of

angular project which you should know

about and let's start with this node

modules folder so this folder is where

all the third party libraries get stored

on which our application might depend on

so when we work on our angular project

we might need to use some third-party

libraries and we might need to download

those third-party libraries from npm

so whenever we will download those

third-party libraries from npm those

libraries will get stored inside this

node modules folder now this folder it

is purely full development purpose and

we don't deploy this folder in

production server

also we don't check in this node modules

folder in our repo so let's say you're

using git as your code repo and you want

to share this project code with your

team members so what you will do is you

will push these files and folders in the

git repo and when you are going to push

these files and folders to the git repo

at that time you will not push this node

modules folder as I said it is purely

for the development purpose now you

might say Manoj you said that in this

node modules folder all the dependent

libraries and packages will be stored so

if we don't push this node modules

folder in the code repo or while

deploying it in the production then how

the angular application will work

because the angular application is

dependent on those third-party libraries

so how will this angular application

work

well what happens is so for example let

me go ahead and let me delete this node

modules folder

so now that node modules folder has been

deleted

now let's just assume that we have just

checked out this project code from the

git repo or any other repo so let's say

my teammate has checked in this project

code in the git repo or any other repo

and I have just checked out this code

from that repo and in there I don't have

the node modules folder in that case

this angular application is not going to

work because it is dependent on some

packages and since the node modules

folder is not there that means those

dependent packages are not available

this project is not going to work

so what do we do now well all we have to

do now is we can open Terminal here

okay or you can also use command prompt

let me clear the terminal here

and currently I am in the project folder

you see this is my project folder path

and in the project folder path I just

need to type an npm command npm

install

and then it is going to install all the

dependent packages on which this angular

project is dependent on

and it is again going to create that

node modules folder and in that node

modules folder we will have all our

dependent packages so if I go ahead and

if I press enter it is going to create

the node modules folder again and in

that node modules folder we will have

all our dependent packages

so you see this node modules folder has

been created and all the dependent

packages and libraries are being

downloaded and installed

all right so all the packages have been

installed again we have this node

modules folder and in there we will have

all our dependent packages

okay

now you might ask all right so we run

this NTM install command and it

installed all the dependent packages for

this angular project but how does it

know on which packages this angular

project is dependent on

that sphere this package.json file comes

into picture

so let's talk about this package.json

file now

this package.json file it is one

important file and this is a standard

configuration file which every node

project has now this is an angular

project but here we are going to install

packages from npm right so every project

which depends on npm will have this

package.json file

and in this package.json file you will

have some project related configurations

for example you can see the name of the

project the version of the project

currently it is set to 0.0.0 we can

change this version then you can see the

scripts which can be used in our angular

project for example in order to start

this angular project we use this NG

serve command in order to build this

angular project we can use this NG build

command okay and we have all other

Scripts then here we have two sections

dependencies and Dev dependencies and

these two sections stores all the third

party dependencies which this angular

project has

so for example this angular project is

dependent on these packages this at

angular slash animation at angular slash

common at angular slash Co let me

actually show you that we are using this

at angle slash Co in our project so

again if I go to tack component

if I open this app component.ts file you

see here we are importing component from

this angular slash Co package

okay so this angular project is

dependent on this package

so this package.json file it has all

those informations

okay and we also have some Dev

dependencies basically the difference

between dependencies and Dev

dependencies is that in the dependencies

you will have the list of all those

packages on which your project is

directly dependent on

but in the dev dependencies you will

have the list of all those packages on

which this angular project is dependent

on while we are developing this angular

project so these are all development

dependencies these are the tools which

we might need when we are developing our

angular application

okay so here you can see the list of all

the third party packages all the third

party libraries on which our project is

dependent on so when we type let me

clear the terminal again

when we type this npm install command it

is going to look inside this

package.json file it will check for all

the dependencies and all the dev

dependencies and it is going to download

and install all those third-party

packages

okay

so this is how npm install knows which

packages to install and store inside

this node modules folder

all right

then we have this Source folder we will

talk about it later let's go to this

editor config file here

so this file here it is basically used

to set up the team environment

so in a real project many developers may

work on a single project and each

developer may follow different coding

standards to declare variables classes

style size of each character length Etc

but in the end we need to merge the code

of each developer to produce the final

product right

and at that time it may produce some

error or messy code AS each developer is

having different coding standards

now in order to solve this problem this

edit config file is used where the

standard rules are defined which needs

to be followed by the developers in the

teamwork

and moreover the developers do not have

access to this file and only the manager

or the team lead who defines the rules

can only have access to this file

and in this file you can see all those

rules you can Define your own rules for

the coding standard as well now while

developing the angular application we as

a developer do not have to worry about

this edit a config file it is the

responsibility of the manager or the

team lead who will Define these coding

rules

okay let's close this file as well and

then we have this git igno file so let's

say your team is using git as the code

repo now when you are checking in your

code to the git repo you might not want

to check in all the files and folders in

the git repo right so in this file you

can specify the files and folders which

you want to exclude from your git

Repository

if you have these folders in your

angular project while checking in in the

git repo so these folders will be

ignored then you can see we are also

ignoring this node modules folder as I

mentioned we are not going to check in

the node modules folder in the repo

then if you have these files in your

project these will also get ignored

and you can specify all the folders and

files which you want to ignore which you

don't want to check into git repo so

let's say in my angular project I have

created a new folder

I will call it maybe temp

and in this step folder I am going to

keep all the files which is not required

for checking in for example in this temp

file I am going to keep some notes or

maybe the design document or something

like that

so I don't need to check in those files

in the git repo so I want to ignore this

file to be checked in into the git repo

for that I can simply go ahead and I can

include that folder here

so I can say slash

temp so this folder will be ignored and

all the files which we have inside this

folder that will also get ignored it

will not get checked in in the git repo

okay I hope it's clear let me go ahead

and let me delete this folder

then we have this angular.json file now

this angular.json file it is one of the

most important files and it contains all

the configuration of your angular

project

so here you can see the project related

configuration the project name is

angular cart project type it is an

application then we have all other

configurations for example

what are the style sheets we are going

to use and where to find it so we are

going to find the style.css in the

source folder then what are the scripts

we want to use we can specify it here

inside this array

here you can also see which file should

be loaded when the angular runs for the

first time in this case it is index.html

file which is present in the source

folder

what is the main entry point for the

angular application

in this case it is main.ts so all these

angular related configuration you will

find inside this angular.json file now

we are going to talk more about this

angular.json file in our next lecture

for now this should be it just keep in

mind that this angular.json file is the

most important file here and it contains

all the configuration related to our

angular project

now we already talked about this

package.json file we also have something

called as packagelog.json

now this package log.json file it

records the exact version of every

install dependency including its sub

dependencies and their versions

the purpose of package.log Json is that

it ensures that the same dependencies

are installed consistently across every

different environment for example we

might be deploying our angular

application in development environment

production environment integration

environment so in all these environments

the same version of all the dependencies

gets installed this job is taken care by

this package log.json file

then we have this readme file we don't

need to worry about this file

let's close this one

then another important file which we

have is this tsconfig.json file this

file it basically contains a bunch of

settings for your typescript compiler

and typescript compiler look at these

settings and based on these settings it

is going to compile your typescript code

into JavaScript that the browsers can

understand

but for most of the part we don't have

to worry about this ts.config file okay

let's close this one

let's also close this kit ignore

and now let's talk about this Source

folder so this Source folder is the most

important folder and you as a developer

will be spending a lot of time inside

the source folder

it is this Source folder in which we put

all our application source code so every

component service class modules

everything we need in order to create an

angular application that goes inside

this Source folder now whenever we

create an angular project by default

angular framework creates a lot of files

and folders within this Source folder

and you can see those folders and files

here

so first of all we have this app folder

this is the application folder whenever

you want to create any component service

or module you need to create it within

this app folder

okay so just remember that in an angular

project we can have multiple

applications

and by default we get one application

and that application is available inside

this app folder

and inside this app folder by default we

have one app component so these four

files together they create a component

and we are calling it as app component

and then we also have this app module.ts

file so again remember that every

application which we create in an

angular project every application will

have at least one module file okay so

every angular application must have at

least one component and one module in

this case for this application we have

one component so these four files

together will create one component and

we have one module

now we're going to talk about modules

and components in great detail in our

coming lectures so we will not worry

about that right now I will close this

app folder

then we have this assets folder now in

this assets folder we store all our

static assets for example images icons

text files Etc

and whatever we store inside this assets

folder that will be public and that can

be accessed for example let me go ahead

and let me add an image inside this

assets folder for that let me go to this

folder here I have this sample files

folder and in there I have an image I'll

just drag this image and open vs code

and I will put this image inside this

assets folder okay so here we have this

planet.jpg file now let's try to access

this file from the browser let me go to

the browser and there let's type root

URL which is this localhost colon 4200

then we have the assets folder and in

there we have Planet dot jpg if I press

enter you see that image has been

rendered here

so whatever file and folder you will

place inside this assets folder that

will be publicly accessible you can even

put it inside a folder so inside this

assets folder let me go ahead and let me

create a new folder I will call it

images

and in that images let me go ahead and

let me put this planet.jpg

okay so now if I go to the browser I

will have to specify that path so in the

assets folder

we have

images folder and in that images folder

we have planet.jpg and it is still

accessible

but if I go ahead and if I cut this

planet.jpg from here

so let me just cut it from here and let

me put it in some other folder

maybe let me put it inside this app

folder itself

and now if I go to the browser and if I

try to access this planet.jpg from that

app folder so if I say

app slash planet.jpg if I press enter

you see nothing is rendered here

so only those files and folders which

you put inside this assets folder only

that will be accessible publicly

so let me go ahead and let me move it

again inside this images folder

all right so in this assets folder we

keep all our public assets like icons

images text files Etc

then we have this web icon dot Ico

this is just a simple icon file which

will get displayed in the browser so if

I go to the browser

here you will see that Fab icon has been

rendered okay so based on your project

icon you can just replace this five icon

Ico with your application Fab icon

then we have this index.html file this

index.html file is the main HTML file

which gets rendered in the browser when

angular app runs and here in this

index.html file you will see that we

don't have any references to any style

sheets or JavaScript files this is

because all the dependencies will be

injected to this index.html file during

the build process by angular CLI and we

will talk about it more in our coming

lectures

then we have this main.ts file so this

main.ts is the typescript file and this

file is basically the starting point of

angular application

so in a lot of programming languages we

have this concept of main method which

is the starting point of the application

we have the same concept in angular also

in this main.ts file all we are doing is

we are bootstrapping this app module so

when we will run this angular

application it is going to execute this

main.ts file first and there it will

load this app module and everything else

will start from there and again we are

going to talk more about it in our next

lecture

then we have this style.css file this is

where we add all the global CSS styles

for our angular application

so whatever CSS style we will specify

here that will be applied to each

component and each directive

but for each component also we have a

CSS file we call it component.css and in

that component CSS file whatever style

we will specify that will only get

applied to that particular component for

example in this case if I write some CSS

style inside this appcomponent.css those

CSS Styles will only get applied on the

HTML elements of app component.html

but whatever style we specify inside the

style.css that will be applied globally

all right so these were some important

files and folders which we need to know

about when we are working with angular

project

in the older versions of angular you

will find more files and folders but

they have been removed from angular 16.

so we need not to worry about them

and here we have briefly talked about

each of these files and folders but as

we move along in this course you will

learn more about these files and folders

and the need of each of them

all right so this is all from this

lecture if you have any questions then

feel free to ask it thank you for

listening and have a great day