A Journey to Angular Development

Learn Angular Fundamentals, TypeScript, Webpack, Routing, Directives, Components, Forms, and Modules with Practical Examples

Sukesh Marla

• Publisher: BPB Publications
• Year: 2021
• ISBN:
  9789391030148
• Topic: Informatique
• Subtopic: Programmation en JavaScript

Learn Angular beyond basic concepts – best practices and project experience.

Key Features
? Includes real examples and numerous illustrated use-cases on how to build dynamic and interactive web applications.
? Covers true challenges faced by Angular professionals along with proven solutions and best practices.
? Discusses various kinds of best practices followed in Angular applications.
? Makes you travel through a journey of 20 stations. Each station comes with new excitement and new challenges.

Description
This book is an exciting journey where novice developers learn everything they need to do before they start working on the Angular framework and develop dynamic web applications.The book begins with building a strong foundation on the concepts of web application development and numerous developer-friendly terminologies that you would often come across while learning Angular. It covers the essentials of ES6, Webpack, and TypeScript to write Angular applications and make the development of Angular apps more enticing, innovative, and scalable. The book talks about modules, directives, components, data binding, routing, and many more components and functions. Each of these topics is backed with real examples and illustrations.By the end of this book, you will learn about Angular's powerful features and capabilities. You will become a confident developer to design your own modern, responsive, and user-friendly web applications all by yourself using this single source of knowledge.

What you will learn
? Master fundamental concepts of Angular and it's Architecture.
? Witness the true potential of Angular for building composable components.
? Become well versed with the file and folder structure of an Angular application.
? Learn to write clean, simple and error-free codes like a sound professional developer.

Who this book is for
This book is for all web developers, software programmers, front-end developers, and entry-level developers who want to learn Angular or enhance the existing Angular applications to modern and responsive applications. Basic knowledge of JavaScript is an advantage to begin with this book.

Table of Contents
1. Introduction
2. Get Your Basics Stronger
3. ES6 Features Part 1
4. ES6 Features Part 2
5. ES6 Features Part 3
6. ES6 Features Part 4
7. Webpack
8. TypeScript
9. Angular the Beginning
10. Angular First App
11. Beautify the Angular UI with Bootstrap CSS
12. Authentication
13. Authentication Service
14. Unsubscribe
15. Logout and Route Guard Cleanup
16. Customer Service
17. Http Service
18. Token Interceptor
19. Multi Provider
20. Compile-time Configuration
21. Runtime Configuration
22. Error Handling
23. The Component-Oriented Style in Action
24. Angular Routing
25. Angular Modules
26. Angular Pipes
27. Angular Directives
28. Angular Forms
29. Angular Styles
30. Angular Change Detection
31. Angular Elements
32. Left Over

About the Authors
With a total of 12+ years of experience in the IT industry, Sukesh Marla had an opportunity to play various roles as a developer, an architect, an independent consultant, a trainer, and finally the Director of an organization.This is the second book written by Sukesh and it shares the experience gained from the first book as well.He has been awarded multiple times for various activities that also include the Microsoft MVP award. He started his writing journey online with technical blogging. His blogs were awarded multiple times by multiple platforms and that has been an inspiration to writing his first book, which ultimately became an inspiration to the second. LinkedIn Profile: https://www.linkedin.com/in/sukeshmarla/

Section 1

CHAPTER 1

Get Your Basics Stronger

Introduction

Finally, the long wait is over. The train has just arrived at the platform. Get into it. It will take you to the first Station, making your fundamentals stronger.

The plan will be as follows:

1. To understand what this series is all about.
2. To learn about the terminologies connected to Angular learning.
3. To understand the role of Node.js in Angular application development.

Figure 1.1

This Station will be all theory. Don’t stress much to learn everything in this chapter in one go. You can revisit it in the future and revise it. Just relax and enjoy the learning.

Understanding what this series is all about

While going through this series, if somebody asks you, what are you learning, then don’t answer it as AngularJS because these series have nothing to do with AngularJS. It is going to be an Angular series.

