Angular Essentials
()
About this ebook
From the initial structuring to deployment, Angular Essentials provides step-by-step guidance to Angular, Google’s for building applications for both Web and Mobile platforms.
This free eBook from Infragistics begins by teaching you the basics of TypeScript, ES6 concepts, Angular 2 architecture, and details about the working environment you need to start building Angular 2 components. You’ll dive into Components, Directives, Routing, and Services, as well as techniques like Data Binding and Data Transformation. Finally, you’ll learn advanced Angular 2 skills for testing, debugging, deployment, and security.
In this book, you'll:
Learn the different features of components, and how to apply custom templates and styles
Explore the built-in directives of Angular
Discover how data and events can be bound in Angular 2 applications
Use data-driven and template forms in Angular
Format data using built-in pipes and by creating custom pipes
Add multiple views, send parameters and sub-views in Angular applications
Test Components, Services, HTTP calls and forms
Debug Angular applications and bundle them with webpack
Implement authentication in Angular apps and make secured calls to APIs
As a bonus, this Special Edition of Angular Essentials comes with guided learning chapters for Ignite UI.
Related to Angular Essentials
Related ebooks
Getting Started with Angular - Second Edition Rating: 0 out of 5 stars0 ratingsLearn AngularJS in 24 Hours Rating: 0 out of 5 stars0 ratingsObject Oriented Programming with Angular: Build and Deploy Your Web Application Using Angular with Ease ( English Edition) Rating: 0 out of 5 stars0 ratingsModern JavaScript Applications Rating: 0 out of 5 stars0 ratingsAngular 2 Components Rating: 0 out of 5 stars0 ratingsAngular in Action Rating: 0 out of 5 stars0 ratingsAngular JS for Beginners: Your Guide to Easily Learn Angular JS In 7 Days Rating: 2 out of 5 stars2/5RESTful API Design - Best Practices in API Design with REST: API-University Series, #3 Rating: 5 out of 5 stars5/5Spring Boot and Single-Page Applications: Securing Your API with a Single-Page Application Frontend - Second Edition Rating: 0 out of 5 stars0 ratingsMastering React.js: Modern Web Development Rating: 0 out of 5 stars0 ratingsMEAN Web Development Rating: 5 out of 5 stars5/5Ian Talks JavaScript Libraries and Frameworks A-Z: WebDevAtoZ, #4 Rating: 0 out of 5 stars0 ratingsSpring Boot Intermediate Microservices: Resilient Microservices with Spring Boot 2 and Spring Cloud Rating: 0 out of 5 stars0 ratings50 Recipes for Programming Angular Rating: 4 out of 5 stars4/550 Recipes for Programming Node.js Rating: 3 out of 5 stars3/5ReactJS by Example - Building Modern Web Applications with React Rating: 4 out of 5 stars4/5Clean Code in JavaScript: Develop reliable, maintainable, and robust JavaScript Rating: 5 out of 5 stars5/5React: Building Modern Web Applications Rating: 5 out of 5 stars5/5React Deep Dive Rating: 5 out of 5 stars5/5React.js Essentials Rating: 4 out of 5 stars4/5Step-by-Step Angular Routing: Learn To Create client-side and Single Page Apps with Routing and Navigation Rating: 0 out of 5 stars0 ratingsJavaScript and JSON Essentials Rating: 5 out of 5 stars5/5Mastering JavaScript Design Patterns Rating: 4 out of 5 stars4/5React Projects: Build 12 real-world applications from scratch using React, React Native, and React 360 Rating: 0 out of 5 stars0 ratingsNode.JS Guidebook: Comprehensive guide to learn Node.js Rating: 0 out of 5 stars0 ratingsObject-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications, and libraries Rating: 3 out of 5 stars3/5Web Development with MongoDB and Node.js Rating: 0 out of 5 stars0 ratings
Software Development & Engineering For You
Learn to Code. Get a Job. The Ultimate Guide to Learning and Getting Hired as a Developer. Rating: 5 out of 5 stars5/5Learning Python Rating: 5 out of 5 stars5/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5Hand Lettering on the iPad with Procreate: Ideas and Lessons for Modern and Vintage Lettering Rating: 4 out of 5 stars4/5PYTHON: Practical Python Programming For Beginners & Experts With Hands-on Project Rating: 5 out of 5 stars5/5Python For Dummies Rating: 4 out of 5 stars4/5Android App Development For Dummies Rating: 0 out of 5 stars0 ratingsData Visualization: a successful design process Rating: 4 out of 5 stars4/5Ry's Git Tutorial Rating: 0 out of 5 stars0 ratingsManaging Humans: Biting and Humorous Tales of a Software Engineering Manager Rating: 4 out of 5 stars4/5SQL For Dummies Rating: 0 out of 5 stars0 ratingsAgile Practice Guide Rating: 4 out of 5 stars4/5OneNote: The Ultimate Guide on How to Use Microsoft OneNote for Getting Things Done Rating: 1 out of 5 stars1/5Adobe Illustrator CC For Dummies Rating: 5 out of 5 stars5/5Beginning Programming For Dummies Rating: 4 out of 5 stars4/5Tiny Python Projects: Learn coding and testing with puzzles and games Rating: 4 out of 5 stars4/5Wordpress 2023 A Beginners Guide : Design Your Own Website With WordPress 2023 Rating: 0 out of 5 stars0 ratingsBlender 3D Printing Essentials Rating: 0 out of 5 stars0 ratingsEngineering Management for the Rest of Us Rating: 5 out of 5 stars5/5Photoshop For Beginners: Learn Adobe Photoshop cs5 Basics With Tutorials Rating: 0 out of 5 stars0 ratingsHow to Write Effective Emails at Work Rating: 4 out of 5 stars4/5Level Up! The Guide to Great Video Game Design Rating: 4 out of 5 stars4/5Reversing: Secrets of Reverse Engineering Rating: 4 out of 5 stars4/5Gray Hat Hacking the Ethical Hacker's Rating: 5 out of 5 stars5/5Programming Problems: A Primer for The Technical Interview Rating: 4 out of 5 stars4/5Succeeding with AI: How to make AI work for your business Rating: 0 out of 5 stars0 ratingsCoding All-in-One For Dummies Rating: 0 out of 5 stars0 ratings
Reviews for Angular Essentials
0 ratings0 reviews
Book preview
Angular Essentials - Infragistics Inc
ECMAScript Overview
ECMASCRIPT IS A LANGUAGE standardized by ECMA International and overseen by the TC39 committee. JavaScript is a language based on the implementations of ECMAScript. In June 2009, the 5th edition of ECMAScript called ECMAScript 5 or ES5, was standardized. This standard was implemented by all modern browsers.
In June 2015, the ECMAScript committee released a major update of the specifications and added some much-needed features to make the job of JavaScript developers much easier. This 6th edition of ECMAScript was previously called ECMAScript 6 or ES6. It has now been renamed ECMAScript 2015.
In June 2016, ECMAScript 2016—the 7th edition of ECMAScript was released.
Describing all of the improvements made by ECMAScript 2015 would require an entire book. Instead, this chapter will serve as an overview of some basic features that we'll use throughout this book. If you are interested in a deep dive in ES6, you may refer to: https://hacks.mozilla.org/category/es6-in-depth/
.
This chapter assumes that you have basic working knowledge of JavaScript and have worked on at least one object-oriented language such as C# or Java.
Note: The ECMAScript 2015 and 2015 standard has been implemented in most modern browsers, but not in all of them. To use ECMAScript 2015 code in browsers that support ES5, you can use transpilers
which takes ES6 code and converts it to its ES5 equivalent that most browsers can understand. To check for a list of features supported by a particular browser or a transpiler, visit the ES6 compatibility table: http://kangax.github.io/compat-table/es6/
.
New ECMAScript 2015 Features
Block scoping with let and const keywords
Up to ECMAScript 5, JavaScript variables had only two types of scopes: global and function. JavaScript lacked the block scope—a scope where variables are declared to be made as local as possible.
Consider this piece of code:
Listing 1.1: for loop variable
After running this code, you’ll see the following output on the console:
For a programmer who has worked on any other programming language like C, C# or Java, declaring tmp inside a for loop means the intent is to use tmp only within the context of that loop. The tmp variable should not be accessible outside the loop. The expected output would be an error saying tmp is undeclared.
However, in ECMAScript 5, the tmp variable actually scopes itself to the enclosing function, which can be confusing.
To eliminate this confusion, ECMAScript 2015 introduces the block scope. Block scoping works on the bracket level, rather than the function level. This allows the scope of the variable to be limited to only the block in which it is declared. ECMA members could not change the behavior of the var keyword, as that would break backward compatibility. Hence, two new keywords were introduced: let and const.
To understand let and const, and the difference from var, let us first consider the following statements, declared outside a block:
The first statement creates a global variable, which is a property of the global object.
The second statement creates a global variable, however, this variable does not belong to the global object.
The third statement is a global constant, and is not a property of the global object.
Let keyword
Simply put, let is the new var. However, the let keyword allows JavaScript developers to define block-level variables, rather than global variables or function block variables.
Consider the same example as seen in Listing 1.1, albeit with the let keyword instead of var.
With the let keyword, the output is as expected. In a strict mode, the last statement would throw an error as tmp is not declared at the function level.
Const keyword
In ECMAScript 5, there is no direct way to define a constant. ECMAScript 2015 solves this problem with the const keyword.
Like let, const also has a block-level scope, but it requires you to provide an initializer before you can use it. Moreover, once you declare a variable using const, you can't change its value.
While the first output is Suprotim, the second output is TypeError: Assignment to constant variable
, since you cannot change the value of the constant once it's created.
Note: const has nothing to do with immutability of values. When it is said that its value cannot be changed, what is meant is that there is a flag set on the identifier binding, and it is this binding that is immutable.
Template literals
Template literals are a new way to define strings. Since template literals are declared using backticks (`) as shown here:
You can now do the following without having to escape double quotes:
Template literals look better and are easier to read, especially when used in multi-line strings, and while concatenating strings. Here’s an example:
Output:
As you can see, in concatStr we had to resort to messy concatenations, and escape sequences. However, using the new template literals feature of ECMAScript 2015, we were able to use backticks (`) and placeholders ${} to achieve the same output.
These placeholders can contain any JavaScript expression including a variable, object property access, and even function calls. These tag expressions get called with the processed template literal, which you can then manipulate before outputting them.
Arrow Functions
Arrow functions allow you to write an inline function that can be passed in to another function. Arrow functions were introduced in ECMAScript 2015. They are syntactically very similar to C# lambda functions.
Here’s an example of using an Arrow function:
The first example uses a JavaScript function.
The second example uses Arrow function in a statement body.
The third example uses Arrow function in an expression body.
One huge advantage of the Arrow function is that it retains the lexically-scoped ‘this’ variable. In other words, arrow functions share the same lexical this as their surrounding code. Sometimes when the lexical scope of ‘this’ changes, you lose track of what it was referring to. However, with Arrow functions, the value of ‘this’ is preserved.
Classes and Inheritance
Despite the fact that we cannot compose classes in JavaScript as we do in Object Oriented languages, we can compose comparative constructs using the prototype property of Objects. There is a learning curve around the prototype property before one can start utilizing it serenely to compose OOPs like code in JavaScript. To ease this learning curve, ECMAScript 2015 uses classes. Classes in ECMAScript 2015 are similar to prototype-based inheritance
. You can consider them as syntactic sugar over the latter.
Using ECMAScript 2015 classes, we can write classes, create objects, inherit and override features of parent class inside child classes.
Here’s an example of using Classes and Inheritance in ECMAScript 2015:
Listing 1.2 Classes and Inheritance in ES6
Classes can be inherited from other classes using the extends keyword. In this code, we have a parent class Person, and a child class Employee that is an extension of the Person class. Here Person is also referred to as the superclass, whereas as Employee is referred to as subclass.
The constructor is a function that gets called when you create a new instance of the class. In our example, we have used let supro = new Employee(Suprotim
, 37
, Curry guy
); to invoke the constructor.
Note: In JavaScript, there can only be one constructor for a class.
super is used in subclass Employee to refer to the superclass Person. Note that in the constructor of Employee, we are calling super as if it were a function. Internally, this calls the superclass Person’s constructor function, and initializes the new object that was created by the keyword new.
super can also be used to access all members of a parent class. In Listing 1.2, we are using super.printName() in Employees printName() method, to call the superclass Person’s printName() method.
Running the code in Listing 1.2 will produce the following output:
Note: Object.create can be used to do prototypical inheritance without using constructor functions.
Modules
In ECMAScript 2015, a module is a file containing JavaScript code. ECMAScript supports exporting and importing modules across different files.
There’s no module keyword per-se in ECMAScript 2015. A module is just like a script, except that it is in strict-mode and contains import and export keywords.
export: All members of a module are local to it. In order to make it public, use the export keyword.
import: When you run a module with an import declaration, the imported modules are loaded first, then the module body is executed.
Let’s take the example of a simple add.js file:
Here we are exporting functions along with variables one by one.
To use it inside another file, say test.js, do the following:
Here we are importing only the num variable from add.js.
We can also import everything inside add.js using import *:
Note: You can export all members of a Module using export *.
Conclusion
This chapter presented a quick overview of some ECMAScript 2015 features that you will be using throughout this book. For a detailed tutorial, reference: https://hacks.mozilla.org/category/es6-in-depth/
.
Try Infragistics Ignite UI Free: Infragistics.com/ignite-ui
Download the Code: infragistics.com/products/ignite-ui/angular-essentials-get-the-code
Chapter 2TypeScript Overview
IN THE FIRST CHAPTER, we discussed how ECMAScript or ES lays down the standard for scripting language and how JavaScript is based on this standard.
ES5 (JavaScript 1.5) was released in June 2011 and has the most consistent support across all browsers. In June 2015, ECMAScript 2015 (previously known as ES6) was approved, followed by ECMAScript 2016 (previously known as ES7) in June 2016. (Yes! June is ECMAScript month.) The improvements in the new ECMAScript specification boost productivity by providing features aimed at modern application development. However, most modern browsers do not support ECMAScript 2015/2016, so ECMAScript 2015 code must be transpiled
to ES5 via npm, or via a code editor like Visual Studio Code, before it can be used. The transpilation process involves converting ES 2015 syntax to comparable ES5 syntax (standard JavaScript) so that most modern browsers can execute it. This is a win-win situation for both browsers and developers, as the browsers get code they can understand, while developers get to use all the latest productivity features of ECMAScript.
Angular 2 applications can be written with both ES5 and/or ECMAScript 2015, along with TypeScript.
Introducing TypeScript
TypeScript is an open-source programming language from Microsoft, written on top of JavaScript to support types. First announced in October 2012, it comes with powerful type-checking abilities and object-oriented features. It also leverages ES6 as part of its core foundation. Angular 2 uses TypeScript as its primary language for application development.
All of the proposed features of ES 2015 and ES 2016 are implemented by TypeScript, or are in the process of being implemented. These features are converted into their ES5 equivalent when the TypeScript files are transpiled, making it possible to use the latest features of JavaScript even when the browsers have not implemented them natively.
Figure 1: Relationship between ECMAScript and TypeScript
Here are some important points to keep in mind:
TypeScript is a typed superset of JavaScript and compiles to plain JavaScript.
TypeScript can be used to write everything that can be written in JavaScript.
TypeScript files have the extension .ts
TypeScript is not a completely new language and is not intended to replace JavaScript in any way. It adheres to all principles of JavaScript and just adds types on top of it. Strict type checking system makes the code more predictable. The type system of the language helps in solving many issues during development, which are challenging to catch until runtime.
Since TypeScript supports types, it looks very familiar to any other typed OOPs languages like C# and Java.
TypeScript is not executed on the browser. Instead, the transpiled code gets executed in the browser.
Your ES6 code can be quickly converted to TypeScript code by just renaming the file extension from .js to .ts. For example, see this piece of code of a file test.js, which is valid ECMAScript 2015, as well as TypeScript. Just renaming this file to test.ts makes it TypeScript:
TypeScript can target multiple versions of JavaScript, including ES5, ECMAScript 2015 or 2016.
Forexample, consider this TypeScript class:
It easily gets transpiled to ES5:
The same holds true for any existing JavaScript library. All you need is a type definition file declaring types for the APIs exposed by the library. The GitHub project Definitely Typed
is a repository for high- quality TypeScript type definitions. These files are made available through a package manager to make it easier to install and use the type definition files.
Note 1: You can also try transpilation online using TypeScript playground: http://www.typescriptlang.org/play/
Note 2: We will use VS Code throughout this book to write Angular applications using TypeScript. Chapter 5—Angular 2 Development Environment gives you a step by step overview of using TypeScript using VS Code.
TypeScript Crash Course
Now that we have taken a quick overview of TypeScript and why it exists, let’s look at just a few of the more important features that will be used in the rest of the book. For a detailed tutorial on TypeScript, please refer to http://www.typescriptlang.org/docs/tutorial.html
Types
TypeScript defines a set of basic/primitive and general purpose types.
Primitive types
TypeScript inherits five primitive types from JavaScript—String, Number, Boolean, undefined and null.
String: can be assigned with single or double quotes. You can also use template strings.
Number: stores any number as integer or float. All numbers in TypeScript are floating point values. TypeScript supports hexadecimal, decimal literals, and also supports binary and octal literals.
Boolean: stores true or false values.
For example:
Undefined refers to a variable that has no value or object assigned to it, whereas null refers to a variable that has been assigned an object, but that object is null.
Apart from these primitive types, we also have Array, Enum, Any, and Void.
Arrays
You can create Arrays in TypeScript in two ways:
or using Generics and <>
TypeScript also supports Arrays of Arrays, also called as Multidimensional arrays:
Any
If you are declaring a variable without using a type and without assigning any value to it, the TLS assigns it the any type. Think of any as a supertype of all types, which is used whenever TypeScript is unable to infer a type. You can also assign the any type explicitly, which allows it to assume any value—from a simple string, number, Boolean, or even a complex object.
Enum
Enumerations give a friendly name to a set of values:
Void
Void signifies that a method does not have a return value:
Interfaces
In TypeScript, interfaces are used to describe types. They are compile-time constructs that are used to define the contract for a class by just declaring the methods and fields.
Consider the following interface:
This interface is inherited by a class, and the class implementing the interface defines all members of the interface. To implement the interface, use implements:
TypeScript interfaces can apply to functions, properties, and also to arrays. Here’s an example of applying it to a function:
Classes
Classes are used to define blueprints of objects. Although classes are not present in ECMAScript 5, they are a part of ECMAScript 2016 and TypeScript. The class syntax system of TypeScript is very similar to C#, as well as the ECMAScript 2016.
Here’s an example of a class with a property, constructor, and method:
The default access specifier in TypeScript is public. In our case, method greet() is public. We can instantiate the class using the new keyword, and call the public members of the class using the object (greeting):
Note: If you do not want a field or method to be accessed directly using the object, make it explicitly private.
Note: TypeScript has no equivalent to C# Struts.
Functions
Functions describe how to do things and are the building blocks of any application. TypeScript functions can be created as named functions (class methods), as anonymous functions (no name), and as global functions (created outside a class). The functions can have typed arguments and a return type.
Consider the following named and anonymous functions:
Note: TypeScript doesn’t allow passing variables of different types into the function unless there are explicit declarations of the function with those types.
Default Value for parameters
You can pass a default value to a function parameter:
Optional Parameters
Functions can have Optional parameters as well:
Arrow Functions
Arrow function allows you to write an inline function that can be passed in to another function. Arrow functions are not present in ECMAScript 2015, but they are in ECMAScript 2016 and TypeScript. They are syntactically very similar to C# lambda functions.
Here’s an example of using an Arrow function:
One huge advantage of the Arrow function is that retains the lexically-scoped ‘this’ variable. Sometimes when the lexical scope of ‘this’ changes, you lose track of what it was referring to. However, with Arrow functions, the value of ‘this’ is preserved.
Decorators
Decorators are used to extend the behavior of a class, property, method, or method parameter without modifying the implementation. In some languages, decorators are referred to as annotations. Decorators use the form @expression, where expression must be a function that will be called at runtime with information about the decorated entity.
Creating and using decorators is very easy.
Here’s a simple decorator example:
A custom decorator is a function that accepts some arguments containing details of the target on which it is applied. It can modify the way the target works using this information.
The following snippet defines and uses a decorator:
Here the decorator nonEnumerable sets the enumerable property of a field to false. After this, the property won’t be encountered when we run a for…in loop on the object. The loop written at the end of the snippet prints the property age alone.
Conclusion
TypeScript has a number of useful features and we have barely scratched the surface. The concepts explained in this chapter will help you code Angular 2 applications, which make use of TypeScript extensively. To dive deeper into TypeScript, refer to: https://www.typescriptlang.org/docs/tutorial.html
.
Try Infragistics Ignite UI Free: Infragistics.com/ignite-ui
Download the Code: infragistics.com/products/ignite-ui/angular-essentials-get-the-code
Chapter 3Angular 2 New Features
A Brief History of Angular
Web development has experienced a number of changes in the last couple of years. Web pages that were rendered completely from the server, got a paradigm shift with technologies like Adobe Flash and Microsoft Silverlight. These plugins