Object Oriented Programming with Angular

Build and Deploy Your Web Application Using Angular with Ease ( English Edition)

Balram Morsing Chavan

• Publisher: BPB Publications
• Year: 2020
• ISBN:
  9789389328363
• Topic: Informatique
• Subtopic: Programmation Web

Learn advanced techniques and best practices of Angular programming for building enterprise web applications Key Features

• Get familiar with the core concepts of Angular.
• Discover best practices, tips, and tricks while working with Angular.
• Learn how to architect data driven web applications.
• Explore methods to pass data between components in Angular.
• Learn how to deploy and secure your Angular application.
• 
  Description
  Angular is a Single Page Application (SPA) development framework open-sourced by Google. The Angular framework is written in TypeScript language, which enables a web developer to write JavaScript code in Object-Oriented fashion. TypeScript makes it easier to build a client-side web application with classes, interfaces, generics, inheritance, and other Object-Oriented features. TypeScript compiler takes care of transpiling these features into native JavaScript. Angular is a framework that comes with Dependency Injection, HTTP communication, Forms, and other features out of the box. This book will leverage on your prior programming knowledge to learn Angular. Microsoft.Net stack, C#, Windows Forms, WPF, ASP.NET have been widely used for developing desktop and web applications. We shall be referring to concepts from these technologies with Angular whenever applicable; thus having prior experience would be a great advantage. This book takes you from the basics of TypeScript language to building modular and robust enterprise web applications and deployment. What you will learn
  
• Learn how to orchestrate complex Angular applications.
• Get to know more about Dependency Injection in depth.
• Learn how to build template and dynamic forms in Angular.
• Learn how to use Angular routes in an application.
• Learn how to communicate with backend services using HTTP.
• 
  Who this book is for
  This book is for readers who want to learn Angular. Having a basic Object-Oriented programming knowledge, programming experience with C#.Net/Java, and hands-on web development experience would be an added advantage. Table of Contents
  1. Typescript – the underdog
  2. Hello, Angular!
  3. Building small and simple
  4. Data Binding and Pipes
  5. NgModule - in depth
  6. Dependency Injection and Services
  7. Building forms
  8. Communication within Components
  9. Consuming HTTP Resources
  10. Routing Angular application
  11. Deployment and tools About the Author
  Balram Chavan is a software professional having 11+ years of relevant experience working in cross domains. He has been awarded with GitHub Developer Program Membership for his contribution to open source world. He also contributes to multiple technology blogs and forums. Balram has also published many npm.js packages for Angular framework. LinkedIn Profile: https://www.linkedin.com/in/balram-chavan/
  

CHAPTER 1

Typescript – The Underdog

Introduction

JavaScript is a dynamic, weakly typed, and prototype-based programming language. It is one of the implementations of the European Computer Manufacturers Association Script (ECMAScript) or simply ES specifications. All standard browsers must accord to ES specifications but can differ in version. Hence few JavaScript keywords/functions/syntax works with few browsers and not with others. To bridge this gap, polyfills libraries exist, but they are not the silver bullets, though.

In October 2012, Microsoft released Typescript – an open-source programming language that is heavily inspired by C#.NET and Java syntax. It is a superset of ECMAScript 5 (that is, JavaScript). Typescript allows a developer to write a web application in an Object-Oriented model, thus allowing constructs like class, inheritance, interfaces, generics, and so on, available to JavaScript developer. All Typescript programs get transpiled into plain JavaScript, which browsers or JavaScript rendering engines (like Google V8) can render. If you have Object Oriented programming background, then you will find Typescript very easy to grab. One of the hurdles with JavaScript is that it is weakly typed language. Without strongly typed language, writing commercial or enterprise-level web applications is not easy. Of course, we can write a well-structured JavaScript application, but it requires expertise and knowledge of subtle rules and features of JavaScript.

