Become a ninja with Angular

This ebook helps you get the philosophy of Angular (Angular 2, but also Angular 4, 5, etc.), the new tools (like ES2015, TypeScript, SystemJS, Webpack, angular-cli...), and each part of the framework in a pragmatic way. You will be able to kickstart your project by the end of the reading, and build your amazing apps!

If you want to go further, a Pro Pack is available with exercises to understand each step of building an application. That means tons of pragmatic code samples and good practices for every common use-case, and save tens of hours on your next project!

Learn more Buy now

Available in PDF, EPUB, MOBI & HTML; English & French; Pay with PayPal or card with Stripe.

ebook


Our proven experience with Angular

Accessible to anyone

The ebook is at a 'pay what you want' price, with a very low minimum, so everyone should be able to read it, from students to professionals. As we did for our ebook on AngularJS 1.x, you can give part of the price to support a charity of our choice: Electronic Frontier Foundation. A professional package is also available and includes exercises, with instructions, unit tests and solutions, and all what's needed to hit the ground running on your first app, saving you days of learning and mistakes.
We gave to this ebook the Ninja Squad touch: a subtle mix of light tone and professional content. You can have a feel of this touch by reading our blog or the free samples of the book. Having built several professional applications and taught AngularJS 1.x and Angular to a LOT of people, from students to veteran developers, we are perfectly aware of the awesomeness and limits of Angular, and we packed this ebook with tips and advices to avoid you some costly mistakes.

In the book, we dive into

features

The Future of JavaScript


Angular apps can be written in plain old JavaScript but it is much better using the ECMAScript 6 features, or even better: the type-safety and decorators of TypeScript. Several chapters are dedicated to these topics, to understand them and write beautiful code.

features

Philosophy


Angular is a modern JavaScript framework supercharged with awesome features: we'll explore the new templating syntax, architecture choices, dependency injection system, routing, tests, forms, etc. We'll also study the integration with RxJS, a new tool that radically changes how we build our applications.

features

Best practices


This ebook and these exercises are the result of countless hours spent on different projects. They contain all the best practices we encountered. We would have saved so much time if we had that book when we started! We go over kickstarting, tests, code organisation, tips for production, and more!

features

Components


The whole framework is component oriented. Angular also works seamlessly with Web Components, but also with Angular components from a growing ecosystem. Who never needed a chart, a map, a timepicker or a data-grid?

features

Tests


As in our previous ebook, we spend some time talking about tests and testing strategies. And if you choose the Pro Pack, you'll have dozens of unit test examples for every part of your app. This will make sure your code is robust and trustworthy!

features

Performance


The Google team has done an incredible job performance-wise. We'll see how that works under the hood, what can we do to go further and produce blazingly fast apps.

Table of Contents

All the chapters you'll get to read in our ebook.
If you want to see the whole changelog, you can read it here.

0.  Introduction FREE

1.  A gentle introduction to ECMAScript 6 FREE

Transpilers

let

Constants

Creating objects

Destructuring assignment

Default parameters and values

Rest operator

Classes

Promises

Arrow functions

Sets and Maps

Template literals

Modules

Conclusion

2.  Going further than ES6 FREE

Dynamic, static and optional types

Enters TypeScript

A practical example with DI

3.  Diving into TypeScript FREE

Types as in TypeScript

Enums

Return types

Interfaces

Optional arguments

Functions as property

Classes

Working with other libraries

Decorators

4.  Web Components FREE

A brave new world

Custom elements

Shadow DOM

Template

HTML imports

Polymer and X-tag

5.  Grasping Angular’s philosophy FREE

6.  From zero to something FREE

Building a TypeScript app

Our first component

Bootstrapping the app

Something better with angular-cli

7.  The templating syntax

Interpolation

Using other components in our templates

Property binding

Events

Expressions vs statements

Local variables

Structural directives (NgIf, NgFor, NgSwitch)

Other template directives (NgStyle, NgClass)

Canonical syntax

8.  Dependency injection

DI yourself

Easy to develop

Easy to configure

Other types of provider

Hierarchical injectors

Binding multiple values

DI without types

9.  Pipes

Pied piper

json

slice

uppercase

lowercase

number

percent

currency

date

async

Creating your own pipes

10.  Reactive Programming

Call me maybe

General principles

RxJS

Reactive programming in Angular

11.  Building components and directives

Introduction

Directives: selectors, inputs, outputs, lifecycle, providers, host, export as

