using angularjs in visual studio 2013 _ the visual studio blog

18
3/ 2/2016 Using Angul arJS i n Visual Studi o 2013 | The Vi sual St udi o Bl og ht tps:/ /blogs.msdn. mi cr o sof t.com/visuals tudio/2015/ 02/05/using- angula rj s-i n-v is ual- studio -2 013/ 1/18 0 0 0 Using AngularJS in Visual Studio 2013 February 5, 2015 by Visual Studio Blog  / /  40 Comments We continually strive to make the JavaScript editing experience better, part of this is providing support for popular libraries and patterns used by developers. AngularJS is one of the most popular JavaScript libraries and you’ve asked for even better support for it in Visual Studio. This post illus trates how to improve your experience in Visual Studio 2013 when working with AngularJS; if this framework is new to you, take a look at the tutorial on the AngularJS website . Today, Visual Studio provides Intell iSense suggestions for APIs directly off of the angular object. However, when you start to really work with AngularJS, you quickly find that IntelliSense does not provide as much help as it could. This is because the JavaScript editor doesn’t understand the way that Angular dynamically loads object r eferences when your app is launched i.e. dependency injection . John Bledsoe, a member of the Visual Studio community, created a great extension that helps the Visual Studio editor with this. By simulating the execution of your Angular application as you write your code, it provides a significantly better IntelliSense experience. ★★★★★ ★★★★ ★★★ ★★ Server & Tools Blogs > Developer Tools Blogs > The Visual Studio Blog The Visual Studio Blog The official source of product insight from t he Visual Studio Engineering Team Sign in

Upload: ravelstein

Post on 08-Jul-2018

231 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 1/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://blogs.msdn.m icr osoft.com/visual studio/2015/02/05/using- angul ar js- in- vi sual -studi o- 2013/

0 0 0

Using AngularJS in Visual Studio 2013

February 5, 2015 by Visual Studio Blog  //  40 Comments

We continually strive to make the JavaScript editing experience better, part of this is providing support

for popular libraries and patterns used by developers. AngularJS is one of the most popular JavaScript

libraries and you’ve asked for even better support for it in Visual Studio. This post illustrates how to

improve your experience in Visual Studio 2013 when working with AngularJS; if this framework is new to

you, take a look at the tutorial on the AngularJS website.

Today, Visual Studio provides IntelliSense suggestions for APIs directly off of the angular object.

However, when you start to really work with AngularJS, you quickly find that IntelliSense does not provide

as much help as it could. This is because the JavaScript editor doesn’t understand the way that Angular

dynamically loads object references when your app is launched i.e. dependency injection 

. John Bledsoe,

a member of the Visual Studio community, created a great extension that helps the Visual Studio editor

with this. By simulating the execution of your Angular application as you write your code, it provides a

significantly better IntelliSense experience.

★★★★★★★★★★★★★★★

Server & Tools Blogs > Developer Tools Blogs > The Visual Studio Blog

The Visual Studio BlogThe official source of product insight from the Visual Studio Engineering Team

Sign in

Page 2: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 2/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://blogs.msdn.m icr osoft.com/visual studio/2015/02/05/using- angul ar js- in- vi sual -studi o- 2013/ 2

For example, here’s the IntelliSense experience without the extension installed:

The icons in this screenshot mean that the editor is simply listing out any identifiers variables,

parameters, object members, etc. 

in the file; I should be seeing APIs provided by the $routeProvider such

as a .when 

function.

After the extension is installed, I see a much better list:

APIs provided by the $routeProvider object are now shown.

Adding AngularJS to a projectTo get started, I need to install the AngularJS extension for Visual Studio. To do this, I download the

angular.intellisense.js file and place it in the Program Files x86 

 \Microsoft Visual Studio

12.0\JavaScript\References folder on my PC.

This extension works the same with any project that uses JavaScript, including Apache Cordova, ASP.NET,

LightSwitch, and Windows Store apps, among others.

Page 3: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 3/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://blogs.msdn.m icr osoft.com/visual studio/2015/02/05/using- angul ar js- in- vi sual -studi o- 2013/ 3

If you’re interested in trying it with the upcoming Visual Studio 2015 release, you can also use this

extension, starting with the Visual Studio 2015 CTP 5 release.

Next, I add AngularJS to my project in Visual Studio using the NuGet package manager you could also

download AngularJS directly from http://www.angularjs.org and place it into your own project alongside

your other script files 

.

Now, as I reference the angular.js or angular.min.js files in my source, Visual Studio uses the AngularJS

extension to offer better JavaScript editor support.

Editing with AngularJSLet’s quickly walk through some examples of how the AngularJS extension improves the editing