Angular has been wholly written in Typescript. In an earlier version of Angular (that is, Angular 2), it was possible to write Angular application using JavaScript as well. You can also write an Angular application using the Dart programming language.

https://webdev.dartlang.org/angular

Tip: Since Angular + Dart combination is not that popular with the web community, Google team has launched another framework called “Flutter” for building a hybrid mobile application using Dart and React like syntax.

Before diving into Angular code, I always strive to have my audience have a clear understanding between Typescript code and Angular framework code. The goal of this chapter is to get you experienced with Typescript constructs and techniques.

Structure

• Basic Data Types
  • Numbers
  • Boolean
  • String
  • Array
  • Tuple
  • Enums
  • Object
  • Void
  • Null and Undefined
  • Never
• Variable Declaration
  • Let
  • Var
  • Const
  • Declare
• Functions
  • Regular functions
  • Anonymous functions
  • Arrow functions
• Classes and Interfaces
• Inheritance
• Interface
• Type Conversion
• Union Types
• Generics
• Decorators
• Modules and Namespaces
• Advance types
  • Static
  • Readonly and Const
  • String and Number literal Types
  • Type Aliases

Objective

This chapter aims to cover the basics of the TypeScript language. The Angular framework has been built using TypeScript; thus, understanding it is very crucial. We will get into the most commonly used language features and syntax and keep learning more throughout the rest of the book.

Basic Data Types

Every programming language has data types of holding data for the program. Typescript provides basic data types similar to JavaScript and advanced data types like high-rank language like C#.NET or Java.

Number

Like JavaScript, all numeric values are stored in a number data type. If we are coming from C#/ Java languages, then for numeric data types like int, long, float, double, decimal, and so on, we will have to settle down with number data type in Typescript. Note that to store hexadecimal number, prefix value with 0x, for binary number prefix with 0b and octal number prefix with 0o (zero and small letter O). Please refer to Code 1.1 for an example:

let intData: number = 100;

let floatData: number = 20.53;

let longData: number = 9873423524523442319;

let hexData: number = 0x1f2d3;

let binaryData: number = 0b1001;

let octalData: number = 0o1373;

Code 1.1: number data type usage

Boolean

Like C# and Java, we can store true or false value in the boolean data type. Nevertheless, we cannot store a positive number as true value or 0 for false. Note that null and undefined are valid values for a boolean data type, which is not the case with C#. Please refer to Code 1.2 for an example:

let isTypescriptGreat: boolean = true; // works

let noOldStyleBool: boolean = 0; // compiler error

let nullIsValid: boolean = null; // works - no compiler error

let undefinedIsValid: boolean = undefined; // works - no compiler error

Code 1.2: boolean data type usage

String

Typescript has a string data type to hold a string value. The string value can be provided in a single quote or double quote. A string can also contain variable within template expression format if a string is between backquote. A template expression can be any legal Typescript code put inside ${expression} string. Please refer to Code 1.3 for an example:

let bestLanguage: string = ‘Typescript’;

let bestFramework: string = “Angular”;

let templateExample: string = ‘I love ${bestLanguage} and ${bestFramework}!!!’;

Code 1.3: string data type usage

Array

With the Array data type, we can store a collection of values of other data types. Array in Typescript is similar to C#. Array data types provide some basic built-in functions like sort, reverse, and so on. Unlike C#, Typescript Array is an implementation of Stack data structure. There are Push() and Pop() stack methods available out of the box. In C#, we get a separate data type called Stack apart from the basic array data type. We can also use the generic implementation of Array<data_type> version of Array. Please refer to Code 1.4 for an example.

let oddNumbers: number[] = [1, 3, 5, 7, 9];

oddNumbers.push(11);

const lastValue = oddNumbers.pop();

let evenNumbers: Array<number> = [0, 2, 4, 6, 8];

evenNumbers.push(10);

const lastEvenValue = evenNumbers.pop();

Code 1.4: array data type us...