Getting Started with Angular: part 2

Introduction to angular folder structure and CLI-commands

In the previous article, we have set up our local environment for the angular application and created our first angular application and compiled it. so in this article, we are gonna see the folder structure and CLI commands for angular

All Angular CLI commands

Angular CLI is a command-line interface tool that is used to initialize, develop, scaffold, and maintain Angular applications. You can use these commands directly on command prompt or indirectly through an interactive UI i.e. Angular Console.

ng new Command

The ng new command is used to create a new angular application

1. ng new <app-name>

ng Serve Command

The ng new command is used to compile our angular application so after compilation the app appears on http://localhost:4200

1. ng serve

ng generate Command

The ng generate command is used to generate and/or modify file based on schematic.

1. ng generate <schematic> [options]
2. ng g <schematic> [options]

Parameter Explanation:

<schematic >: It specifies the schematic or collection:schematic which you want to generate. It can take one of the following sub-commands.

• component
• service
• directive
• guard
• interface
• module

Schematic Command Explanation

component

It is used to create a new generic component definition in the given or default project.

Syntax:

1. ng generate component <name> [options]
2. ng g component <name> [options]

Service

It is used to create a new service in the given or default project.

Syntax:

1. ng generate service <name> [options]
2. ng g service <name> [options]

directive

It is used to create a new generic directive definition in the given or default project.

Syntax:

1. ng generate directive <name> [options]
2. ng g directive <name> [options]

guard

It is used to generate a new, generic route guard definition in the given or default project.

Syntax:

1. ng generate enum <name> [options]
2. ng g enum <name> [options]

interface

It is used to create a new generic interface definition in the given or default project.

Syntax:

1. ng generate interface <name> <type> [options]
2. ng g interface <name> <type> [options]

module

It is used to create a new generic NgModule definition in the given or default project.

Syntax:

1. ng generate module <name> [options]
2. ng g module <name> [options]

Angular App files explanation

See the structure of the Angular app on Visual studio code (how it looks on IDE). For Angular development, you can use either Visual Studio Code IDE or WebStorm IDE. Both are good. Here, we are using JetBrains WebStorm IDE.

Files used in Angular App folder

Angular App files which are mainly used in your project are given below:

• src folder: This is the folder that contains the main code files related to your angular application.
• app folder: The app folder contains the files, you have created for app components.
• app.component.css: This file contains the cascading style sheets code for your app component.
• app.component.html: This file contains the HTML file related to the app component. This is the template file that is used by angular to do the data binding.
• app.component.spec.ts: This file is a unit testing file related to the app component. This file is used along with other unit tests. It is run from Angular CLI by the command ng test.
• app.component.ts: This is the most important typescript file which includes the view logic behind the component.
• app.module.ts: This is also a typescript file that includes all the dependencies for the website. This file is used to define the needed modules to be imported, the components to be declared and the main component to be bootstrapped.

Other Important files

• package.json: This is the npm configuration file. It includes details about your website’s package dependencies along with details about your own website being a package itself.
• package-lock.json: This is an auto-generated and modified file that gets updated whenever npm does an operation related to node_modules or package.json
• angular.json: It is a very important configuration file related to your angular application. It defines the structure of your app and includes any settings associated with your application. Here, you can specify environments on this file (development, production). This is the file where we add the Bootstrap file to work with Angular.
• .gitignore: This file is related to the source control git.
• .editorconfig: This is a simple file that is used to maintain consistency in code editors to organize some basics such as indentation and whitespaces.
• assets folder: This folder is a placeholder for resource files that are used in the application such as images, locales, translations, etc.
• environments folder: The environments folder is used to hold the environment configuration constants that help when building the angular application. The constants are defined in 2 separate .ts files (environment.ts and environment.prod.ts), where these constants are used within the angular.json file by the Angular CLI. For example, if you run the ng build command, it will build the application using the development environment settings, whereas the command ng build? prod will build the project using the production environment settings.
• browser list: This file is used by autoprefixer that adjusts the CSS to support a list of defined browsers.
• favicon.ico: This file specifies a small icon that appears next to the browser tab of a website.
• index.html: This is the entry file that holds the high-level container for the angular application.
• karma.config.js: This file specifies the config file for the Karma Test Runner, Karma has been developed by the AngularJS team which can run tests for both AngularJS and Angular 2+
• main.ts: As defined in the angular.json file, this is the main ts file that will first run. This file bootstraps (starts) the AppModule from app.module.ts, and it can be used to define global configurations.
• polyfills.ts: This file is a set of code that can be used to provide compatibility support for older browsers. Angular code is written mainly in ES6+ language specifications which is getting more adopted in front-end development, so since not all browsers support the full ES6+ specifications, polyfills can be used to cover whatever feature missing from a given browser.
• styles.css:/ This is a global CSS file that is used by the angular application.
• tests.ts: This is the main test file that the Angular CLI command ng test will use to traverse all the unit tests within the application and run them.
• tsconfig.json: This is a typescript compiler configuration file.
• tsconfig.app.json: This is used to override the tsconfig.json file with app-specific configurations.
• tsconfig.spec.json: This overrides the tsconfig.json file with app-specific unit test configurations.

That's it, friends I hope this article may helped you!

Please let me know in the comments if you face any issues or need any help. See you in the next article.