AngularConnect Videos & Free Angular 2 Router Book (Only for a few hours)

Hello,
This is Meligy from gurustop.net. I wanted to send you a very quick email to let you know about Angular 2 conference that took place in the last couple of days, Angular Connect.

The videos for the conference are already available on YouTube.

Check them out from here:

https://www.youtube.com/channel/UCzrskTiT_ObAk3xBkVxMz5g

There are videos for each whole-day track of the 2 tracks 2 day conference.
There are also videos for each session starting to come out. Seems all Day 1 is there, and Day 2 coming eventually.

For browsing through the whole-day videos, you can use the schedule page as guide, or just watch the individual session videos as they come out.

The sessions page on the site has all the separate videos that came out, and all the slides that are announced on Twitter, etc.

Another option is wait for the next message from me, as I’ll email you later all the most important summaries from the conference and what I think is must-watch.

Until then!


Meligy
gurustop.net
ng-sydney
Twitter | LinkedIn | StackOverflow

P.S.

This tweet was posted about 12 hours ago:

Victor is from the Angular Router team, and he writes the best Angular tutorials on
vsavkin.com.

Obviously this is only for less than 12 hours now, so get it quick.

Angular 2 final is released, here’s what you need to know

Update

The official release announcement is now out, with notes about future semantic versioning.

P. S. Sorry for spamming today with many emails. It won’t be the usual rate for these emails. I promise.

Hey,
Earlier today I sent you an email, saying that there’s a special Angular 2 event, where I expected the team to tell us when they are going to release Angular 2 final. I thought it would be too optimistic to ask for Angular 2 final today, but at least get a date!

I was wrong!

Watch the event stream, from the time 4:49s:
youtube.com/watch?v=xTIWBXkpvDc&t=4m49s

Yes, Angular 2 final is here. and it’s pretty much RC 7. No breaking changes :)
See the changelog as always.

Well, that’s it really. The NPM packages are updates, you just change the RC versions from 2.0.0-rc.7 to 2.0.0, and voila!

What About Angular1?

It will continue to be supported as long as the team sees a lot of usage (which they judge by how many people check the docs, now over a million people, 3 or 4 times Angular 2).

Most of the new minor features will be to make it more like Angular 2 though, and easier to migrate.

The Future

So, what comes after Angular 2 you ask?

Many small improvements that limit breaking changes, many more frequent releases to come without breaking your stuff.

One thing the team said is that they are not done making Angular faster yet, or smaller. They also said they really want to make the reactive / stream story amazing, and I’m guessing there’s still more work in the router space.

Then every 6 months or so (that’s February next year for the next one), a big release with breaking changes and semantic versioning, the next breaking-changes release, it will be Angular 3.

Most likely we’ll get the automatic project upgrade tool that the Angular team uses for automatic upgrades inside Google as well. The team said it should be by the time Angular 3 is out.

Very exciting, go check the whole special event video yourself!

I’ll be checking for more Angular2+ goodness, and emailing you with my findings as always.

Cheers,


Meligy
gurustop.net
ng-sydney
Twitter | LinkedIn | StackOverflow

Expecting Some Big News From The Angular 2 Team Today

Update 2:

Angular 2 final is here already!
Read my follow-up post here

 

Update 1:

Here’s the direct link to the livestream:
youtube.com/user/angularjs/live

The same YouTube channel will have the recording if you are checking this later.

Hello,
This is Meligy from gurustop.net. I thought I’d drop you a quick note to let you know that the Angular 2 team are having a local meetup in the mountain area in the U.S. later today, and they are saying it’s going to be a very special one.
It’s even titled Special Event!

What’s going to happen? Are they going to release Angular 2 Final?
That’s unlikely. But they might announce the release date!
Will it be in Angular Connect this month, or ng-europe next month?
I can’t wait to know!!

Well, the meetup is going to be streamed anyway. And it’s going to be in very convenient times for those living in the U.S. or Australia especially.

The talk will start at 7 PM PST, which is 12 PM East Australia Time, so you can watch in the evening, or during the lunch break, depending on where you are in the world!

Just check the Angular twitter account 10 minutes or so before the show start.
They should post the livestream link around then.

If you are into twitter, you can send them questions using the hashtag #ashng, but if you aren’t, you can just check the twitter page (no account needed) only for the streaming link.

In other news…

If you haven’t heard already, Angular 2 RC 7 has been released earlier this week.

The changelog shows only RXJS and Zone library upgrades, and a fix for lazy loading in the router when using Webpack.

Lazy loading is an interesting piece when it comes to play with NgModules and AOT compiler. Here are some great slides about what the Angular compiler does. We need to dedicate more time to the topic still.

If you want to take advantage of the fix, it should be a matter of upgrading your packages and nothing else. The team are keeping their promise to limit the breaking changes after RC 5 deprecations, and this is awesome!

Here’s how Angular-CLI upgrade commit looks like for example. Only package.json changes. Nothing else.

Speaking of the CLI, they also released a new version yesterday. You should check it out. The changelog tells you what’s new, but you can also directly check the commit log.

