By proper I mean intellisense for HTML and JavaScript, i.e.
Typing <div ng-></div> should show intellisense as below.
and typing (in .js files) angular. should promt me with intellisense for controller, config etc as seen below (i'm after a more accurate intellisense than shown below actually, it seem to be giving me regular JS support, not Angular).
I'l also like support for your own controllers, so in the case you've defined your customController and/or service with your customFunction, i'd like that to be shown as well.
Here you can read about Using AngularJS in Visual Studio 2013, the article explains how to copy-paste a special angular.intellisense.js file into your C:\ drive.
Here's a SO answer regarding how to enable AngularJS support for ReSharper in Visual Studio. When I try this I only get the HTML intellisense, I get nothing for JS files to work.
Mads Kristensen points out The story behind _references.js in VS that will add JavaScript intellisense for the files you like.
I get the impression that all these ways can be solutions to the same problem: Getting AngularJS support in VS, but which is the most neat approach? Currently i've tried all of them and I feel there something i'm doing wrong, as i'm not very impressed so far.
Thanks a bunch for any help!
Try dragging angular.min.js file directly on the top of your .js file
surely it'll enable all the inbuilt intellisense, not sure about the custom controllers or directives you make.
hope it helps you :)
write this at the top of .js file starting from 3 forward slashes => ///
Related
Two IMPORTANT clarifications first:
1. I'm looking for advice about VS2017/19, NOT VSCode.
2. I've looked through other threads about this. Link them if you so desire, but please explain what you want me to see in those threads.
Problem:
When I write html in a .tsx file, it does not autocomplete the html tags. (It does recognize the html tags, however - no problem there).
Attempted solutions:
1. In tools > options > text editor, I looked for settings pertaining to JSX. Under HTML I see the setting for autocompleting tags. However I do not see anything for JSX. I see typescript, but there are no settings there about jsx.
2. I've looked into creating my own legacy language service. This looks like it may work but is sort of reinventing the wheel. I can't believe it would be so hard to get autocompletion in JSX.
3. There may also be some extension I can write? I'm not familiar with writing vs extensions.
On learn.microsoft.com/en-us/visualstudio/javascript/javascript-in-vs-2017?view=vs-2019#/JSX they say "JavaScript in Visual Studio 2017 has rich support for the JSX syntax that allows HTML tags within JavaScript files." It really seems to imply that what I'm looking for exists... somewhere.
Any help is appreciated. Thanks.
Not sure, If this is the right place to ask this question as its not related to any coding area problem.
My project, developed in AngularJs with web api, using VS2015, have grown big in code and structure. I have written many modules with directives, controller and services. If I am using webstorm I can easily navigate to directive definition from html by pressing CTRL + Mouse Left Click.
Is there any way like plugin or addon which I can add to Visual studio and manage to get same functionality?
I tried this but not much useful.
Try to check out these articles:
https://blogs.msdn.microsoft.com/vscode/2015/05/21/getting-started-with-angular-and-visual-studio-code/
https://code.visualstudio.com/Docs/languages/javascript
I know they're tutorials for VS Code, but the shortcuts might be the same.
This is probably a silly question but i am having troubles programming in angularjs with visual studio whenever i separate the application to different files.
For example, if i include everything in the same file (index.html):
<script src="libs/angular.min.js"></script>
var app = angular.module('myApp', []);
Visual studio automatically understands what is the object angular and what functions in contains and whenevery i type "angular.", it opens a window with suggestions.
But when i separate everything to different files, for example: app.js, routing.js, controllers.js, etc...
The application still runs but since i include angularjs in one file and use it in a different file, visual studio doesn't "help" me anymore...
So yeah.. it's silly but it really helps me program, especially because i'm new to angularjs.
Is there a way to fix it?
Thanks,
Arik
NuGet
If you would like to add AngularJS intellisence to your project you should add the NuGet package by John Bledsoe. There is a full article here it explains how to add the package so you have the coding help you require.
File Structure
There is a great article here that shows you the best way to structure your AngularJS application. Its a great article and can help when handling larger AngularJS projects but should be used even for smaller apps.
Angular highlighing stopped working.(For example I get undefined attribute ng-app). Before I had an option under configure to convert the project to an angular project, but that option is now missing.
I tried reinstalling angular plugin, I even updated to luna but I lost any angular capabilities.
Great light angular.js in webstorm with angular plugin, the better ispolzuite it and I think You will like it.
Оtherwise with eclipse try Eclipse AngularJS Plugin Configuration
http://www.youtube.com/watch?v=k2ulCdYz-zM
or
http://blog.diniscruz.com/2014/02/using-angularjs-in-eclipse-part-3-wire.html
Eclipse seems to be falling behind when it comes to writing angular code. I had issues trying to get a legitimate plugin for es6 as well. If you're willing to try out a new editor, you might want to consider intelliJ IDEA which will also allow you to write easily in Java or Spring.
If you're just writing angular, with no server side needs, vs code is free, lightweight, and incredibly handy. Before acquiring a license for intelliJ, I just opened up the angular part of my application in vs code and edited it there. You can even download angular "snippets" to scaffold common structures like controllers or routes for you.
I've managed to get intellisense for the ng- directives in the HTML. I also get intellisense for most javascript files. However, I have no idea how to get intellisense for bits that are injected. Consider the following:
function mandatsCtrl($scope, Domiciliation, logger, $q) {
}
how to I get intellisense for $q or $scope, which are injected ?
I created a javascript file that you can reference that gives (nearly) complete AngularJS intellisense in JavaScript files, including on your custom factories, services and so forth.
https://github.com/jmbledsoe/angularjs-visualstudio-intellisense
As far as I know you can't do nothing like that.
But if you are using ReSharper you can try AngularJS support for ReSharper plugin. It's in the early stage so I guess we can expect a lot more over time.
Here's another link for HTML5Schema (all the ng-* attributes available in Intellisense).
I guess you already have that.
There is also a Chrome plugin AngularJS Batarang. Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications.
I'm looking forward to other answers.
You can get intellisense on injected parameters (and just about everything else) if you use TypeScript. TypeScript let's you specify the type of your parameters so VS will know how to use them.
eg.
/// <reference path="./angular.d.ts" />
function mandatsCtrl($scope: ng.IScope) {...}
Have you taken a look at this: https://github.com/matijagrcic/AngularJS-Intellisense-For-Visual-Studio
I have got Intellisense for $scope and $q through one of the extensions I have (think it must be 'Web Essentials 2012'), although it doesn't seem to be particularly intelligent Intellisense - it's just suggestions of every single possible JS method/property.