Angular is a JavaScript framework used to build client-side applications that use HTML, CSS, and a programming language like JavaScript. It is a collection of components that contains the code for executing the application and has an associated template that displays the data on the browser. Angular provides features like binding the data from the code to appear on the template, expressive HTML, and built-in packages to interact with different services, service for back-end integration, etc.

welcome

Angular comprises components, services, directives, modules, pipes, etc. These make our applications much more effective. There are so many applications built on Angular now. After the introduction of the Angular framework, there has been a shift in the world of web development, from AngularJS to Angular 9 (Ivy rendering engine). In 2009, it was developed by Misko Hevery and Adam Abrons as a side-project at Google to help build applications using HTML tags. The name Angular was chosen because of the use of the angular brackets used for HTML tags.

The basic structure of an Angular application

  • NgModules
  • Components
  • Directives
  • Services and Dependency Injection
  • Routing
  • Data Binding

We will look at each of these important concepts in detail in the upcoming lessons.

The architecture of a basic Angular application

architecture

The image above shows the architecture of a basic Angular application.

Important files to consider

To understand the flow of Angular and the framework’s ecosystem, let’s look at some files.

Starting with the first file that renders in the browser, index.html, it contains an entry point to the rest of our application, giving a reference to the root component by using the selector.

<app-root></app-root>

To specify which part will be rendered, it is mentioned inside the main.ts file using:

platformBrowserDynamic().bootstrapModule(AppModule)

This ensures that the App modules are the first to load at the bootstrapping of our application.

Some of the other important files in an Angular application are:

package.json - This is where you specify the dependencies and the scripts to operate in your application.

angular.json - This file provides the configuration defaults for build and development tools by the Angular CLI.

The new app that you create gets listed here under the projects section.

angular.json

"projects": {
  "app_name": {
    ...
  }
  ...
}

tsconfig.json Contains the configuration for the TypeScript compiler. Since the TypeScript needs to be compiler to JavaScript for the browser to understand, using the tsc compiler needs some config.

And many other files like styles file for global styling, polyfills for browsers support, etc.

In the next chapter, we will look at what are single-page applications and how we can create them with the help of Angular CLI.