#04 Angular files and folder structure| Getting Started with Angular | A Complete Angular Course
Summary
TLDRThis 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
📁 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.
📝 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.
🛠️ 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.
🌐 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.
Mindmap
Keywords
💡Angular
💡Angular CLI
💡Node Modules
💡npm install
💡package.json
💡Dependencies
💡Dev Dependencies
💡Source Folder
💡Components
💡Modules
💡Assets
💡index.html
💡main.ts
💡TypeScript
💡Global CSS
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
関連動画をさらに表示
#03 Editing the First Angular Project | Getting Started with Angular | A Complete Angular Course
#02 Creating a new Angular Project | Getting Started with Angular | A Complete Angular Course
FAQs Angular Maximilian Schwarzmuller
React tutorial for beginners ⚛️
#14 What is Data Binding | Angular Components & Directives | A Complete Angular Course
#09 Styling View Template | Angular Components & Directives| A Complete Angular Course
5.0 / 5 (0 votes)