Tuesday, 15 April 2014

angularjs - Html angular intellisense in visualstudio -



angularjs - Html angular intellisense in visualstudio -

i wondering how intellisense angular on html pages in visual studio 2013 update 3

i can intellisense js pages using _references.js. to able reference controllers , properties in html quicker coding.

so if have

ng-controller=""

i able references controllers have created.

also in ng-repeat. if have created

ng-repeat="foo in vm.foos"

i intellisense able pick properties foo utilize

{{foo.fooproperty}}

is possible?

i have web essentials 2013 update 3, not functionality. thinking of moving webstorm ide because has built in prefer have in visual studio

updated 2/16/2016 added comments , attribute type examples

this hack visual studio's own internal files, beware when upgrading visual studios.

by editing html.xsd file, can add together custom directives, directive attributes, , directive attribute value options.

copy , paste location in windows explorer location bar:

location visual studio 2013

c:\program files (x86)\microsoft visual studio 12.0\common7\ide\commonextensions\microsoft\web\schemas\1033\html

location visual studio 2015

c:\program files (x86)\microsoft visual studio 14.0\common7\ide\extensions\microsoft\web tools\schemas\1033\html

make re-create of html.xsd file , backup new location.

look line @ around 103 begins:

class="lang-xml prettyprint-override"><xsd:group name="flowcontent"> <xsd:choice> <!-- add together references 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 farther down, before closing tag, add together element definitions each of directives.

class="lang-xml prettyprint-override"><!-- 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 few attribute types want utilize in our fancy element example. --> <!-- create type enumerate values of attribute --> <xsd:simpletype name="scopevalues"> <xsd:restriction base="xsd:string"> <xsd:enumeration value="these items" /> <xsd:enumeration value="show in scope option" /> <xsd:enumeration value="dropdown in visual studio" /> </xsd:restriction> </xsd:simpletype> <!-- define allowed icons 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 maintain 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> <!-- element 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> <!-- attribute grouping references mutual attributes "id" "class", etc. our custom element --> <xsd:attributegroup ref="commonattributegroup" /> <!-- can define own custom attribute grouping --> <xsd:attributegroup ref="iusethesescopevaluesalot" /> <!-- define more properties on scope --> <xsd:attribute name="directive-scope" /> <!-- hint scope value must boolean --> <xsd:attribute name="isdisabled" type="xsd:boolean" /> <!-- can define own often-used attribute types --> <xsd:attribute name="icon" type="myicons" vs:icon="icomoon.png" /> <!-- or 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 in scope option" /> <xsd:enumeration value="dropdown in visual studio" /> </xsd:restriction> </xsd:simpletype> </xsd:attribute> <!-- enumerates same value options attribute mydropdown1, we've pointed reference --> <xsd:attribute name="mydropdown2" type="scopevalues" /> </xsd:complextype> </xsd:element>

as cherry-on-top, can add together vs:icon="mycustomicon.png" each attribute or element own icon in dropdown, place 16x16px png in 1033\html folder (the same folder updated html.xsd).

i found had restart visual studio twice these take. , create sure provide administrator rights when re-create new files or save new files programme files directory. if don't administrator warning, either you've disabled them, or something's not quite right. in setup found wasn't able save straight 1033\html folder, had drag files folder after saving in folder outside "program files" folder.

angularjs visual-studio intellisense

No comments:

Post a Comment