It should be a matter of npm i angular-cli@webpack. There’s now less need to work with the CLI from Github directly, but that’s how I personally tested the release yesterday even before it came out. I’m rewriting my guide on how to do it. Stay tuned!

That’s it!

Watch the meetup either streamed or recorded, or don’t worry about it as I’ll always keep you updated with any big news.

Until next one,

Cheers,


Meligy
gurustop.net
ng-sydney
Twitter | LinkedIn | StackOverflow

Learning Angular 2 recent RCs and future release plans

Hello there,
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 NgModules instead.

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.

Forms

[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:

  1. Template-Driven Forms
  2. Reactive / Model-Driven Forms
  3. Custom Validators
  4. 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.

Reactive / model driven forms require you to build an object representing your form structure in JavaScript (of course I actually mean TypeScript) – often referred to as the form model. Don’t confuse that with 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, NgModels.

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.

 

Till then…

Have a good day,

 


Meligy
gurustop.net
follow me on twitter

How To Get jQuery To Work With Angular 2 CLI – Webpack Edition

angular-webpack

I wrote a post yesterday that talked about:
Using Webpack with Angular CLI directly from official Github source
The post seemed to get a bit of traction on twitter, and among other feedback, I got an interesting question in a direct message:

Hi Meligy, Have you tried importing jQuery in Angular-CLI webpack branch project anytime??

Well, turns out I didn’t. I expected it to be just a require(...) / import ... line away. With Webpack, you often don’t need much more than that.

But then when I tried, I found a problem after another, which turned to be very specific to jQuery. It’s an edge case, but for the library the community size of jQuery, it’s worth showing:

A Working Configuration

First, install jQuery:

Then install jQuery typings:

Adding a test

Then you can modify src/main.ts to include and test jQuery:

  • Add the import:

  • Change the bootstrap(AppComponent); line to:

Running it

You can go ahead and run ng serve or ng build -prod. I saw what looked like a TypeScript error in the output, so, go run just that:

You’ll get an error:

Explaining the problem

This error is because of a conflict between Angular Protractor and jQuery. Angular Protractor defines a global “$” that you use to write your Selenium element selectors nicer, etc. Normally you don’t write real jQuery code in a Selenium test, but Protractor is included in the TypeScript definitions that are included in the entire application.

Working around it

A temporary workaround is to manage the typings files for the website (src folder) and End To End tests (e2e folder) separately.

Each of the the folders have a typings.d.ts file that has (possibly among other things), a typings reference to the root level typings folder:

The problem is that the typings/index.d.ts file looks like:

Now, we can’t have both angular-protractor and jQuery in the same file, but we cannot modify typings/index.d.ts directly because every time we run typings install, the file will be overridden (and many even add the typings folder to .gitignore).

What we can do though, is replace the reference to it from src/typings.d.ts and e2e/typings.d.ts. When we do, we need to account for path change, we’ll need to prefix the paths with ../typings/ to point to their correct location.

In src/typings.d.ts, we replace the ../typings/index.d.ts reference line with:

In e2e/typings.d.ts, we replace the ../typings/index.d.ts reference line with:

And that should be it. No errors n TypeScript compilation, and running ng serve, then opening http://localhost:4200 shows us that the app still works, with the bootstrap() call now executed from jQuery’s ready call – which we added only to make sure it works!

Run ng build -prod and check the output in dist. You’ll find that it also works well.

Remember, this is only a workaround!

A drawback of what we did is that every time we add typings for a new library using the typings command, we’ll have to add a reference to it manually in src/typings.d.ts and/or e2e/typings.d.ts depending on fit. It’s easy to forget the manual step and get confused.

Luckily though, this is an edge case. Most of the libraries will not have such conflicts (see, that’s why everybody says modules are cool and globals are bad!). For most libraries, all you’ll need to do is to require(..) / import ... a module from the library, and everything will happen magically. Thanks to Webpack, you’ll not even need to setup vendor or systemjs config etc. Check my previous post for more information.

Other ideas

A few other starters seem to have the same problem. One other way to tackle it is to exclude the path typings/globals/angular-protractor from the Webpack config, but currently, I can’t see this config exposed from the Angular CLI. I’m sure it’ll be there once it’s final etc., but it’s not there now.

Another idea is to have a noConflict typings version of jQuery. There’s a pull request to DefinitelyTyped registry to include that, but it’s abandoned and closed at the moment. You can try calling the exact file via typings as a github~ file not dt~. But obviously you miss potential updates.

The best thing that can happen is that the Angular CLI would bring the separation of typings for src code and e2e tests built-in, which may or may not land in the CLI. Let’s see!

Should you use jQuery with Angular 2 at all?

I think the answer is: avoid it if you can.

I’m currently working with a team that has it included, and it was mostly due to needing some UI widgets that are only available for jQuery. I’m hoping that this is going to change with more UI widgets coming standalone, and easy to wrap in Angular 2 components / directives. Many widgets are becoming available with the Angular 2 wrappers already, like the lovely ng2-bootstrap collection.