Skip to main content
main-content

Über dieses Buch

Learn to build single page web apps using Angular 5 and TypeScript by working through 70+ mini-projects. With hundreds of code examples you gain a thorough understanding of the Angular 5 ecosystem and how to work within it.

You'll begin by understanding the benefits of Angular 5 vs older versions, and how this benefits your applications. You'll then move onto mini-projects that teach you JavaScript, TypeScript, how to use editors, Node, CLI, components, modules, directives, Webpack, dependency injection, widgets, routes and navigation, observers, reactive programming, and RxJS.

Complete with a consistently-updated online code repository, this book is a great way to get started with Angular 5.

What You'll Learn

Develop single page web applications using Angular 5

Understand the web development ecosystem

Use Node, JavaScript and TypeScript

Who This Book Is For

New or experienced developers who wish to develop single page web applications in Angular and the TypeScript language.

Inhaltsverzeichnis

Frontmatter

Chapter 1. Web Applications and AJAX Communications

Abstract
This book was written for developers who have a very basic knowledge of web development. It doesn’t require software to be installed in advance, but in later chapters you will need to install software to run the example code. The book provides information on how to download and install the software when required.
Mark Clow

Chapter 2. AngularJS vs. Angular (Old vs. New)

Abstract
Before learning Angular, it helps to know a bit about the original version, called AngularJS, and talk about the most important differences between the first version and the later ones
Mark Clow

Chapter 3. JavaScript

Abstract
When Netscape hired Brendan Eich in April 1995, he was told that he had ten days to create and produce a working prototype of a programming language that would run in Netscape’s browser.
Mark Clow

Chapter 4. TypeScript

Abstract
TypeScript is a superset of JavaScript (written by Microsoft) that primarily provides optional static typing, classes, and interfaces. It’s open source and is being developed on GitHub. The compiler is implemented in TypeScript and can work on any JavaScript host.
Mark Clow

Chapter 5. Visual Studio Code

Abstract
Many editors are available that will work with TypeScript, including Visual Studio, Visual Studio Code, WebStorm, WebEssentials, Eclipse, and many more.
Mark Clow

Chapter 6. Node

Abstract
We need to get coding soon, but we’re going to need a project. To create a project, we’re going to need to use the CLI (Angular’s command line interface, covered in the next chapter). And the CLI needs Node to work. So, we need to discuss Node before we can start coding.
Mark Clow

Chapter 7. Starting to Code with the CLI

Abstract
When I first started developing in Angular 2, I found there was a sharp learning curve at first. It was very hard to get a project going because there was no standard Angular 2 project blueprint that would simply take care of building and running the project. You had to set up your dependencies in Node (more on that later), set up your build process, and set up a deployment process. That made Angular 2 tough at first, because you had to learn the concepts and the syntax at the same time.
Mark Clow

Chapter 8. Introducing Components

Abstract
An Angular component is similar to an AngularJS Controller. A component is basically markup, meta-data, and a class (containing data and code) that combined together create a UI widget. Components are the main tools we use to build an interactive UI with. All Angular applications have a root component, often called the application component.
Mark Clow

Chapter 9. Introducing Modules

Abstract
The word module refers to small units of independent, reusable code. A typical module is a cohesive block of code dedicated to a single purpose. A module exports something of value in that code, typically one thing, such as an object.
Mark Clow

Chapter 10. Introducing Webpack

Abstract
Nowadays you can do a lot more stuff in modern browsers, and this is going to increase even more in the future. Thanks to technologies like Angular 5, there will be fewer page reloads and more JavaScript code in each page, a lot of code on the client side. You need a way to deploy all this code efficiently so that it loads quickly.
Mark Clow

Chapter 11. Introducing Directives

Abstract
Directives are markers on a DOM element (such as an attribute) that tell Angular to attach a specified behavior to an existing element.
Mark Clow

Chapter 12. More Components

Abstract
The purpose of this chapter is to enhance your knowledge of components further with more advanced topics.
Mark Clow

Chapter 13. Dependency Injection

Abstract
In software engineering, dependency injection is a software design pattern that implements inversion of control for resolving dependencies. A dependency is an object that can be used (a service). An injection is the passing of a dependency to a dependent object (a client) that would use it.
Mark Clow

Chapter 14. Angular and UI Widgets

Abstract
Angular is the core of many new JavaScript apps. However, you need to couple Angular with a front-end UI framework, such as Bootstrap or Material Design. I cover Bootstrap first in this chapter because it’s currently the more common of the two, and then I talk about Material Design.
Mark Clow

Chapter 15. Routes and Navigation

Abstract
In most web applications, users navigate from one page to the next as they perform application tasks.
Mark Clow

Chapter 16. Observers, Reactive Programming, and RxJS

Abstract
Reactive Extensions for JavaScript (RxJS) is a Reactive streams library that allows you to work with asynchronous data streams, and it’s included in Angular. The project is actively developed by Microsoft in collaboration with a community of open source developers.
Mark Clow

Chapter 17. RxJS with Angular

Abstract
In the previous chapter, we went through the core concepts of Reactive extensions and learned about observables, observers, subscriptions, and operators in RxJS. Now we’re going to see how we can use Reactive Extensions with Angular.
Mark Clow

Chapter 18. HTTP and the HttpClient Module

Abstract
Ninety-nine percentf Angular projects involve communication between a client (a browser) and some remote server. Normally this is done with HTTP. So, it’s very important to know how HTTP communication works and how you can write code for it. That’s what this chapter is about.
Mark Clow

Chapter 19. Forms

Abstract
You can’t enter data in an application without forms. AngularJS allowed the user to create forms quickly, using the NgModel directive to bind the input element to the data in the $scope.
Mark Clow

Chapter 20. Pipes

Abstract
Pipes have been around since AngularJS. They’re useful at transforming data, especially when the same transformation is used throughout the application. Pipes make it easy to add these transformations into your component template.
Mark Clow

Chapter 21. Zones and Change Detection

Abstract
Angular uses a JavaScript module called Zone.js, the purpose of which is to produce an execution context that persists across asynchronous tasks. Currently, the browser DOM and JavaScript have a limited number of asynchronous activities, such as DOM events, promises, and server calls. Zone.js can intercept these activities and give your code the opportunity to take action before and after the asynchronous activity completes. This is useful when you need to see all the information pertinent to that task, especially when an error occurs.
Mark Clow

Chapter 22. Testing

Abstract
This book is mainly about how to get started being productive with Angular, but it would be incomplete without at least introducing ways to test the code that you write. The testing framework is quite complicated, so don’t expect to know everything about it after reading this chapter.
Mark Clow

Chapter 23. More Advanced Topics

Abstract
This chapter throws together introductions to several more advanced Angular topics.
Mark Clow

Chapter 24. Resources

Abstract
I hope this book has turned out to be useful to you. I didn’t write it in a vacuum—I relied on many sources of information. I’d like to share a few resources that can help you in your Angular development.
Mark Clow

Backmatter

Weitere Informationen

Premium Partner

    Bildnachweise