experience when used with AngularJS, I’ll show you how it provides time saving features like IntelliSense

and code navigation.

Configuring your Angular applicationThe first step in building an Angular application is to create a module in JavaScript that represents my

app. I’m going to create one named “project”:

Page 4: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 4/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://blogs.msdn.m icr osoft.com/visual studio/2015/02/05/using- angul ar js- in- vi sual -studi o- 2013/ 4

Then, I reference it in my main HTML file:

After defining my project module, I want to configure the URLs of my application. To do this, I’ll useAngular’s routing feature, which lets me bind behavior with custom URLs for my application. Below, I’m

starting to setup the routes for my app, using the built‐in Angular ngRoute module and the

$routeProvider API. I’m about to use the .when 

function to define a URL; this function lets me configure

the HTML I want to display and any app logic that I want to run when the URL is accessed:

Here’s what the final code looks like after I’ve configured a “/list” URL, which will load a listController

when it’s accessed. The controller will be responsible for setting up the data/model and behavior that will

be attached to a list.html page for this URL.

Defining a ControllerNow, I’ll define a controller named listController. Here you’ll see I’m using a $scope parameter, which is a

special parameter defined by Angular that is accessible from my HTML view – any members I assign to

the $scope will be available in my HTML.

Page 5: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 5/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://blogs.msdn.m icr osoft.com/visual studio/2015/02/05/using- angul ar js- in- vi sual -studi o- 2013/ 5

IntelliSense shows me the JSDoc comments for the $scope APIs as I use them, this saves me a trip to the

web browser to review API documentation.

Adding a ServiceFor the next step, I want to pass data from the controller to my HTML page. I could code all of my data

into the listController, but I prefer to break up my application into smaller pieces that can be re‐used and

tested in isolation from other features. A common way to do this with Angular is to define a service, which

I can then call from my controller. You can think of a service as a single‐instance object that may be

reused across other parts of your app.

Here I define a projects service that I can call in my controller to retrieve project data. To keep things

simple while I’m getting started, I’m returning a hard‐coded list of objects.

Now I’ll add a reference to the projects service in my listController; I can see IntelliSense is provided for

the projects service when I call it, and the allProjects member is shown:

Building a directiveNow, I want to create a custom HTML component to list the names of projects from my projects service. I

do this by building a directive: a self‐contained component combining visual layout and behavior that I

can attach to HTML DOM elements in my application.

Below, I’m defining a directive named “listProjects”. I’ve included an HTML template that will be used to

generate the HTML for the directive. Next, I’ll write the controller for this directive. The AngularJS

Page 6: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 6/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://blogs.msdn.m icr osoft.com/visual studio/2015/02/05/using- angul ar js- in- vi sual -studi o- 2013/ 6

IntelliSense extension is providing suggestions as I work with the $elements parameter, which lets me

access my directive’s DOM element.

After defining this directive, I use it in my HTML to render the list of projects.

 

Navigating Angular codeFinally, the Go To Definition feature allows me to navigate to the definitions for the APIs I’m using in my

source by right‐clicking on a function or variable defined in my application and selecting Go To

Definition. In this example, choosing Go To Definition will take me to the allProjects member I defined on

my projects service.

Using AngularJS with TypeScriptI’ve spent this post talking about how you can improve the coding experience for Angular in the

JavaScript editor. If you’d like to develop an Angular application using TypeScript 1.4 or greater,

download the Angular .d.ts files from the DefinitelyTyped site or install the AngularJS TypeScript 1.4

NuGet package and add them to your project to get API signatures for Angular.

Page 7: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 7/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://blogs.msdn.m icr osoft.com/visual studio/2015/02/05/using- angul ar js- in- vi sual -studi o- 2013/ 7

Looking ahead to AngularJS 2.0The AngularJS extension supports AngularJS 1.2 and greater at the time of writing, the extension has

been tested through AngularJS 1.3 

. Looking ahead, AngularJS 2.0 will take a new approach to

development from that used in AngularJS 1.x, and it’s likely that new AngularJS 2.0 coding patterns will

require new Visual Studio support. We’re working with the Angular team to ensure a great Visual Studio

experience for AngularJS 2.0.

Help the community improve the

AngularJS extensionIf you have any feedback about the extension or would like to assist the effort, please join us on the

AngularJS IntelliSense project site.

If you want to help contribute to this extension, browse the source on the project site and review the

JavaScript IntelliSense extensibility API documentation for Visual Studio; this is the extensibility API John

used to build this extension.

I want to share a final thanks to John Bledsoe for working passionately on this extension and making

significant improvements to it over the past few months. We sincerely appreciate the support of 

