Angular Introduction

Angular is a JavaScript framework that allows the building of reactive single-page client applications using HTML and Typescript. The very first version of Angular 1.0 is known as AngularJS.

“Angular is a complete rewrite of AngularJS by the same team that built AngularJS.”

Let’s first understand what Single Page Application is?

A single-page application is a web application or a website that provides users with a very fluid, reactive, and fast experience. It contains a menu, buttons, and blocks on a single page and when a user clicks on any of them; it dynamically rewrites the current page rather than loading entire new pages from a server.

Why was Angular introduced?

Traditionally, VanillaJS and jQuery were used by developers to develop dynamic websites. As the websites turned out to be more complex with added features and functionality, it was difficult for the developers to maintain the code. Moreover, there was no provision of data handling facilities across the views by jQuery. So, Angular was built to address these issues, thus, making it easier for the developers by dividing code into smaller bits of information that are known as Components in Angular. Client-side frameworks permit the development of advanced web applications like SPAs which, if developed by VanillaJS, is a slower process.

Features of Angular.

• Routing
• State Management
• RXJS Library
• Consistency
• Maintainability
• Code Reusability
• Catch Errors Early
• Command Line Interface
• Decorative UI
• Cross-Platform App Development
• Long-Term Google Support

Steps to start with Angular

• Install Node JS: Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. It is an open-source, cross-platform, back-end, JavaScript runtime environment that executes JavaScript code outside a web browser. To install Node, visit NodeJS.org
• Install NPM i.e. Node Package Manager: NPM is a package manager for the JavaScript programming language. Angular, the Angular CLI, and Angular applications depend on npm packages for many features and functions. NPM gets installed with the installation of Node JS.

# To check the installation: Go to command prompt and type “node -v and npm -v”

• Install the Angular CLI: The Angular CLI installs the necessary Angular npm packages and other dependencies. It helps us to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. The command to install Angular CLI `”npm install -g @angular/cli”`
• Create a workspace: Create a workspace in the desired location.Run the CLI command ng new and give the name to the app.The command to install Angular CLI `” ng new [<ProjectName>]”`
• Run the Application: First, navigate to the workspace created in the previous steps using the command `” cd TODOApp”`.

Finally, run the command `” ng serve — open”` to build and run the app.

# By default the application run in your browser to http://localhost:4200/,

We can change the port for the application in two ways :

• Permanent: Go to node_modules/angular-cli/commands/server. js ,search var defaultPort = process. env. PORT || 4200; and change 4200 to anything else you want.
• To Run: ng serve — port 4500 (You can change 4500 to any number you want to use as your port)

How does Angular Application works?

Every angular app consists of a file named angular.json. This file will contain all the configurations of the app.

• While building the app, the builder looks at the angular.json file to find the entry point of the application.
• Inside the build section, the main property of the options object defines the entry point of the application which in this case is main.ts.
• The main.ts files create a browser environment for the application to run and along with this, it also calls a function called bootstrap module which bootstraps the application.
• In the bootstrap module function, we call AppModule. The app module is declared in the app.module.ts. This module contains a declaration of all the components.
• AppComponent is getting bootstrapped. This component is defined in app.component.ts. This file interacts with the webpage and serves data into it.
• And finally, Angular calls the index.html file. This file consequently calls the root component that is app-root.

What are the key components of Angular?

• Components: The basic building blocks of angular applications to control HTML views. It is where we write our binding code.
• Modules: An angular application is divided into logical pieces and each piece of code is called modules that perform a single task. Module logically groups components.
• Templates: Templates represent the views of an angular application.
• Routing: Defines the routing strategy for the application
• Services: Reusable components that can be shared across the entire application.
• Metadata: This can be used to add more data to an angular class.

About the Author
Nirmal Kandwal is an Angular Developer here at Version 1.