Angular 4 is coming…

Looking to upgrade your project to Angular 4 ?

You can simply try an in-place upgrade:

iOS/Linux:

npm i @angular/{common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@next typescript@latest –S –E

npm i @angular/compiler-cli@next –D -E

Windows:

npm i @angular/common@next @angular/compiler@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next typescript@latest –S -E


npm i @angular/compiler-cli@next –D -E

> For me, there was no code changes and my bundles became 25% smaller!


angular academy training in canada

Angular Academy is a 2-day hands-on public classroom training given in different locations across Canada.
Learn Angular and TypeScript Now!

I have now done this Angular workshop 44 times and trained more than 500 developers!
Happy to announce a new series of cities/dates coming in the next few months for this awesome Angular and TypeScript intense technical workshop!

Here is the new list of cities covered:

You can find more information on the website: www.angularacademy.ca


Microsoft MVP

For an 11th year in a row I have the pleasure to receive the Microsoft Most Valuable Professional Award!


Who are Microsoft MVPs ?

Microsoft Most Valuable Professionals, or MVPs, are technology experts who passionately share their knowledge with the community. They are always on the “bleeding edge” and have an unstoppable urge to get their hands on new, exciting technologies. They have very deep knowledge of Microsoft products and services, while also being able to bring together diverse platforms, products and solutions, to solve real world problems. MVPs are driven by their passion, community spirit and their quest for knowledge. Above all and in addition to their amazing technical abilities, MVPs are always willing to help others – that’s what sets them apart.

I am now part of the Visual Studio and Development Technologies expertise (coming from Windows Platform Development) which makes much more sense to me.

As written exactly 1 year ago my focus shifted back to web technologies and the plan was to focus on Angular and TypeScript. This is exactly what I did and it worked out pretty well:

Through my Angular Academy in Canada I did 34 Angular workshops in 2016, I have now trained more than 450 developers to this awesome framework!

2017 will be no different, still sharing my passion for web technologies, I plan to work intermittently for 6-7 months and visit as many cities and companies as I can. The other half of the year will be dedicated to just enjoy life, that’s my work-life balance 😉

Happy New Year!

Angular Academy


I want to list here a few Angular events and conferences scheduled for the first part of 2017.

Ottawa IT Community

I will be doing an “Introduction to Angular for .NET Developers!” presentation at the Ottawa User Group.

This is a lunch time session scheduled on January 10, 2017 in the Microsoft Offices.

Reserve your seat for the event here: http://tinyurl.com/jp96fja

ConFoo Montreal

This International Web Developers Conference happens every year in Montreal,QC.

I will be hosting a 2-day Training on Angular and TypeScript, on March 06-07, 2017.

Infos and Registration:
http://tinyurl.com/ngConfoo2017

Angular Training at Confoo

Open DevTeach Montreal

DevTeach is a regular conference in Montreal. This year you’ll notive some changes as the event was renamed “Open DevTeach”, and it will now focus on Web Open Source Innovations. DevTeach 2017 is an amazing event that will happens downtown on July 3-7, 2017, during the Montreal 375e Anniversary, the Montreal International Jazz Festival and the annual Montreal International Fireworks Competition!

I will be hosting a full day Angular Workshop!

Infos and Registration:
http://devteach.com/PostConference.aspx

Angular Workshop at DevTeach

ngVikings Copenhagen

This is a brand new Angular Community event in the Nordics and I am thrilled to be part of it!
It will take place in Copenhagen, Denmark on February 11th (Conference) and February 12th (Workshops).

I will be hosting a full day Angular Workshop!

Infos and Registration:
http://tinyurl.com/ngVikings

Angular Workshop at ngVikings

Angular Academy

And of course I will continue to organize tons of Angular workshops in Canada!
My popular Angular Workshop is a 2 day hands-on public course given in-person across Canada. I did it 43 times already!!
In 2017 I am returning to those cities to bring my Angular Workshop: Toronto, Vancouver, Ottawa, Calgary, Quebec, Montreal.

Angular Training Canada

A new series of cities and dates should be available very soon:
www.angularacademy.ca


Visual Studio Code has been my favorite tool to build Angular apps since 1 year ago (October 2015).

It comes with lots of good stuff from the “big” Visual Studio rich code editor, like code navigation, IntelliSense and refactoring, plus adds tons of productivity stuff in the context of web development and has TypeScript built-in, see: http://code.visualstudio.com/docs/editor/editingevolved

I particularly like the extensions model for productivity and I want to list here my TOP 3 extensions used while working on an Angular 2 app with TypeScript.

If you are new to VS Code you might want to read how to install extensions:
https://code.visualstudio.com/docs/editor/extension-gallery

My TOP 3 Code Extensions

  • Angular 2 TypeScript Snippets by John Papa

This is a must have! type “ng2-”… and you’ll get access to several TypeScript code snippets (think about code templates), some of them are available in your HTML files.

Angular 2 TypeScript Snippets by John Papa

  • Path Intellisense by Christian Kohler

This extension autocompletes filenames when you reference a file in your project, like a link to a css, a component template or an ES import.

Path Intellisense by Christian Kohler

  • Auto Import by steoates

Sometimes I don’t want to import objects myself, so I auto import them!

Auto Import by steoates

What are your fav extensions ?

Feel free to comment!


In the last 12 months I have been very busy teaching the Angular Academy course 29 times in 8 cities!
And now that Angular 2 final is out, I can feel the excitation growing a lot…so I am extremely happy to announce a new series of dates coming in the next few weeks for this awesome Angular 2 and TypeScript intense technical course!

angular 2 academy training in canada

Angular Academy is a 2-day hands-on public course given in-person across Canada.
Learn Angular 2 and TypeScript Now!

Here is the new list of cities covered:


You can find more information on the website: www.angularacademy.ca


Following the recent release of Visual Studio Code v1, here is an updated version of my Getting Angular Intellisense in Visual Studio Code tutorial:

1. jsconfig.json

Notice you now have an icon to generate the jsconfig.json file!

Now right-click on the project’s folder and select Open in Command Prompt (or Open in Terminal on OS X or Linux).

2. Install Typings

In the command prompt (or terminal), type the following command:

npm install typings –D

Assuming you have a package.json file, the –D argument will have Typings listed as a dev dependency.

3. Grabs the typings files from the Definitely Typed repository

typings install angular –ambient –save

This will create a typings.json file and a typings folder with the .d.ts files.

Now open a js file and you should have Angular IntelliSense working!

Hopefully this will help you have a great IntelliSense experience when using Angular in Visual Studio Code!


build

BUILD is the annual Microsoft developer conference, it typically focuses on all new things Windows and Cloud, but this year there was lots of Web and Open Source content as well, this is the new Microsoft after all!

All sessions were recorded and made available for free on Channel 9, you can find lots of web content with sessions around JavaScript and TypeScript:
https://channel9.msdn.com/Events/Build/2016?sort=sequential&direction=desc&term=&tag=javascript&tag=typescript#theSessions

Even Google was there, showing their work in synergy with Microsoft on Angular 2 with TypeScript!
Links to the Angular related sessions:

Creating Cross-Platform Apps with Angular 2
https://channel9.msdn.com/Events/Build/2016/T627

TypeScript and Angular 2
https://channel9.msdn.com/Events/Build/2016/TypeScript-and-Angular-2

There was also a series of Code Labs where people learnt how to build interactive web applications using Angular 2 and ASP.NET Core:
https://channel9.msdn.com/Events/Build/2016/L730-R1

I also recommend viewing this nice session on “Best of Visual Studio Code: Tips and Tricks”
https://channel9.msdn.com/Events/Build/2016/B887


Visual Studio Code (VS Code) is an awesome and free (Open Source) code editor that allows you to build and debug any modern web applications.

http://code.visualstudio.com/

VS Code provides built-in intellisense (code completion) for JavaScript, TypeScript, C#, … just hit CTRL+SPACE and have your code auto-complete!

IntelliSense for Angular Directives (HTML)

VS Code has native support for built-in Angular directives in IntelliSense within HTML tag.

Angular Directives Intellisense

IntelliSense for Angular API (Js Code)

VS Code has no out of the box intellisense for Angular code:

No Angular intellisense out of the box

But with some setup you can get it!

VS Code uses type definition files (.d.ts) from the DefinitelyTyped project, which provides typings files for all major JavaScript libraries and environments.

Typings files are managed using Typings, the TypeScript Definition manager.

Notes:

  • You no longer need to add the /// to all your .js files!
  • You also no longer want to use tsd as it has been deprecated.

Instead, we just need a jsconfig.json file at the root directory of your project.

1. jsconfig.json

Create an empty jsconfig.json at the root of your project. You need this jsconfig.json file to get cross-file IntelliSense to work.

2. Install Typings

npm install typings –D

Assuming you have a package.json file, the –D argument will have Typings listed as a dev dependency.

3. Grabs the typings files from the Definitely Typed repository

typings install angular –ambient –save

This will create a typings.json file and a typings folder with the .d.ts files.

Now open a js file and you should have Angular IntelliSense working!

Angular Intellisense in VS Code

Hopefully this will help you have a great IntelliSense experience when using Angular in Visual Studio Code!


ASP.NET Web Camp

OH YES, a free ASP.NET Web Conf coming to Montreal!!

This event is part of the Let’s Dev this Tour, organized by Microsoft, which in fact will offers 3 tracks: Web, Cloud and Windows 10.

Yes, a real Microsoft conference back in Montreal!!

1 DAY. 1 VENUE. 3 DEEP DIVE WORKSHOPS – WEB. CLOUD. WINDOWS 10.

The web content is based on the latest and greatest from the official ASP.NET Web Camp 2016.

Where: Le Centre Sheraton Montreal Hotel

When: March 30th

How much: Free!

What: The Future of Web Development. Build, Deploy, Scale! Build cutting edge web sites with the new release of ASP.NET, Node.JS and Web Tools for Visual Studio 2015 or Visual Studio Code, then deploy and scale them with Azure. Learn about the future of JavaScript with ECMAScript 2015. Attendees will learn how to develop beautiful, interactive and fast web sites using Microsoft’s web tools and platform. They will also learn how to deploy and scale web sites with the cloud.

Registration link for the Web track:
http://aka.ms/mvp1MTLweb

Other tracks link are available on the event site.

See you there!