Over the past three years my colleagues and I prepared and delivered multiple trainings “Modern Web Development with AngularJS and Java“. We felt pretty comfortable with the framework, and the training was structured around building a sample Online Auction app with AngularJS on the front and Java EE on the back. During the last year we’ve developed and deployed in prod the Easy.Insure app using Google Dart and AngularDart. So AngularJS became our framework of choice. When Google announced a complete re-write of the AngularJS, we were not disappointed. Angular 2 will make this framework better.
I’ll be writing this book with my colleague (and co-instructor) Anton Moiseev. This is going to be a tough project because Angular 2 is in Alpha now, and the API changes weekly, literally! I had this experience in 2006 while writing with my colleagues on a book on Adobe Flex 2, which went through one Alfa and three Beta versions while we were working on the book. We had to re-write code samples multiple times. It was a challenging but interesting project. Now we should do it again. It goes without saying that this book we’ll also write in a plain text editor using the Asciidoc markup and Asciidoctor for generating the HTML and PDF versions.
We want to thank Manning Publications for accepting our book proposal. Below is a short version of Table of Contents. So far only the Appendix on EcmaScript 6 is written, but by the end of July we should have the first three chapters ready as well.
1. Introducing Angular 2
The landscape of client-side development
The history of Angular
Why choosing Angular 2
Architecture of Angular 2 applications
Introducing a sample Online Auction
2. TypeScript as a language for Angular applications
TypeScript as a superset of ECMAScript 6
Tooling
3. Getting started with Angular
Creating your first single-page application
Model-View-Component
Templates
Data binding
Setting up the development environment for Angular 2 applications
Hands-on: Getting started with Online Auction
4. Registering and creating objects
The Dependency Injection pattern
Angular Modules
Hands-on: Modularizing Online Auction
5. Navigation with Component Router
Changing views
Hash-based navigation
Deep-linking with HTML5 History API
Passing Parameters to Components
Authentication and the role-based navigation
Lazy-Loading Modules
Hands-on: Adding navigation to Online Auction
6. Bringing Together Data and Views with Data Binding
Connecting UI to the data
Benefits of data binding
Unidirectional vs. two-way data binding
Change detection
Data Binding in Templates
Hands-on: Binding data to views in Online Auction
7. User Interaction via Forms
Data entry
Form controls
Data-Driven Forms
From UI-driven to data-driven forms
Form validation
Hands-on: Offering products for sale
8. Communicating with Servers
Asynchronous HTTP requests
Working with RESTful services
Using WebSockets
Hands-on: Pushing bid notifications to the clients
9. Testing Angular applications
Developing without a compiler
Test runners
Testing frameworks
Working with mock objects
Troubleshooting Angular applications
In-browser debugging
Hands-on: Testing Online Auction
10. Deploying Angular Applications
Configuring Web servers for single page applications
Supporting HTML5 History API
Proxying HTTP requests
Cross-origin resource sharing
Hands-on: Deploying Online Auction
Appendix A. JavaScript Implementation of ECMAScript 6
The Scope of a Variable
Arrow functions
Rest parameters
Classes
Collections
Modules
Destructuring
Promises
Generators
Code conversion from ES6 to ES5 with Babel
Appendix B. Web Components
Shadow DOM
Templates
Custom Elements
HTML Imports
Using Web Components in Angular
Using Polymer elements
Great to hear!
I’m sure it’s going to be success and most importantly, as always, it will help readers to learn Angular by example and to improve their knowledge in enterprise web development.
Great idea, thank you!
Can’t find nothing about Angulas creating custom directives in your ToC, Yakov. As for me, directives are one of the most powerful features of Angular among data binding and dependency injection which we use in our project on daily basis.
Angular 2 is component-based. So directives will be created as components.
Ah ok. We use 1.x.x in production so I haven’t see 2.x in details yet. I think it is a time. Thanks Yakov!
Do you plan something for Dart development for Angular 2?
Not at this point.
Tks!
Great to hear of this effort, Yakov! I learned a lot from your contributions over the years with Flex, and now that we’re planning a major Flex-to-Angular2/TypeScript migration, this is exciting to see. I really like your emphasis here on modularization and web components, and look forward to reading it.
One subtopic that I don’t see explicitly covered here (but may be outside of your scope) is the best / most-natural way to integrate a core UI library into the framework, given that Angular2 is all-in on Web Components. Right now Polymer is the front-runner Google-approved WC library, but it’s not clear yet how to best integrate it, given that some of its elements’ functionality overlaps with Angular2. Hopefully we’ll hear clarification on this from those teams in the coming months.
It would also be great to include something on offline/cached SPAs with the ES6 Service Worker; but again, that may be hard to incorporate at this level. Best of luck trying to hit your moving target! : )
Thanks. It’s really a moving target at this point. We are looking very closely at Polymer and started a pilot project in our company. It looks very promising and we also hope to be able to migrate a bunch of Flex components to Polymer.
Another good news for you: we have an SPA that needs offline capabilities, and in a month we’ll start experimenting with Service Workers. Meanwhile take a look at what the guys at Parleys did:
Very nice! Some recent Google I/O presentations had something similar. Looking forward to this becoming more established in the coming months (looks like it would still have a lot of browser-specific variances, especially regarding where/how source data to the UI is stored/structured offline).
Yakov, one other item I’d love to get your take on: in your experience so far, do you find the Ang2 component syntax to be as flexible/powerful/readable as something like well-organized mxml/AS was in Flex?
The reason I ask is that I’m having trouble embracing the Ang2 code examples I’ve seen so far, from the standpoint of flow/readability. I mean, I’m 100% sold on the Ang2 *concepts*; but so far, the syntax implementation in component code just feels really awkward to me. I’m really hoping that it’s just my complete lack of experience with it; that I’ve yet to shift to “thinking in Angular.” And since you came to it with a similar Flex background, I’m wondering if you has a similar experience before it all “clicked” for you. Flex is/was a joy to work with; I’m hoping Angular feels the same.
Thanks as always for sharing!
I don’t think you’ll find a tool in foreseeable future that’s as fun to work with as Flex. The syntax of Angular 2 is clearly better than of Angular1.x. Writing in TypeScript with good IDE support with types, classes, interfaces, and generics is much better than in JavaScript.
On the negative part, the JS ecosystem has too many things in general that must be put in place to set up your project.
There is a risk that the enterprise crowd will resist to adoption of Angular 2 since many application are already written in Angular 1. Google’s position in the enterprise world is weaker that Adobe’s in 2007.
But if you want to be a part of JavaScript community, Angular 2 is a good choice.
Thanks, Yakov – that’s a helpful perspective, and makes sense with what I’ve seen so far. It’s a hard choice moving away from such a mature framework, but the difference in level of developer activity and evolution of the platform makes the transition from Flash to web an inevitability (for us); thankfully things appear to be in much better shape today than even a few years ago. I look forward to the book!
The code from the book is Typescript 1.5 based or ES 6 ? Thanks.
TypeScript
Cannot wait any more!
Then get it 🙂
The first two chapters are already available at https://manning.com/books/angular-2-development-with-typescript
Haha, I know, need more chapters first~~