Angular 4 Final Is Almost Here

Hello, This is Meligy from GuruStop.NET.
Good news, we are expecting Angular 4 final any hour now!

How Do We Know?

During the ng-sydney Angular meetup gathering last Wednesday, Stephen Fluin from the Angular team repeated a couple of times that Angular 4 final is expected this week.

A quick look into the latest Angular team meeting notes also confirms that Angular 4 is due on Thursday, March 22 (although they mentioned there are a couple blocking issues, so, it might be on Friday or so).

Angular CLI, the best tool to create, develop, and test Angular applications, is also going to be released as 1.0.0 final alongside Angular 4.

P.S.
If you prefer to add server-side rendering, you might check Angular Universal fork of the CLI fork for Node, and `dotnet new Angular` for ASP .NET Core. If you need to build an Ionic app, check Ionic CLI 3 beta. They all would come with Angular 2 support by default only though, while the official Angular CLI supports generating Angular 4 projects by running `ng new app-name –ng4`.

[Video] Angular 4 And The Angular CLI

If you want to learn more about Angular 4 and the Angular CLI, see Stephen Fluin`s video here:

[Video Playlist] More Recent Talks, NG-NL

If you are interested in more free up-to-date Angular videos, the NG-NL Angular Netherlands conference also took place last week, and many session videos are available now in this YouTube playlist:

https://www.youtube.com/playlist?list=PLQi8NNYCH8TDFnOhjrIsjZGMD6Ks8SQid

Angular 4? (Not 3!!)

Just for those who don’t know, the reason there is no Angular 3 is that the Angular router for Angular 2 has been rewritten 3 times, and the NPM package for Angular router is now 3.x, while all other Angular packages are 2.x.

To make all the packages the same version again, the Angular team skipped version 3 entirely, and jumped directly to version 4.

It’s worth reminding though that Angular 4 is mostly backwards compatible with Angular 2. You should expect most if not all your applications to continue to work with it.

And a final reminder, it’s “Angular”, for Angular 2+, and “AngularJS” for Angular 1.x. These are the names that the Angular team prefers, and that’s what you’ll see me use more often going forward.

What’s Next?

Once Angular 4 final is out, I’ll send you a follow up email, with a very customized writeup of what I personally find most exciting about Angular 4, and can’t wait to use in all my production projects.

I’ll also share some awesome resources for RxJS and TypeScript.

Stay tuned!

Cheers,

– –

Meligy

ng-sydney | Usergroup Founder & Organizer

Angular 4 Beta is out 🔥 Everything you want to know!

Hello there,
Have you heard the news? Angular 4 beta is here!

Yes, Angular 4!

Update: December 15, 2016

Angular 4 Betas have started coming out already.

Check out out from here.

This post started on December 12, 2016, and has been actively updated since.
Each update has its date marked.

Have I managed to make you panic yet?
Hopefully not. You might be raising questions already still, like:

What about Angular 3?

There won’t be any Angular 3. Right now the Angular Router version is using the 3.x space already, and is not in sync with the rest of Angular, which is still at 2.x.

So, the easiest way to bring them back in sync is to skip v3, and jump directly to v4.

Angular 4? Another Big Bang Release?

Not really:

Angular 4 will be released in March 2017. The first beta will ship in December (sometime this week as mentioned above). The intention is to release a new major version every 6 months.

Each new version is allowed to mark APIs from the last previous major version as deprecated, but NOT to break them. So:

  • Angular 4 might deprecate APIs from Angular 2, but not break them
  • Angular 5 might only deprecate APIs from Angular 4, but not break them (might break APIs from Angular 2 though)

The team has confirmed that Angular 4 will be a backwards compatible upgrade from Angular 2. You might expect a few deprecations at worst (until now that’s none BTW). But no API change / breakage.

So, what is Angular 2 and Angular 4 called now?

The team says: Just call it “Angular”. This should be more future proof.

Given Angular 4 is a backwards compatible upgrade, people searching for solutions to issues, etc., might find an Angular 2 answer, and that answers should just work with their Angular 4 app.

How about Angular 1?

Someone asked me on Twitter: “How would I avoid Angular 1 results showing up for my search then?”. I think the closest thing is adding “-angularJS” to your search (or “NOT angularJS”, without quotes in both). Angular 1 articles tend to use this way more than Angular 2 ones.

When was that announced?

There was a new Angular conference in Belgium last week. During that, the team made the Angular 4 announcement in the keynote.

Watch the full video from here

The conference team did not announce anything about releasing more videos, but when I asked them they confirmed that they’ll be available soon.

Update: December 12, 2016

The information has also surfaced in the official Angular team meeting for December 4:

Update: December 14, 2016

The team has also created an official blog post about Angular 4:
Ok… let me explain: it’s going to be Angular 4

How about … ?

If you have any more questions, just reply to this email. If I know the answers, I send it to you right away. If I don’t, I’ll do my best ti find it and send it to you.

Until next time!

Cheers,

– –

Meligy

Readify | Senior Software Consultant
ng-sydney | Usergroup Founder & Organizer

Email: eng.meligy@gmail.com
Mobile: +61 451 835006
Twitter | Blog | Linkedin | StackOverflow

 

P.S.

If you are in NSW Australia, the ng-sydney usergroup is holding its December gathering on Wednesday this week:

Check it out from here

If you noticed, it’ll be on December 14. This is the same day to expect Angular 4 beta 0 — how exciting!

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

Where’s Angular 2 going after a couple of RC releases?

Note

This blog post first appeared in my Web Developer Newsletter on June 16.
Look for the form to sign up to the newsletter below.

Hello!
This is Meligy from GuruStop.NET. Just checking if you got the news, Angular 2 RC2 is out!

Here’s the official announcement – and the changelog

The big highlights for this release for me seem to be:

  • The first release of the template compiler
    It allows you to compile templates as a build step, and avoid loading the Angular compiler in runtime.
    The Angular team say this compiler is the most essential to marking Angular 2 as final release.
  • Simplifications to forms
    If you played with Angular 2 forms and find the syntax confusing / redundant like me, this is big news
  • A new rewrite of the router
    This rewrite seems better than the on in previous RC.
    The official blog says it has contributions from ui-router and ngrx/router
  • Some new features
    Namely the animation framework

By the way, I’m personally sticking to Angular CLI when trying newer versions of Angular 2.
If you are taking this route, note that you need to uninstall the CLI, and clean npm cache before installing a new version.

That’s it for me. How about you?

Have you been playing with Angular 2 yet?

Or still looking for a good place to learn it?

Write back to me and let me know :)

Cheers,

The Pre ng-conf Special — Some Great Resources for AngularJS

Note

This blog post first appeared in my Web Developer Newsletter a few hours before AngularJS ng-conf started.
Look for the form to sign up to the newsletter below.
Are you ready for ng-conf today? 
There are a lot of videos to watch, live, or as recordings in the time that suits you.
 
They are all available here:
 
 
If you’ll be watching the recording later, I expect the streams will be available as recordings of the whole day at first – via the same links; and then later in a couple of days or a couple of weeks will have separate recordings for each session with new links.
 

Another Great Angular 2 Videos

 
Also, make sure you didn’t miss the Angular team talk in early April, about HTTP and Observables, Angular CLI, and accessibility testing, and here’s the recording:
 
 
Looking for something a little bit more advanced? Check this free EggHead video on using RxJS and Redux framework (often used with React), with Angular 2:
 
 
Or if you want something more basic, check
 
 

AngularJS Performance Videos

 
If you are still doing Angular 1, check out Todd Motto’s awesome AngularJS FREE course as well:
 
 
And here’s another FREE webinar he did on the same topic
 
 

Angular 2 — RC 1

 
Finally, you probably heard it already. Angular 2 is now an RC 1 release, out of beta!
 
There are a lot of changes in RC if you are using the new router heavily.
Other than that, you need to watch for changes to pipes in beta-16, and to ngFor in beta-17.
 
Here’s the full changelog:
 

Learning Angular 2

 
If you are looking for some Angular 2 project to look at code and come up with patterns to use yourself, Dan Wahlin has a great sample, that’s already updated to Angular 2 RC 1:
 
 
If you are into different experiments with the limits of the Angular 2 API, check Ben Nadel’s recent Angular 2 blog posts:
 
 
If you are looking for a big list of different resources to learn Angular 2, check out this list:
 
 
If you are playing with Angular 2, remember that you can always email me and I can always try to help. Here are the most common gotchas people seemed to fall into in an Angular Hack Day I helped mentor in Sydney
 
 
And of course stay on this list for more AngularJS, TypeScript, NodeJS, ASP .NET, etc. goodness in future issues!
 
That’s it for this one, though.
 
Enjoy :)

– –

Mohamed Meligy

Senior Software Consultant | Readify
Organizer | ng-sydney User Group

 

P.S.
Do you have any good free resources for AngularJS, TypeScript, NodeJS, EcmaScript / JavaScript, ASP .NET, or web development in general that you’d like to share with 1,100+ members of this list?
Or, do you have a good useful product you’d like to be a sponsor of the next issue?
Just email me about it, and let’s have a chat!

A Quick 10-Min Video To Start Writing Angular 2 With No TypeScript Setup

Hello everyone,

In this video, I share a very simple tip that I earlier shared with a few Newsletter subscribers and ng-sydney members, about the easiest way you can get to play with Angular2, without worrying about shims, SystemJS, TypeScript, or RxJS.

I also give you another hint for when you want to create a “proper” project, not just a playground.

Too Long; Didn’t Read (Watch)

  • To start a new Angular2 playground, go to angular.io, scroll down to the hellow world example, and click the “TRY IN PLUNKER” button
  • If you need a proper project, just google “Minko Angular2 Seed”, click on the Angular 2 Seed Github repository, and clone that (maybe with flag --depth 1 for clean history)

Let me know if you have any questions.

AngularU, NPM 3, & Hosting Recommendations — Issue12 — Meligy’s AngularJS & Web Dev Goodies

Hello,

For the new ones around here, this is @Meligy writing this issue of GuruStop.NET Newsletter for JavaScript developers, especially those working with AngularJS.

I’ll mix in a few quick links with the ones I describe, for a change.

Please reply back and tell me whether you think this is a good idea.

Let’s jump to today’s picks:

AngularJS

AngularU Videos

You probably heard about AngularU, another big Angular event like ng-europe, with speakers from within and outside the Angular team.

There is a ton about Angular 2 (roadmap, server rendering, forms, TypeScript), but also several topics about Angular 1.x for both coding techniques and libraries, and even integration with different backends.

Angular 2

Contribute to Angular 2 [“community-help” Github Label]

In an up-for-grabs way, Angular 2 repository issues now has a special label for issues that the team expects external contributors from the community might be able to work on easily.

Check the list. You might find something that you can do!

React Native and NativeScript Integration [Article]

A narration from the “AngularJS 2 Roadmap” in AngularU that gets you the news pieces directly. It also links to the Angular 2 Rendering Architecture document.

Styling Angular 2 components [Article]

Angular 1.x

gulp.js starter for AngularJS SPAs

A scaffold starter kit for Angular applications that uses gulp and bower and tries to set a few more things than folder structure (which seems nice) like fonts, etc.

Similarly, here’s another one that uses NG6: ES6 + JSPM (or Webpack).

Angular Formly [Library]

This one seems to be getting A LOT of attention. I see several people sharing it, and I hear about it in the Angular Air podcast.

Give it a look, or check this article about how to use it.

New features in AngularJS 1.4, AngularJS Meetup South London [Article]

Using Angular 1.x With ES6 and Webpack [Article]

More traps, anti-patterns and tips about AngularJS promises [Article]

Directives (Angular 1.x)

A Guide To Transclusion in AngularJS [Article]

Very good explanation of templates and, obviously, transclusion.

Using NgModelController with Custom Directives [Article]

From GuruStop.NET

Using track by correctly with Angular 1.4 select ng-options

This is a one year follow up of the most read post ever in my blog, about select element quirks in AngularJS, How to set the initial selected value of a select element.

AngularJS is not working at all, & angular.bootstrap() throws weird errors

I was getting ready for another post, bootstrapping my demo angular module manually, and I just couldn’t get Angular to work. After a bit of frustration, turned out I needed to run this after DOMContentLoaded was fired.

ReactJS

Nvigating the React Ecosystem [Article]

We know React is just a template / view library. What other tools and libraries are there that make building whole apps with it possible?

The pursuit of high performing, easily maintainable React apps [Article]

JavaScript

Debugging

Useful Javascript debugging tips you didn’t know [Article]

Being able to monitor function calls in the console is nice. Also, if you didn’t know about, black boxing library scripts is VERY nice for debugging jQuery / Angular / Polymer / etc. apps.

ES2015 / ES6

In case you don’t know, the committee that releases the JavaScript standard (EcmaScript standard) decided to have version names after the year of release.

So, the official name for EcmaScript 6 is actually EcmaScript 2015.

Announcing “Exploring ES6” [New Book] [Freebie]

The book is free for online reading, and you are encouraged to buy downloadable formats to support the author.

It’s high on my reading list. This guy’s blog is a very good resource for JavaScript info.

JavaScript.com

Code School learning website has aquired the domain and put some nice free learning materials in there for starters.

5min ES6 Intro (With Babel) [Video]

Setting up an ES6 Project Using Babel and Browserify [Article]

NodeJS

NPM 3.0 [News]

BPM v3 is released with label “latest” and actual description “beta”. It’s going to be side by side with future v2 releases, but at least it should fix several common issues with v3.

Gulp

Getting started with gulp [Article]

Good article that was updated a lot to keep up with Gulp.

Web Design

Improving Web Fonts Performance [Slides]

Bootstrap Sass Installation and Customization [Article]

Designing User Interfaces for Your Mother [Article]

Text Editors / IDEs

Visual Studio

JavaScript Editor Improvements in Visual Studio 2015 [News]

There’s some about AngularJS & requireJS support, but my most favourite is integrating JsDoc into intellisense (autocompolete).

JsDoc fairly common in documenting JS libraries, so, a lot of them will benefit greatly from it.

@Ch9 Connect(“On Demand”); [Videos]

Channel 9 has a nice new series of various length videos about Visual Studio 2015, and other related .NET, Azure, and programming language topics.

I watched a few and liked them a lot.

Visual Studio Tools for Apache Cordova – Samples and Docs [Code Samples]

Atom

Github’s Atom free / open-source text editor.

Facebook open-sources its Nuclide IDE based on GitHub’s Atom text editor [News]

Github Atom 1.0 released (And very cool video)

Let’s see how long it will take other editors based on Atom to be in sync with it!

Software Design

Martin Fowler: Monolithic apps first, microservices later [Article]

In his own words “Almost all the successful microservice stories have started with a monolith that got too big and was broken up”.

The introduction to Reactive Programming you’ve been missing [Article]

Web Hosting

Where should I host my blog (WordPress or other), if I want my own server / VPS?

One of the blog posts I wanted to write for long time actually. In short, for Windows, use SoftSys Hosting, for Linux, use DigitalOcean, and maybe check BlueHost.

I got a comment in email saying why WordPress instead of static file based blog, but that might be a topic for another post!

Misc / Fun

DebConf14: QA with Linus Torvalds (August 2014)

One of these random Youtube autoplay videos, but I found it interesting, not having heard a lot from Linus before.

What happens when you type google.com and press enter? [Article]

How deep do you wnat to take the answer to? Send a Pull Request, it’s a Github repo :)

There’s also other variations on Quora and on StackOVerflow.

Community Casts [Videos]

A video collection website that seems to have around 100 AngularJS videos, and similar number or general JavaScript videos and for C#.

Seems like there are some people actively adding videos to it as several videos are added just hours before I checked it.

If you liked this newsletter

Donate?

You might consider buying me a coffee, or two ;)

You can donate to the newsletter via Paypal.

But most importantly

You can reply to me and make this newsletter better:

  • Is the current monthly frequency OK, or should it be closer to weekly or bi-weekly?

  • Do you like the content? Do you want more AngularJS content? Or less? More JavaScript? C# / .MET?

  • If uou find a good article, video, library / tool, or anything else that can fit into this newsletter, why not reply and share the love? Thanks :) :)

Apart from that…

See you next one :)

@Meligy –– GuruStop.NET