developers like you who share our passion for JavaScript developer tools.

Jordan Matthiesen– Program Manager, Visual Studio JavaScript tools team

Jordan has been at Microsoft for 3 years, working on JavaScript tooling for cli

application developers. Prior to this, he worked for 14 years developing web

applications and products using ASP.NET/C#, HTML, CSS, and lots and lots of 

JavaScript.

Twitter: @JMatthiesen

Download Visual Studio

Page 8: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 8/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://blogs.msdn.m icr osoft.com/visual studio/2015/02/05/using- angul ar js- in- vi sual -studi o- 2013/ 8

Subscribe Facebook

Related Resources

Visual Studio Product Website

Visual Studio Developer Center

Getting Started Resources

Write, Navigate, Fix your Code

Debug, Profile, Diagnose your Code

Share This Post

Search this blog Search all blogs

Language options

Simplified Chinese 中文 

Recent Posts

Top news from January 2016 February 25, 2016

Develop ReactNative apps in Visual Studio Code February 22, 2016

10 things you should try on the leap day February 17, 2016

Node.js: From Zero to Bobble with Visual Studio Code February 16, 2016

Live Now on Developer Tools Blogs

The Importance of the LED Moment ‐ I DID THAT

Notes from the ASP.NET Community Standup – March 1, 2016

Windows Store analytics API now available

Search MSDN with Bing 

Page 9: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 9/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://blogs.msdn.m icr osoft.com/visual studio/2015/02/05/using- angul ar js- in- vi sual -studi o- 2013/ 9

Tags

.NET .NET Framework announcement Apache Cordova ASP.NET Azure Blend C#

Cordova Cordova CLI Dan Moseley debugging editor extensibility extension features

JavaScript MSBuild Node.js Paul Harrington Performance Project Shell Tools for Apache

Cordova TypeScript Unity Universal Apps Visual Studio Visual Studio 11 Visual Studio

2012 Visual Studio 2013 Visual Studio 2013 Preview Visual Studio 2015 Visual

Studio 2015 Preview Visual Studio Tools for Cordova Visual Studio vNext VS2010 VS2012 VS2013

VS 2013 VS Gallery VSIX Weston Hutchins Windows 10 WPF

Videos

Template 10 for

Windows 10 Apps

Page 10: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 10/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://bl ogs.m sdn.m icr osoft.com /vi sual studi o/2015/02/05/usi ng- angul ar js- in- vi sual -studi o- 2013/ 10

Visual Studio Emulator

for Android

Archives

February 2016 

10 

January 2016 

December 2015  3 

All of 2016  16 

All of 2015  103 

All of 2014  56 

All of 2013  38 

All of 2012 

35 

All of 2011  32 

All of 2010  99 

All of 2009 

29 

Angular AngularJS extension JavaScript Visaul Studio 2013Tags

Join the conversation Add Comment

1 year agoJohn Bledsoe

Thanks for writing this up Jordan. In the interest of full disclosure, the seed for this

whole project came from here:

stackoverflow.com/…/22256208

Page 11: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 11/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://bl ogs.m sdn.m icr osoft.com /vi sual studi o/2015/02/05/usi ng- angul ar js- in- vi sual -studi o- 2013/ 1

1 year agoJianwei

1 year agoVitor Canova

1 year agoShan Khan

1 year agoJon Galloway

1 year agoRiza

1 year agoJordan Matthiesen [MSFT]

This truly was a community effort!

Great job, John. Will definitely give it a try.

Nice to see more support for JS in Visual Studio.

Its an good approach to create it as extension to be downloaded from extension

and upgrades from VS13 and allows developer to upgrade it when angular 2.0 arrives.

Good tips. I'd also recommend using the SideWaffle and Web Essentials

extensions.

SideWaffle includes item templates for controllers, directives, etc.

Web Essentials really is essential for editing CSS / HTML / JavaScript in Visual Studio 2013. It includes

modern intellisense files for Angular and installs them directly rather than making you copy a javascript file

to that folder path I can never remember. Info here: http://vswebessentials.com/  madskristensen.net/ 

…/improved‐javascript‐intellisense‐in‐visual‐studio

Great. Please try AngularGo template as well. http://angulargo.codeplex.com/ 

Thanks, Jon. This extension for Angular IntelliSense is the same one originally used

in Web Essentials, but the Web Essentials version doesn't work for all project types, has some performance

Page 12: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 12/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://bl ogs.m sdn.m icr osoft.com /vi sual studi o/2015/02/05/usi ng- angul ar js- in- vi sual -studi o- 2013/ 12

1 year agoSimon

1 year agoNot Responding