Figure 1.2

AngularJS and Angular?

First of all, we have to understand whether Angular and AngularJS are the same or not.

As you know, Telephone and Mobile phone are two different things.

Figure 1.3

The telephone was introduced a long time ago to the world, and it was intended to connect people. It did the job very well.

Years passed, and a new device was launched with the same core purpose but in a much convenient way and with a lot of great features. It was the Mobile phone.

Are the Telephone and the Mobile phone the same? The answer is no.

A similar answer can be considered for Angular and Angular JS.

AngularJS is a client-side framework created by the Google team for making a single page application development.

After some time, an improved version of the same was introduced.

This new version enforced a modern UI development methodology (component-oriented architecture).

It was better in terms of performance, and the code was much organized and manageable.

It was introduced with a completely new approach. It is named Angular, and its first version was 2.0.

Is there any similarity between them?

AngularJS and Angular do share some standard vocabularies/features.

In both the technologies, you will see the Directives, Pipes, Services, and many other standard features.

Both share the collective thoughts of the Single Page Application. The concepts in both the technologies share a similar idea, but the syntax will be entirely different.

Is there a migration path from the AngularJS app to an Angular app?

Yes, there is, and it is called Re-create. 😊

Many people may argue that the AngularJS application can be migrated to the Angular application, but it’s practically a myth. It’s only possible with a trial or demo applications. With the real-time applications, it’s just a dream. They both have very different ways of programming style, syntaxes.

Terminologies connected to Angular learning

If you have ever tried to learn Angular before, you must have come across some exciting words such as Node, TypeScript, and ES6. Let’s talk about a couple of those terminologies.

Figure 1.4

Please note that if you find the initial theory a little difficult to digest, don’t worry, relax, and continue. Once you start with the practical labs, these theories will become simpler.

JavaScript

Probably many of you already know what JavaScript is. It is a programming language that has been used by developer for many years for the client-side scripting in web applications. The primary purpose of it is DOM manipulation. The JavaScript executes in the client-side by the browser, and manipulates the client DOM.

Figure 1.5

How is JavaScript different, compared to the other programming languages?

Like most programming languages, JavaScript is not a compiled language. It’s a dynamic and interpreted language. The run-time environment (provided by the browser) executes each line one by one and throws an error at run-time if anything goes wrong.

Let’s do a demo to understand the same. Create an HTML file with the following content:

1. <html>
2. <head></head>
3. <body>
4. <script>
5. console.log(‘A’); console.log(‘B’);
6. console.log(‘C’); console.log(ABCD);
7. console.log(‘D’); console.log(‘E’);
8. </script>
9. </body>
10. </html>

Now, execute the HTML file. (Simply double click the file, and open it in the browser.)

As you can see, although there is an error in the fourth console.logstatement, the first three lines are executed successfully.

If it were C# or Java, we would have encountered a very different output. We would have ended up with the compile-time error. That’s JavaScript.

Figure 1.6

ES6

ES6, ES2015, and ECMA 2015 are all the same. Initially, it was proposed as ES6, and finally, ES2015 became the official name. Usually, most people call it ES6, so we will call it ES6 throughout this series.

It’s a new JavaScript standard. A lot of new capabilities and features are added in this version to make the JavaScript developer’s life easier. We will explore a couple of those features moving forward in this series.

What is and why the Single Page Application?

Gmail and Facebook are some of the most known examples of such applications. Let’s compare the traditional web applications with the Single Page Applications (SPAs).

Figure 1.7

Figure 1.8

In the case of SPA, the performance will be much better. The end-user gets one page in the beginning, and it stays forever. All the future operations performed by the end-user look like a simple DOM manipulation. Something gets dynamically visible, something gets invisible, some new items get created, and some existing items get removed, but the entire UI never gets refreshed. It gives a feeling that the whole application is developed on one single page. Hence, it’s called the Single Page Application.

Does it involve only one pa...