Introduction
Angular is a powerful framework for single-page applications. During the initialization of a new project, the CLI creates some configuration and initialization files to allow the Angular project works nicely and in the desired way. In this article, I will explain default starting files and their usage.
New project generation
First of all, We need the project. For that, I will use the @angular/cli
command line tool, which the developer can install by typing in the command line:
npm install -g @angular/cli
-g
means I am installing it globally on my OS.
To create a fresh new project, I am typing:
ng new files-explanation
I am selecting all default values that are prompted by the CLI. The following section will explain files and directories placed at the root of a new project.
Root files and directories
-
.vscode
a directory that contains configuration files that allow better setup with Visual Studio Code, -
node_modules
a directory that contains all of the required javascript files that a necessary to run and develop the project -
src
is a directory that contains all source files that belong to our project, the content of that directory I will explain later, -
.editorconfig
is a configuration file that sets regular editor properties, for example,charset
or indent_size. More about that file can be found here -
.gitignore
tells git which directories or files should be omitted by the version control system; for example,node_modules
should exist in that file, -
angular.json
is a set of configuration properties that set up our workspace and how the project behaves. More about that can find in my other article -
package.json
file which lists npm packages and their respective version that are required by the project to run (dependencies
) and develop or build (devDependencies
); and commands that can be used with the current project, -
package-lock.json
file lists the exact versions of npm packages installed in the current project. It helps to provide precisely the identical versions when another developer is getting the code, -
README.md
- a documentation file, which typically contains starting information for developers that are going to work with the project, for example, how to set up the project, how to develop new features, etc., -
tsconfig.app.json
- a typescript configuration file, which defines how typescript is behaving in the current project in development files, -
tsconfig.spec.json
- like above, but for test files, -
tsconfig.json
- root typescript configuration file used by two previous files and shares common configuration properties. More about that file can be found here
Src files and directories
The app
directory contents are:
-
app.component.html
is a file that contains the HTML template of the AppComponent maid by default, -
app.component.scss|css
is a file that contains sass or css stylings that are applied to AppComponent content, -
app.component.spec.ts
is a typescript file that contains unit tests for the AppComponent, -
app.component.ts
is a typescript file that contains theAppComponent
class definition, which is used to declare the Angular component, -
app.module.ts
is another typescript file that contains theAppModule
class that defines the Angular module, which is loaded as the first module (by default),
The assets
directory is used to put any project assets like images, fonts, and other media files. By default, that directory is a bundle with the rest of the source files during the build phase. In the beginning, there is only one file, .gitkeep
, which tells git to not omit that directory if it is empty.
The rest of the src
files are:
-
favicon.ico
icon file, which is used as a website icon, -
index.html
starting HTML file, which is used by servers to display the application (by default), -
main.ts
file, which bootstraps the whole application. Inside that file, You can place other methods or script calls that should run when the application starts. It is also a place where You define which module or component should be used as a root one, -
style.scss|css
root styling file, which is used to define stylings applied to the whole application.
Summary
The Angular CLI creates those files, which helps developers to save a lot of time on file creation and application structure and defines all of the requirements that are needed at the beginning. That doesn't mean, of course, that We are limited to those files only.
Top comments (0)