Components: view providers, change detection, queries, template, styles, encapsulation, directives, pipes

Making a component available everywhere

12.  Styling components and encapsulation

Native strategy

Emulated strategy

None strategy

Styling the host

13.  Services

Title service

Making your own service

14.  Testing your app

The problem with troubleshooting

Unit tests

Fake dependencies

Testing components

End to end tests

Performance tests

15.  Forms

Forms, dear forms

Model driven

Template driven

Adding some validation

Errors and submission

Creating a custom validator

Grouping fields

Reacting on changes

Summary

16.  Send and receive data with HTTP

Getting data

Transforming data

Advanced options

Jsonp

Tests

17.  Router

En route

Navigation

18.  Zones and the Angular magic

AngularJS 1.x and digest cycle

Angular and zones

19.  Advanced Observables

subscribe, unsubscribe, and async pipe

Leveraging operators

Build your own Observable

20.  Internationalization

The locale

Translating text

Process and tooling

Translating messages in the code

Pluralization

Best practices

21.  Advanced concepts SOON

Advanced Directives

CSS animations

Server-side rendering

Native rendering

Going to production

If you want to see the whole changelog, you can read it here.

The Pro Pack

Switch to second gear by building a real project, step by step!

Our ebook lets you learn all the features of the framework. But for Angular, we decided to go further to share our expertise, by selling a Pro Pack. The Pro Pack makes you create an application skeleton, craft your first modules, components, services, routes and forms. And above all it teaches you how to write tests, how to handle secured HTTP calls when your user is authenticated, how to design a reactive application leveraging RxJS, how to integrate with CSS frameworks like Twitter Bootstrap, third party librairies like Moment.js, already available components (Google Maps), and how to design your own (like a chart for example). If you want to completely master the framework, and be able to throw yourself with confidence in any projects, the Pro Pack is for you.

The Pro Pack contains a set of exercises, allowing you to build the PonyRacer app from scratch, confronting yourself to all these common problems in modern JavaScript applications. For each step, you receive a set of instructions corresponding to one of the ebook chapter, and a set of unit tests to validate your code. A NodeJS module we wrote is here to help you analyze your code and compute your score. Your turn to solve the challenge with the help of our tips! When you're done, or if you're stuck, you can check the solution we made. Our platform allows you to follow your progress, and inform you when we update the exercises. You can then switch to this new version (for free), and start again where you stopped. It's a great way to see how the best practices evolve!

screencast of the Pro Pack app

Exercises list

Here are all the lessons you can follow with the Pro Pack.

0. Getting Started FREE

Let's generate the project skeleton, and begin our adventure!

1. Templates FREE

Learn a bit more about components and the templating syntax with a new component for the responsive menu.

2. List of races FREE

Create a new component to display the list of races.

3. Race service FREE

Build a service for handling the race business logic, with a hint of Dependency Injection and Modules.

4. Using pipes FREE

Use a pipe in your template to format raw data.

5. Observables with RxJS FREE

Learn more about reactive programming and use observables in our service.

6. Race detail

Display a more friendly race detail, with a list of ponies.

7. Pony component

Add a nice pony component, with a beautiful 8-bit artwork image.

8. Http

Fetch data over HTTP from the Ponyracer REST API.

9. Custom pipe with Moment.js

Build our own pipe using the third party library Moment.js to display pretty dates.

10. Router

Have nice URLs that mirror the content displayed using the Router.

11. Register form

Build our first code-driven form with all the Angular goodies.

12. Custom validators in forms

Add validation with built-in and custom validators, on a single field and on field groups.

13. Login form

Build a simple template-driven form to authenticate our users.

14. Display the user

Display our logged in user and its score with the help of Observables and Subjects.

15. Logged home

Update the home page when the user is logged in, with a nice RxJS trick.

16. Remember me

Having to log in every time is painful: let's remember our user for the next time! Play with the LocalStorage.

17. Logout

Now we remember our user, so we need a way to log her/him out.

18. Http with authentication

Some REST endpoints are secured: let's see what we need to do to call them. Also a little introduction to JSON Web Token.

19. Bet on a pony

Where is the fun if we can't bet on a pony? Outputs and custom events to the rescue!

20. Cancel a bet

We also need to be able to cancel a bet.

21. Live race

Display the live race with fake data coming from a hand-made observable with RxJS.

22. Websocket

Get real time data from the server over Websocket!

23. Observable subscriptions

Learn a few handy operators and become a master with RxJS and Observables.