1 year agoMike Jones

1 year agoJordan Matthiesen [MSFT]

1 year agoPaul

issues, and it can behave inconsistently due to the order in which it's loaded. I'd recommend using this

new approach with the special References folder instead, it guarantees the load order of the library and

will work more consistently. I'm working with Mads to see how we could ease the installation of this

extension in the future.

Thanks Jordan. How does this compare to the R# AngularJS extension?

Hi, I just installed Visual Studio 2012 Not Responding on a brand new laptop and

— hey, presto! — IT'S NOT RESPONDING! Getting on for a minute now!

Do you have any idea how tiresome that is? I don't even have a solution loaded. I"m in Source Control

Explorer trying to figure out how to map a TFS project directory to a different local directory which is a

whole other triumph of software engineering 

and the entire IDE locked up for a full minute.

Does anybody care about this stuff or are you… Not Responding?

@Not Responding. Jordan would know for certain, but I don't think VS 2012 has

the infrastructure to support this. He is addressing VS 2013.

@Not Responding – Can you follow up with me directly and email jomatthi ‐at‐

Microsoft com? I'd like to find out more about the issues you're running into and ask some more

questions that are better discussed outside of comments.

Thanks!

Good job! Very nice extension.

Page 13: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 13/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://bl ogs.m sdn.m icr osoft.com /vi sual studi o/2015/02/05/usi ng- angul ar js- in- vi sual -studi o- 2013/ 13

1 year agoJaliya Udagedara

1 year agoMatija

1 year agoJordan Matthiesen [MSFT]

1 year ago.nord

1 year agoSoMoN Khan

1 year agoBenjamin Jones

I am sorry, I am trying this on Visual Studio 2013 Update 5 CTP and it's not

working.

Great job! Everything that lights up IntelliSense is a great addition to productivity

as there is no need to switch contexts from VS to documentation. The only thing missing now is some

plugin similar to GhostDoc to press CTRL+SHIFT+D that can add JSDoc comments in *.ts and *.js files, or

maybe there is one you can recommend? Also http://typedoc.io/  produces really good documentation

typedoc.io/…/td.html.

@Jaliya Udagedara Can you submit a new Issue to the project site for this

extension, with some details about your environment? I can help you troubleshoot it some more there:

github.com/…/angularjs‐visualstudio‐intellisense

@Matija For Visual Studio 2015 we've added in native JS editor support for JSDoc comments, you can see

this working with AngularJS in Visual Studio 2015 CTP5 or later. It would be great to hear how well it works

for you.

LightSwitch ??

social.msdn.microsoft.com/…/can‐we‐have‐another‐town‐hall‐and‐detailed‐product‐road‐map‐please

Grt job

Page 14: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 14/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://bl ogs.m sdn.m icr osoft.com /vi sual studi o/2015/02/05/usi ng- angul ar js- in- vi sual -studi o- 2013/ 14

1 year agoJordan Matthiesen [MSFT}

1 year agoShawn Clabough

1 year agoShawn Clabough

1 year agoKevin Raffay

1 year agoStefanDD

1 year agoNoel Abrahams

Hi Jordan,

Having followed your instructions, I still get no intellisense with injected parameters. I am using VS 2013

Community edition – could this be the reason?

Regards

@Benjamin Jones – This will work fine with the Community Edition, so there must

be something else going on. It may be related to a coding pattern you're using or how references are

setup in your project. Would you please report the issue to the project site github.com/…/angularjs‐

visualstudio‐intellisense 

with some more details and I can help troubleshoot there?

I'm unable to download this in either Chrome or IE. "angular.intellisense.js

contained a virus and was deleted" IE 

"Virus scan failed" Chrome 

. Machine is Win 8.1

I was able to left‐click on the file to get it to display in my browser, then copy andpaste to Notepad. It only failed if I tried to directly download.

Outstanding! It looks like angular.js is becoming a first‐class citizen in the

Microsoft stack.

I can't get this to work. I followed the instructions here, no luck. I'm using VS2013

update 4 Pro. Please help…

Page 15: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 15/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://bl ogs.m sdn.m icr osoft.com /vi sual studi o/2015/02/05/usi ng- angul ar js- in- vi sual -studi o- 2013/ 15

1 year agoJordan Matthiesen [MSFT]

1 year agoNoel Abrahams

1 year agoJordan Matthiesen [MSFT]

1 year agoStefanDD

Hi, Jordan, I'm using VS 2015 CTP 5.

I am not very happy that my HTML intellisense is all cluttered up by Angular.

Firstly, why on earth is this not optional?

Secondly, how do I get rid of it?

Many thanks.

