Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Angular 8 File Structure

File Structure in Angular 8: A file structure contains the files for one or more projects. A project is the set of files that comprise an application on a shareable library. An angular module is used to group related angular components, services, directives, etc.

Let see the structure of the Angular 8 app on VS code IDE for Angular development, and we can use either Web Storm IDE or Visual Studio IDE. Both are better. Here, we are using the VScode IDE.

Angular 8 File Structure

Files used in Angular 8 app folder

Angular 8 app files which are used in our project are below:

  • Src folder: It is the folder which contains the main code files related to our angular application.
Files used in Angular 8 app folder
  • app folder: It contains the files which we have created for app components.
  • app.component.css: The file contains theCSS(cascading style sheets) code in our app component.
  • app.component.html: The file contains the HTML file related to its app component. Itis the template file which is specially used by angular to the data binding.
  • app.component.spec.ts: This file is a unit testing file is related to the app component. This file is used across with more other unit tests. It is run from angular CLI by command ng test.
  • app.component.ts: It is the essential typescript file which includes the view logic beyond the component.
  • app.module.ts: It is also a typescript file which consists of all dependencies for the website. The data is used to define the needed modules has been imported, the components to be declared, and the main element to be bootstrapped.

Other Important Files in Angular 8

  • package.json: It is the npm configuration file. It includes details of our website’s and package dependencies with more information about our site being a package itself.
  • package-lock.json: This is an auto-generated and transforms file that gets updated when npm does an operation related to the node_modules or package.json file.
  • angular.json:It is a necessary configuration file related to our angular application. It defines the structure of our app and includes any setting to accomplish with the application.
  • .gitignore: The record is related to the source code git.
  • .editorconfig: This is a standard file which is used to maintain consistency in code editors to organizing some basics. such as indentation and whitespaces.
  • Assets folder: This folder is a placeholder for the resource files which are used in the application such as images, locales, translations, etc.
  • Environment folder: The environment folder is used to grasp the environment configuration constants that help when we are building the angular application.
  • Browser list: This file specifies a small icon that appears next to the browser tab of a website.
  • favicon.ico:It defines a small image that appears next to the browser tab of any website.
  • Index.html: It is the entry file which holds the high-level container for the angular application.
  • karma.config.js: It specifies the config file in the karma Test runner, Karma has been developed by the AngularJS team and can run tests for AngularJS and Angular 2+.
  • main.ts: This is the main ts file that will run; first,  It is mainly used to define the global configurations.
  • polyfills.ts: The record is a set of code that can be used to provide compatibility support for older browsers. Angular 8 code is written in ES6+ specifications.
  • test.ts:It is the primary test file that the Angular CLI command ng test will apply to traverse all the unit tests within the application.
  • styles.css: It is the angular application uses a global CSS.
  • tsconfig.json:This is a typescript compiler of the configuration file.
  • tsconfig.app.json: It is used to override the ts.config.json file with app-specific configurations.
  • tsconfig.spec.json: It overrides the tsconfig.json file with the app-specific unit test cases.