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.
Related
I have created an website/application using Angular2. The infrastructure is all set, I have routing completed, sass being processed etc.
I have sections (components) on this website that will display current web standards for our designs (buttons, forms, copy). The purpose of this site is to give our developers a copy/paste solution for markup and sass.
We will most likely create our own css library but they will still need a good visual reference of what each class does and a copy/paste solution.
I know how to develop all the standards, what I don't know how to do is have the DOM display options for the user to copy/paste the code. I could manually enter the code into or tags but this will be hard to maintain and not very clean approach. I'd like to find some solution that will utilize my code and create these tags at run time.
Googling this question leads down the road of using living style guide generators, which i don't want to use... why? I like having the functionality of controlling my own layout and scaling my standards as I see fit with our own technology.
Any ideas?
After exploring this even further I ended circling yet again on documentation tools (KSS) where I would need to rebuild my entire style guide for this functionality using markdown and or JDOCs.
Solution!
Use CodePen, its free to signup however there are some nice to have features for a monthly fee. I easily created my code here using SASS, HTML and CSS libraries. CodePen has a great EMBED feature whereas I could copy/paste html or iframe right to my styleguide.
Problem is now solved, and we have have a dynamic Web & UI Styleguide.
Hope this method helps others in my situation.
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.
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 => ///
I am creating an PoC app using Adobe AIR with AngularJS, the main idea behind this is that the first version will run as stand-alone and then we will host it somewhere to make it web-based. When I started to test ng-model, ng-click and some other basic notations, it seems that AIR doesn't like them and is unable to angularize the DOM. My guess is that the way that AIR parses and renders the DOM is different from what is expected from AngularJS, although it supposes to use Webkit(and it actually behaves like Safari, CSS3 wise).
Is there a way to force angular to wait to compile? Any ideas are appreciated. Thanks!
I guess I am just encouraging the AIR haters or whoever downvoted my valid question but he/she didn't have an answer or more questions. So, just because I didn't want to re-work creating this on MXML/AS3 and then rewriting on HTML/JS(i won't post an app on AIR mainly because of the skinning), I went with Node-Webkit. So far, so good.
If you need to do something like what I am trying to do, I guess that Node-Webkit is a good alternative. I think that the installer will be more work than just packaging an AIR app but I couldn't make AngularJS to work on AIR.
You can manually bootstrap angular - https://docs.angularjs.org/guide/bootstrap
Typically, developers allow angular to automatically bootstrap by adding ng-app="myApp" to the DOM node they want to "angularize". To manually bootstrap, remove that attribute altogether, then run the code below when you want to initialize angular.
angular.bootstrap(document.getElementById('#myAppContainer'), ['myApp']);
That said, my opinion is that your switch from AIR to Node-Webkit was a great choice and is the way to go.