This is Meligy from gurustop.net. Today we are going to talk about the new things happening in the Angular 2 world.
Angular 2 RC 5 has been released a few days ago, and RC 6 is going to be out in a week or two. RC 6 will be mostly removing deprecated features. This sounds like deprecated forms, deprecated router, and support for bootstrapping Angular applications with components, as you should be using
This means that, if you haven’t already, you should upgrade to RC 5, and change your code that’s using deprecated features before RC 6 is released. At least there’s a migration guide for that!
The good news though is that, beyond already deprecated stuff, the Angular team plans on avoiding breaking changes after RC 5 all the way to Angular 2 final release.
This means we might be still on track for a final release in September or October max! The ng-europe conference has been announced, and is scheduled for October 25 – who knows…
Of course this email is more about learning than about news. So, here are a few resources to lean all the new functionality in Angular 2. We’ll talk about the new forms module, and the new, 3rd router.
— [Video] Latest Angular 2 Forms w/ Kara Erickson
Kara is an awesome lady from the Angular team itself, who has been working on the forms module for a while.
In this video she explains many features of the new forms module, and the 2 different programming styles it offers.
There’s also a nice written summary of the talk by Juri Strumpflohner, and the source code she shows in the talk is available here.
— Thoughtram Articles
Pascal Precht, an Angular Google Developer Expert (GDE, like Microsoft MVP), has a nice collection of Angular 2 articles on his company’s site, Thoughtram.
For forms, I suggest you check the posts in this order:
- Template-Driven Forms
- Reactive / Model-Driven Forms
- Custom Validators
- Custom Form Controls
— Template-Driven or Model-Driven?
Template driven forms are similar to forms in Angular 1. They use
ngModel to connect to the data object, and HTML attributes like
required etc. for validations.
ngModel. By form model here we don’t mean not the actual data object that form control values are bound to, but an object that represents the form controls, validations, hierarchy, etc.
Angular 2 provides a convenient
FormBuilder object that you use to create the form model. It also allows you to create things like
ControlGroup (a fieldset / nested/child form, or even the top most form) and
ControlArray (which contains controls in repeats with dynamic length).
Instead of connecting to
ngModel, you connect your HTML inputs to the form model object you created via
formControlName. Check the above links for the code samples.
Now that you know both, how do you choose?
Here: If you worked with Angular 1 for a bit, the template-driven model will feel natural to you. I suggest you start there.
After that, learn the reactive / model-driven style, and roll on with it.
The reactive model is what feels more natural in an Angular 2 world. Everything in there is based on RXJS like many other pieces of Angular 2 – including monitoring value change and even validation. If you ask me, I’d say you should consider this like the only forms model that ships with Angular 2.
By the way, the official documentation for forms isn’t bad at all. Here it for template-driven forms, and for reactive forms.
Now, we should talk about the router next, and the most important / most new piece,
But, I look at this email, and think again…
There are a lot of links in this email already, and you need some time to check the each one of them…
So, I’ll give you a chance to do just that!
Let’s talk about routing, the Angular Ahead of Time (AoT) compiler, and
NgModule together tomorrow. They actually make sense together anyway, as you’ll see.
Have a good day,
follow me on twitter