24. Boost a pony with advanced observables

We can make a pony much faster by clicking on it: a good excuse to learn some advanced RxJS and a performance trick.

25. Reactive user score

Our user score should update in real time. Another use-case for Observables, Websocket and services.

26. Authentication, Router, Modules and Lazy-Loading SOON

The router can protect the access to some route, and lazy-load parts of our app. Let's see how!

27. Build UI components with ng-content SOON

Learn how to build advanced UI components.

28. Integrate with a UI library SOON

Let's use UI components from ng-bootstrap, a third party library with powerful components.

29. Charts in your app SOON

Every professional app has its chart. Let's see how Angular manage these.

30. Use real Web Components SOON

Angular is all about the modern Web, so how do we use real Web components, like Google Map?

31. Performance tricks SOON

Angular is blazing fast, but there are still a few tricks to learn to only update the DOM when necessary, or make Change Detection faster.

32. Going to production SOON

Final step to deliver our app! What do we need to do to launch our product?

0

A4 Pages

0

Paying readers

0

Pro Packs users

0

€ Given to EFF

Free samples

If you don't trust our style, or our capacity to provide a genuine DRM-free ebook in all major formats, have a look at these free extracts.
You can also try the first 6 exercises of the Pro Pack for free.

Ebook samples

English Free EPUB Free MOBI Free PDF Free HTML
French Free EPUB Free MOBI Free PDF Free HTML

Pro Pack test drive

Test the whole experience of the Pro Pack on the first 6 exercises, for free.
Setup, code, build, verify. Check your scope and progression, then jump to the next step!

Simply register on the the Pro Pack platform for a free test.

Build a complete app

Ponies, ponies, ponies!

animated pony
animated pony
animated pony

For this ebook, we needed a demo app. We could have built another TO DO list, or chat app, or Reddit clone, like there are already hundreds of. But we chose ponies. Because everybody loves a pony (a real-life unicorn). You'll learn to build an application to bet on ponies races, but above all, you'll learn about all the use-cases you may need in a real Angular application.

You'll learn to build components, directives, services, forms, to send data to a server, to manage authentication, to build routes, to react to events, and a lot more! Give a try to our amazing PonyRacer demo application. All the code samples of this ebook are based on this app. That's also the same app that you'll learn to code step by step, exercise after exercise, with our Pro Pack.

screencast of PonyRacer demo app

Pricing And Plans

This book comes in two versions: one in English (for the world of developers to enjoy), one in French (for our fellow country-wo-men).
The Pro Pack (our online platform full of exercises) can be bought for a team of any size, with an appropriate discount.

ebook only

Pay what you want
  • PDF
  • ePUB
  • MOBI
  • HTML
  • English
  • French
  • Exercises
  • Tests
  • Full project
  • Source code

Pro Pack

199 (with team discount)
  • PDF
  • ePUB
  • MOBI
  • HTML
  • English
  • French
  • Exercises
  • Tests
  • Full project
  • Source code

Support an organization

Defend your rights on the Internet while learning Angular!

The Electronic Frontier Foundation is the leading nonprofit organization defending civil liberties in the digital world. Founded in 1990, EFF champions user privacy, free expression, and innovation through impact litigation, policy analysis, grassroots activism, and technology development. Today, EFF uses the unique expertise of leading technologists, activists, and attorneys to defend free speech online, fight illegal surveillance, advocate for users and innovators, and support freedom-enhancing technologies.

Ninja Squad has chosen to support this organization during this campaign. When buying our ebook, not only will you decide how much you want to pay, but also how much you want to give to EFF, if you want to. Our company is committed to make regular donations matching your choice.

Frequently Asked Questions

Because you always have exotic questions in your mind: we're here to bring you peace with nice answers.