@Shawn Clabough – I'm sorry you had issues when trying to download the file. I'm

glad the right‐click solution worked. Please let me know if it was incorrectly detected as a virus when you

added the file to your file system, though.

@StefanDD – Can you report your issue to the project site, where I can help troubleshoot this further?

github.com/…/angularjs‐visualstudio‐intellisense

Sorry, I just realised that this is probably the wrong place to complain about the

HTML intellisense.

@Noel Abrahams – Thanks for the feedback about Angular IntelliSense in the

HTML editor; I did pass it along to the team working on that.

I got it to work: I was missing the _references.js file in my project. I figured that out

by reading more about the project at github.com/…/angularjs‐visualstudio‐intellisense

Thanks!

Page 16: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 16/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://bl ogs.m sdn.m icr osoft.com /vi sual studi o/2015/02/05/usi ng- angul ar js- in- vi sual -studi o- 2013/ 16

1 year agoShawn Cicoria

12 months agoSrinivasan

12 months agoCharles Roper

12 months agoSelebalo

11 months agoJeff Dunlop

a NuGet package has been added to support this http://www.nuget.org/ 

…/AngularJS.Intellisense

Really very helpful, I'm really excited about this extension.

For anyone else having problems getting this to work, you do indeed need a

_references.js file. Thanks to StephanDD for the pointer. More background on the _references.js file can befound at the following:

‐ madskristensen.net/…/the‐story‐behind‐_referencesjs

‐ gurustop.net/…/javascript‐js‐intellisense‐auto_complete‐in‐visual‐studio‐11‐beta‐the‐web‐_references‐js‐

file

Great post!

This does not work for Cordova Multi‐Device projects though.

Re:

var app = angular.module 

"project", ["ngRoute"] 

;

app.controller 

"listController", ["$scope", function $scope 

{}] 

;

This introduces a global and simply is never necessary. I really wish blog writers could pick up on this so

that people new to Angular would stop picking up this bad habit. Instead:

angular.module 

"project", ["ngRoute"] 

;

Page 17: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 17/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

https://bl ogs.m sdn.m icr osoft.com /vi sual studi o/2015/02/05/usi ng- angul ar js- in- vi sual -studi o- 2013/ 17

11 months agoDennis

11 months agoJordan Matthiesen [MSFT]

11 months agoJeremy W

11 months agoJordan Matthiesen [MSFT]

angular.module 

"project" 

.controller 

"listController", ["$scope", function $scope 

{}] 

;

Hi Jordan – great with IntelliSense, but I seem to have a problem with IntelliSense

inside controller functions see example below 

– am I doing something wrong?

app.controller 

'testIt', ['$scope', 'srvDate', function $scope, srvDate 

{

 

srvDate.WORKING intellisense works here½ 

$scope.TestFunc = function {

  srvDate.NOTWORKING here there's no intellisense 

}

}] 

;

@Jeff Dunlop – great point, I absolutely agree that you don't want to pollute the

global namespace. In this article I only I chose to assign the module to a variable to make it easier to read

samples throughout the post.

How on earth do I find the screen in the article referred to as the 'Nuget Package

Manager', where the package 'AngularJS Core' is being installed? I'm using VS2013 Pro.

I can find the Extensions and Updates window but not the version seen above. I have the Nuget Package

Manager installed but from the Tools menu I only have options to open the Settings and Console.

I ask because I cannot see things like 'Nuget.org' listed under the 'Online' menu, and I cannot find an

Extension/Package called "AngularJS".

This is very confusing.

Page 18: Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

8/19/2019 Using AngularJS in Visual Studio 2013 _ the Visual Studio Blog

http://slidepdf.com/reader/full/using-angularjs-in-visual-studio-2013-the-visual-studio-blog 18/18

3/2/2016 Using AngularJS in Visual Studio 2013 | The Visual Studio Blog

10 months agoEduardo

10 months agoShoshana

3 weeks agoNoel Abrahams

@Jeremy W – You can open the NuGet Package Manager dialog by right‐clicking on your project in the

Visual Studio Solution Explorer and choosing the Manage NuGet Packages… menu.

Hi Jordan,

I tried to use this on VS 2015, but so far it is not working for me, I followed your instructions and added it

to the global javascript references and it didn't work, I also tried adding it directly to the angular file

location but got the same results.

I created a ticket with a more detailed explanation of my case: github.com/…/25

Thanks, Nice and Helped

@JordanMatthiesen, one year on and there doesn’t seem to be a way to turn off 

AngularJS intellisense for HTML tags. Do you know if this is possible?

© 2016 Microsoft Corporation.

Terms of Use   Trademarks   Privacy & Cookies