Angular Essentials

The Essential Guide to Learn Angular

Dhananjay Kumar

• Publisher: BPB Publications
• Year: 2019
• ISBN:
  9789388511247
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Basic to Advance learning of Angular concepts. Key Features

• A complete overview of the key aspects of Angular
• Up to date with the latest Angular release
• The book covers the framework's mental model, API, and the design principles behind it.

Description
This book is an Essentials guide for every Angular developer. It covers all required topics an Angular developer need to get started. This book is written in Angular version 7 and explains vital concepts of Angular in extremely descriptive way with lot of code examples. What You Will Learn

• Components & Binding, Web API
• SPAs & Routing, Template Driven Forms
• Forms, HTTP
• Unit Testing, ngModel, Angular Directives
• Pipes, Ignite UI,

Who This Book Is For

• Students of Polytechnic Diploma Classes- Computer Science/ Information Technology
• Graduate Students- Computer Science/ CSE / IT/ Computer Applications
• Master Class Students—Msc (CS/IT)/ MCA/ M.Phil, M.Tech, M.S.
• Industry Professionals- Preparing for Certifications
• 
  Table of Contents
• Introduction
• Component and Data Binding
• Components Communications
• Angular Directives
• ViewEncapsulation in Angular
• Pipes
• Template Driven Forms
• Reactive Forms
• Angular Routing
• Change Detection
• Services and Providers
• Working with API and $http
• Advanced Components
• About the Author
  Dhananjay Kumar is winner of 9 Microsoft MVP Awards and organizer of India's Angular Conference ng-India. He works as Developer Evangelist for Infragistics. He has authored more than 900 articles on his blog https://debugmode.net/ and has delivered more than 75 talks in various conference across the world. He lives in Gurgaon, India and when not working spends time in reading, running, climbing mountains, or writing poetry. Twitter: www.twitter.com/debug_mode LinkedIn: www.linkedin.com/in/dhananjaykumar07/
  

CHAPTER 1

Introduction

In this chapter, you will learn about what is Angular, how it is used, and setting up the development environment. Following topics will be covered in this chapter:

• What is Angular
• How is Angular different from AngularJS
• Angular's basic architecture
• Angular CLI
• Creating your First App

What is Angular

Angular is a widely used web application platform and framework created and maintained by Google. It serves as a total rewrite to AngularJS, and the Angular name is meant to include all versions of the framework starting from 2 and up.

TypeScript is the core of Angular, being the language upon which Angular is written. As such, Angular implements major and core functionalities as TypeScript libraries while building client applications with additional HTML.

For a variety of reasons, Angular has grown in popularity with developers. It lends itself to maintenance ease with its component and class-based system, modular building, hierarchical structure, and simple, declarative templates. Furthermore, its cross-platform capabilities are advantageous to enterprise and SMB developers, including its speed with server-side rendering.

Angular is a structural framework, which makes it easy to build dynamic web apps. It is a platform that gives developers the power to build applications that reside on web, mobile, or the desktop. In 2009, Angular started as a side-project by Misko Hevery and Adam Abrons to help developers build applications using simple HTML tags. It was named Angular due to the fact that HTML tags are surrounded by these angle brackets <>. The team of developers at Google then kept on releasing the updated versions of Angular and at the time of writing this, current version being used is 7.0.

This essential book will go over the essential pieces of Angular and the main concepts behind working with the ever-growing platform for web-based applications.

How is Angular Different from AngularJS?

In the past, you might have worked with or learned about AngularJS. There are a few main differences between the two that you need to know about:

• Modularity: More of Angular's core functionalities have moved to modules.
• Hierarchy: Angular has an architecture built around a hierarchy of components.
• Syntax: Angular has a different expression syntax for event and property binding.
• Dynamic loading: Angular will load libraries into memory at runtime, retrieve and execute functions, and then unload the library from memory.
• Iterative callbacks: Using RxJS, Angular makes it easier to compose asynchronous or callback-based code.
• Asynchronous template compilation: Angular, without controllers and the concept of scope, makes it easier to pause template rendering and compile templates to generate the defined code.
• TypeScript: Angular includes ES6 and its superset, TypeScript.

Angular's Basic Architecture

Here's a brief overview of the architecture involved and the building blocks that I'll cover in this piece:

• NgModules: Declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a related set of capabilities.
• Components: Defines a class that contains application data and logic and works with an HTML template that defines a view.
• Template: Combines HTML with Angular markup that can modify HTML elements before they're displayed.
• Directive: Attaches custom behavior to elements in the DOM.
• Two-way data binding: Coordinates the parts of a template with the parts of a component.
• Services: Typically, a class used to increase modularity and reusability with a narrow and well-defined purpose.
• Dependency injection: Provides components with needed services and gives access to a service class.
• Routing: Defines a navigation path among the different application states lets you view application hierarchies.

Angular CLI

Setting up an Angular project requires many steps, such that:

• Setting up TypeScript compiler
• Setting up Webpack
• Setting up local web development server
• Configuring Unit Test environment

All these tasks are taken care by Angular CLI. Angular Command Line Interface is a command line tool for creating Angular apps. It is recommended to use angular CLI for creating angular apps as you don't need to spend time installing and configuring all the required dependencies and wiring everything together. It provides you with boilerplates and saves your time. It uses Webpack to include all the packaging, importing, BrowserLink etc. all the Webpack configuration is done completely by CLI and the developer needs ...