Html angular intellisense in visualstudio

Question

I am wondering how to get intellisense for angular on html pages in visual studio 2013 update 3

I can get intellisense for the js pages using the _references.js. However i would like to to be able to reference controllers and properties in the html for quicker coding.

So if i have

ng-controller=""

I would like it to be able to references all the controllers i have created.

Also in a ng-repeat. If i have created

ng-repeat="foo in vm.foos"

I would like intellisense to then be able to pick up all the properties for foo to use

{{foo.fooProperty}}

Is this possible?

I do have web essentials 2013 update 3, but i do not get this functionality. I am thinking of moving to the webstorm IDE because it has it all built in but would prefer to have it in visual studio

Answer 1

Updated 2/16/2016 with added comments and attribute type examples

This is a hack into Visual Studio's own internal files, so beware when upgrading Visual Studios.

By editing the html.xsd file, you can add custom directives, directive attributes, and even directive attribute value options.

Copy and paste this location in your Windows Explorer location bar:

Location for Visual Studio 2013

C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\CommonExtensions\Microsoft\Web\Schemas\1033\HTML

Location for Visual Studio 2015

C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\Schemas\1033\HTML

Make a copy of the html.xsd file and backup to a new location.

Look for the line at around 103 that begins:

<xsd:group name="flowContent">
    <xsd:choice>
        <!-- Add references to your Custom Elements here-->
        <xsd:element ref="my-simple-directive" /> 
        <xsd:element ref="my-complex-directive" /> 
        <xsd:element ref="a" />
        <xsd:element ref="abbr" />
        <xsd:element ref="acronym" />
        ...

Then further down, before the closing tag, add the element definitions for each of your directives.

<!-- A basic custom element-->
<xsd:element name="my-simple-directive" vs:description="108">
  <xsd:complexType>
    <xsd:choice>
      <xsd:group ref="flowContent" />
      <xsd:group ref="phrasingContent" />
    </xsd:choice>
    <xsd:attributeGroup ref="commonAttributeGroup" />
  </xsd:complexType>
</xsd:element>

<!-- Define a few attribute types that we 
want to use in our fancy element example.  -->

<!-- Create a type to enumerate values of an attribute -->
<xsd:simpleType name="scopeValues">
   <xsd:restriction base="xsd:string">
     <xsd:enumeration value="these items" />
     <xsd:enumeration value="show up in scope option" />
     <xsd:enumeration value="dropdown in visual studio" />
   </xsd:restriction>
</xsd:simpleType>

<!-- Define allowed icons for an icon attribute -->
<xsd:simpleType name="myIcons">
   <xsd:restriction base="xsd:NMTOKEN">
    <xsd:enumeration value="pause" />
    <xsd:enumeration value="play" />
    <xsd:enumeration value="rewind" />
  </xsd:restriction>
</xsd:simpleType>

<!-- Define attribute groups to keep your code dry -->
<xsd:attributeGroup name="iUseTheseScopeValuesALot">
 <xsd:attribute name="isBusy" type="xsd:boolean" />
 <xsd:attribute name="icon" type="myIcons" />
 <xsd:attribute name="isDisabled" type="xsd:boolean" 
    vs:icon="myIcon.png" />
</xsd:attributeGroup>

<!-- An element with custom attributes-->
<xsd:element name="my-complex-directive" vs:description="108"  vs:icon="my16x16pxIcon.png">
    <xsd:complexType>
        <xsd:choice>
            <xsd:group ref="flowContent" />
            <xsd:group ref="phrasingContent" />
        </xsd:choice>

        <!-- The attribute group references common attributes
        like "id" "class", etc. for our custom element -->
        <xsd:attributeGroup ref="commonAttributeGroup" />

        <!-- I can even define my own custom attribute group -->
        <xsd:attributeGroup ref="iUseTheseScopeValuesALot" />

        <!-- Define more properties on scope -->
        <xsd:attribute name="directive-scope" />

        <!-- Hint that the scope value must be a boolean -->
        <xsd:attribute name="isDisabled" type="xsd:boolean" />

        <!-- You can even define your own often-used attribute types -->
        <xsd:attribute name="icon" type="myIcons" vs:icon="icomoon.png" />

       <!-- Or just define them inline -->
        <xsd:attribute name="myDropdown1" vs:multivalue="true">
            <xsd:simpleType>
                <xsd:restriction base="xsd:string">
                    <xsd:enumeration value="these items" />
                    <xsd:enumeration value="show up in scope option" />
                    <xsd:enumeration value="dropdown in visual studio" />
                </xsd:restriction>
            </xsd:simpleType>
        </xsd:attribute>

    <!-- This enumerates the same value options as the attribute
    myDropdown1, but we've just pointed it to a reference -->
    <xsd:attribute name="myDropdown2" type="scopeValues" />

    </xsd:complexType>
</xsd:element>

As a cherry-on-top, you can add a vs:icon="myCustomIcon.png" to each attribute or element to get your own icon in the dropdown, you would then place this 16x16px PNG in the 1033\HTML folder (the same folder as your updated html.xsd).

I found I often had to restart Visual Studio twice to get these to take. And make sure you provide administrator rights when you copy new files or save new files into the Program Files directory. If you don't get an administrator warning, either you've disabled them, or something's not quite right. In my setup I found I wasn't able to save directly to the 1033\HTML folder, I had to drag the files into the folder after saving in a folder outside the "Program Files" folder.

Answer 2

Try Resharper - While it only supports some AngularJS, it does a very nice job. Here is a ReSharper blog regarding