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!


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!


AngularConnect conference is held this week in London (UK).

Notable announcements of the Keynote

  • Google is commited to work on Angular 1.x (there have been 32 releases this year)
  • Status of Angular 2
    • No beta yet (but pretty close)
    • Angular Universal is the server side rendering feature of Angular 2
    • New tool: angular-cli, allows developers to use the command line to scaffold pieces of an application
    • Upgrade scenario demoed: mixing Angular 1 and Angular 2 in the same app. More details was unveiled before
    • Browser support has now been extended to IE 9!

Material

Keynote slides

Watch the entire keynote and sessions online:
https://www.youtube.com/channel/UCzrskTiT_ObAk3xBkVxMz5g
https://www.youtube.com/channel/UCBXsUGFxL1ilvPgQ_WXR4mw


In the last couple of weeks, I have received tons of requests for AngularJS training, so I am thrilled to have a new series of dates coming in the next few months, as part of the Angular Academy Canada.

angular academy training in canada

Angular Academy is a 3-day hands-on public course given in-person across Canada.

Here is the new list of cities covered:

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


After an awesome course in Vancouver, I am thrilled to have a new series of AngularJS training coming in the next few months, as part of the Angular Academy Canada.

angularjs academy

Angular Academy is a 3-day hands-on public course given in-person across Canada.

Here is the second series of cities covered just after this summer (and more to come later this year!):

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


Full Stack Web Camp Montreal

If you are into web development technologies… do not miss this free event in Montreal!!

What:

Full Stack Web Camp.
Microsoft is hosting a full stack web camp with a focus on front-end web development with Angular. This full day beginner to intermediate developer Web Camp will teach you all about using Node.js and Express to create REST APIs for single page applications powered by DocumentDB. We will teach you all about AngularJS Binding, Controllers, Expressions, Filters, Directives, Routing, Factories, etc. and show you to scale your app. Sessions will be presented in English with English content.

When:

April 25th (9am-5:30pm)

Where:

Centre Mont-Royal
International I
2200, rue Mansfield
Montréal Québec H3A 3R8


Free
but you need to register:
Registration link

And bring your laptop!


We have the pleasure of having Rob Eisenberg come to MSDEVMTL in Montreal to speak about Aurelia on Monday April 13, 2015.

However, the event has sold out even after we booked a larger room. Don’t despair, our friends at Radio-Canada Lab has offered to live stream Rob’s presentation on YouTube! So mark your calendar:

Want to see what the future of web development will be like? Looking for a simple framework or set of libraries that can help you build complex web or cross platform apps? You’re going to want to see this. In this talk we’ll introduce you to Aurelia, a new framework with a rich heritage. You’ll learn about the fundamental features of the framework, such as Dependency Injection, Templating, Databinding and Routing, while we build a simple application. You’ll leave with all the knowledge you need to get started building your own applications with Aurelia.

Rob is a widely recognized UI development expert. He is the creator of Caliburn.Micro and Durandal and a former Angular 2.0 team member. Currently he’s building a new tech startup, Durandal Inc., whose first product is the new open source framework Aurelia.

eisenbergeffect.bluespire.com
@EisenbergEffect

YouTube live stream link: www.youtube.com/watch?v=6Pd53umA5wc
Note that the presentation will be in English.

[via Guy Barrette]


angular

TypeScript <3 Angular!

This has been announced today at the ng-conf in Salt Lake City!
http://blogs.msdn.com/b/somasegar/archive/2015/03/05/typescript-lt-3-angular.aspx

Quote: “We’re excited to announce that we have converged the TypeScript and AtScript languages, and that Angular 2, the next version of the popular JavaScript library for building web sites and web apps, will be developed with TypeScript.”

TypeScript <3 Angular

It is good to see this kind of cooperation and collaboration between Microsoft and Google. The overall JS community will benefit from it.

If you are in Montreal and want to hear more on modern web development with Microsoft tools, come to the free Web Camp on April 18th!
http://webdevcamp.msdevmtl.com/