Is this ebook for me?
This ebook is for everyone wanting to discover or deepen their knowledge of Angular. Beginner students, experienced developers, absolute fans of other frameworks (BackboneJS, EmberJS, ReactJS), and seasoned AngularJS 1.x users, everyone has found something useful in it.
But if you're already deeply familiar with Angular, you won't probably learn that much, besides some tips and best practices learned from our experience.
But this ebook can also be a nice gift for a friend! ;)
I've never used AngularJS 1.x. Am I gonna understand anything?
Of course! This ebook does not require any AngularJS 1.x knowledge.
If we point out some differences with AngularJS 1.x, you'll learn to build Angular apps from nothing but JavaScript.
Angular was just released, how can you pretend to know anything about it?
We master Angular because we have not waited for a stable release to be officially out! :)
We already had a deep knowledge of AngularJS 1.x, which we used in production for customers or our internal projects, we gave professional trainings, and we even wrote a book on it (French only). We closely followed the Google's Angular team since the Angular 2 announce, reading every commit they pushed, listening to all their public statements and helping several of our customers on their projects.We wanted to be ready for Angular official release!
Your book and your exercises are full of sample code. They will be quickly out-of-date, right?
We're test addicts. Every piece of code given as example is statically analyzed and unit tested. While writing this book, we could upgrade with every Angular 2 alpha release and quickly spot every breaking change (and there were lot of them before the beta release...). Thus, you can be assured that every piece of code is working, and that any following Angular release won't break anything.Same thing for the Pro Pack: the project is fully updated and regenerated on every Angular release, with each step automatically tested.
Will this book be updated with upcoming Angular 2, Angular 4, 5, etc. releases?
Yes. We will update this ebook, and provide you every upcoming version for free.
Can I read a sample chapter?
Yes, even several of them! \o/
You can grab them for download in every language available (English and French), and every format available (PDF, EPUB, MOBI, and HTML).
And a nice way to taste our writing style is to have a look at our blog.
Which tools are you writing this book with?
We're writing in Asciidoc, and we're using AsciiDoctor to generate all expected formats (PDF, EPUB, MOBI, and HTML). A Gulp build analyses every sample code, tests it, before embedding it in the ebook source.
Why a digital book?
Without even mentioning trees sparing and easy logistic, we prefer a digital ebook over a physical book because we can easily update its content, might it be a typo or a new feature of the framework. Have a look at the full changelog.
Why share the sales with a charity?
Let's be clear: the ebook sales won't pay for the time of its writing, ever (every technical writer will say so).
But we are happy to help, even modestly, for an issue we care about. You can retribute the authors for their work, and optionally support charity, whatever the ratio you want.
Do people buy this ebook? For real?
Yes, very much. Already 4282 people bought our ebook. You can look at our sales figures, they are completely public.
Are the files DRM-protected?
Absolutely not.
Can I reuse this ebook commercially?
No, this is the only restriction: you cannot sell it and use it commercially.
And do I really have to use my card number?
Pay what you want does not mean free!
You can pay with PayPal, or with your card through Stripe. In that case, we never have access to your card details.
Maybe one day we'll accept Bitcoins. :)
My company/accountant/spouse needs an invoice, are you providing it?
Yes, you'll get an invoice for every purchase. You'll even be able to customize the invoice with your own company details if you need to.
My download link has expired. I lost my download link. What can I do?
Don't panic. Click here, enter the email address you used to buy the ebook, and you will receive a fresh download link by email. That also allows you to get the most recent version of the book.
Is it possible to try the Pro Pack for free?
Yes, it is. Just go to the Pro Pack platform, where you can register for a demo and enjoy the whole experience with the 6 first exercises for free.
I want the Pro Pack for my whole team, is it possible?
Sure! You just have to input the needed quantity when buying, and you'll get an appropriate discount. Then, you can register your team members one by one, to open their access to the online platform. If you need further explanations, send us an email at contact at ninja-squad.com to talk about it.
Do you offer trainings?
Thanks for asking! :) Yes, we offer trainings on Angular for every level, but also on other subjects that might interest you.

About the author

author

Cédric Exbrayat


I'm a web developer and one of the co-founders of Ninja Squad. The rest of the team is also heavily involved in this ebook, writing some parts, testing things and giving feedback.

Our company is a small shop of four developers, helping other teams to build their great products, with their frontend and backend. We value code quality above all, and we're all experienced developers, trying to share what we know with others. Books like this one are a great way to do this, and we are also writing a blog, answering on StackOverflow, teaching and training other developers, and organizing conferences, the dearest to our heart being Mix-IT.

Buy this ebook

Which package?

How many?

By buying for your team, you'll save €{{ model.teamDiscount | number:0 }} on unit price!
After purchase, you can send the licences to each of your team member by email.

How much?

(tax included)
There is a minimum price of 5€

How to distribute?

The writers

{{model.percentage}}% = {{model.amount * model.percentage / 100 | number:2}}€

EFF

{{100 - model.percentage}}% = {{model.amount * (100 - model.percentage) / 100 | number:2}}€

Any discount code?

If you already bought our naked ebook, you can claim a discount code here.

What's your email?

You need to enter your email