How to create a simple angular js project in webstorm - javascript

I have installed webstorm and trying to create a simple angular js program.
I have created an empty project in webstorm, then added the angular.js file in libs directory. Then when I try to write code for angular js the auto completion is not working.
Here is the screenshot of the issue.
Please help me how to create angular js programs in webstorm?
Update:
Now I have added Angular JS as a dependency by following the steps Installing AngularJS Manually in JetBrains Doc. Also removed the angular js file from my project which was present as part of my 1st image in this post.
Even then I am not able to see the auto-completion working. I have verified that the angular js plugin is enabled in my webstorm. Please let me know what could be the issue?
Update:
I have plugin for Angular JS already enabled in my webstorm, please check below image:

Not really an answer (have you saved your HTML, why not put your JS code into external files)... but why not create a project with a generator using Yeoman - http://yeoman.io/ That will give you a better app structure, build tools, package managers, unit tests... and your IDE should be better equipped for this.
This may help too: http://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/

There is a AngularJs plugin for Webstorm. This will give you autocomletion in html files. See this tutorial how to install it:
youtube tutorial
There is even a documentation page form JetBrains which explains how to creat a AngularJs Project:
JetBrains Doc

Found in WebStorm doc
Configure AngularJS as a WebStorm JavaScript library, to let WebStorm recognize AngularJS-specific structures and provide full coding assistance:
Open the Settings dialog box, and click JavaScript Libraries.
In the Libraries area, click the Add button.
In the New Library dialog box that opens, specify the name of the library.
Click the Add button add next to the list of library files and choose Attach Files or Attach Directory on the context menu, depending of whether you need separate files or an entire folder.
Select the Angular.js or Angular.min.js, or an entire directory in the dialog box that opens. WebStorm returns to the New Library dialog box where the Name read-only field shows the name of the selected files or folder.
In the Type field, specify which version you have downloaded and are going to add.
If you added Angular.js, choose Debug. This version is helpful in the development environment, especially for debugging.
If you added the minified Angular.min.js, choose Release. This version is helpful in the production environment because the file size is significantly smaller.
Or check out this blog post

Related

How to implement plugins into Electron app?

I'm looking for a way to implement "Plugins" for my Electron tool.
Below is a pseudo example of how I'm thinking it would work
Supply .js/.zip/plugin file
File would contain name of plugin, and it's category (Global, Team centric, Misc)
File would contain HTML for the GUI, which get's placed in a div designated for tool space. This name would be added as an option to the necessary Select, as well as logic added to pull in the HTML to the same div
In the tool, select the plugin file:
page will load the JavaScript script, and add option to select along with logic to switch to the plugin
The hope is to automate my current process.
Currently I'm manually updating the index page to reference the new JavaScript script, and to add the option on the select
The JavaScript Script has logic in it looking at the Select, and looking to see if the option was selected
which then pulls in it's own HTML via a function within
Is there anything I can reference/utilize to make this work?
After 4+ months of working on this, I've managed to get this to work. I will try to outline my approach.
Each "plugin" or "tool" will need it's own .js file
the js file should contain an exports.html function that will return the html for the tool
the js file should contain an exports.Events function that adds all relevant event listeners
create a json file cataloging each tool, along with information needed i.e. a description, image path, .js file path, etc.
require the .js file when selected, load the html and the events
parse the json to figure out which tool to load along with needed info
all i need to do is update the json file and upload the .js file to add a new plugin.
I developed an electron app using vue as the front-end.
My idea was to develop plugins as vue plugins and publish via npm.
I used live-plugin-manager to install and uninstall plugins.
The dependencies were automatically removed by making use of a counter
The only problem I faced was how to load these installed plugins into my main app.
The workaround I found was posted as answer to my own question at How to use electron to load the vue plugins installed dynamically into a plugins folder
Hope it helps
I know I'm a little late to the party but I encountered the same problem. To solve it I have built a plugin framework for Electron called Pluggable Electron and it is available on npm.
The framework handles the lifecycle of plugins, provides as npm packages, like installation, activation, removal, etc. The plugins can then be called on at any time to exend the core app functionality.
The framework is still under development but you can find a 1st version here: pluggable-electron.
I expect it is too late for Marker but still answering here for anyone else that might have this question.

Javascript intellisense in VS2015 unit test project

I'm writing my angular unit tests in a Unit Test project in VS2015 but I cant get intellisense for the javascript. I've tried adding a _references.js file but had no joy. Is this even possible in this project type? Or can you only have js intellisense in a webapplication?
From this link Javascript editor improvements
Whenever you reference the angular.js (or angular.min.js) library in your code, editor automatically provides IntelliSense, Go to Definition, and navigation bar support:
So as long as you have these referenced in your test project it should work
I just upgraded to VS2015 and had the same problem. It worked just fine under 2013.4. It appears that VS is not resolving the _references file when the project type is not a web based one (mine was also an angular unit test project that was setup as a regular app project type).
Quick fix that worked for me was to manually add _references to the intellisense list.
Tools -> Options -> Text Editor -> JavaScript -> Intellisense -> References
Add ~/Scripts/_references.js to the Implicit (Web) category
It then worked correctly. Alternatively I suppose you could create a new Web project and move all your code to it but that seems like way too much work.

How to add a file library and be able to edit it

I want to use a specific file in Webstorm IDE for help with the autocomplete on other files, Im using the module pattern so one file has the main methods used for the others modules. So in Webstorm I added this file as a library as is explained here http://www.jetbrains.com/webstorm/webhelp/configuring-javascript-libraries.html .
The problem is that now that is a library I CANT edit it any more or add new code to this file. So I have to remove it from the Webstorm scope to be able to edit it. And then add it again in the scope(library) when Im working in the other files and has the ability to use the autocomplete.
So how can I add this file as a library AND tell webstorm that he should let me add and edit current content for this file?
Library files write protection was implemented by design to prevent users from making accidental modifications to them. Recommended workflow is to open library files as separate project for editing, or include them not as "library" but as a separate content root. http://youtrack.jetbrains.com/issue/WEB-1065 requires making the current behavior optional. You are welcome to vote for it

What is the purpose of library registration and does it make any difference if I they are just added to the project?

I am integrating the jquery file upload plugin in my asp net mvc 4 project.
I have got a asp net mvc 3 implementation and it works as I could test it.
When I add all js, css, c# and view files to my project, I loads but I don´t see any changes when trying to select/upload a file.
As I could notice, the input file in bound to a onChange event that should trigger when a file is selected. But it is not.
Html.RequiresJs("jquery/1.7.1/jquery.min.js", "googleCDN", 1);
Html.RequiresCss("Bootstrap/bootstrap.min.css", "Content", 2);
There are plenty of them. Also I have add thos files in the proper folders and add to a bundle so it is loading as soon as the application starts. (I could verify that either.)
Yet I am unable to find the reason those events are not triggering.
What is exactly the purpose of those registrations? Does it have some impact if they are not registred and just add to my project as I stated before?
The plugin is that:
https://github.com/blueimp/jQuery-File-Upload#download
RequireJs and RequiresCss and features of Clientdependency
http://clientdependency.codeplex.com/

How do I get IntelliJ IDEA to display directories?

I've been trying out IntelliJ IDEA for JavaScript editing, and I like it so far, but I'm having a small problem with a new project.
I can't seem to be able to get IDEA to display the directories in the project directory in the Project view. Even if I manually add a directory, it refuses to display it.
I think this probably has something to do with the fact that it tries to apply Java conventions, but when I imported an old Eclipse project, it showed all directories just fine.
Do I have to use Eclipse to create projects and import in IDEA to get the directories visible, or is there some other trick?
I am using IDEA version 8.1.3, and the code is just a plain bunch of HTML and JavaScript files, not in any kind of a Java environment.
It appears I need to manually create a Java module (File->New Module) inside the project to actually see the "proper" directory view. I do wonder why it didn't show up when I created it with the project.
I've been struggling with this same problem and found another reason why directories may not show up correctly. Make sure the "Content Root" is correct.
Click on the project
Select "File"->"Project Structure"
Select "modules" from the left column, and select a module.
On the sources tab you will see the current "Content Root" along with a button to add a new content root.
Make sure that content root is correct. When in the project structure view you will only see files below the "Content Root". I'm fairly new to IntelliJ but I think of the content root as the basedir in ant terms.
These instructions are for IntelliJ 9.x
Hope this helps someone.
Current more straightforward logic:
remove the .idea/ folder
select in Idea File -> New project.
in left menu select Web Module, and then set up project folder
you're done!
I found the solution thanks to Thurman Sanders and decided to post a more clear answer, in case it helps anyone else. I know an answer like this would have saved me 5 minutes of fumbling around.
Problem
Some folders are excluded, by default. In most cases, this is exactly what you want. Other times, you need to see your "build" or "target" folder, for example.
Solution
Make Intellij stop excluding the folder you want to see
Open the Module Settings
select the module and press F4
or right click the module and choose "open module settings"
or press cmd; to open project settings, then select your module
Follow the steps in the picture, below:
select the 'sources' tab
select the folder you want to see
disable the 'excluded' option
Press OK
When you're done, the folder will turn orange and finally be visible in the project view!
Simplest way to do this!
Reading some of the other answers, they require you to go into Project Structure -> Modules and check that the sources are not excluded.
But in my case - there are no modules defined in the project at all, so that didn't help.
To easily create a module for your project and therefore show the folder structure -
Go to File menu -> New -> Project...
Select Static Web. Note: it does not matter if your project is "web" or not!
Hit next, then fill in the same Project Name: and Project location: as you have already.
IntelliJ will say "File Already Exists" - "Would you like to overwrite it?" - answer Yes.
Bam! Your Project Pane with the Project view selected should now instantly show the folder structure of your project.
If you have a maven project, you will need to add the root pom.xml in the Maven Projects window.
And if you want to add java to your project later, you should probably configure a JDK also.
Just use File » New Project » Static Web. All your files and directories will show up.
File -> Invalidate Caches / Restart worked for me.
The same problem had me going crazy for a couple of hours as well, coming from Netbeans where I could just start a new project and import any source tree. My project is PHP/JS and has nothing to do with Java, so it was not intuitive to have to create a Java module, just so I could see my files listed.
I found the solution (covered above) here for more insight.
Here is how I was able to "display" all folders in my project:
Somehow get to the Project Settings page (for me it was right-click the project then select Modules)
Make sure the Sources tab is selected
You should see a section in the middle entitled "Excluded Folders" under Source\Folders"
Click on the X next to it to remove it from being excluded and it becomes visible.
Hope it this helps.
I think this is happening to you as intellij's Project window has the 'Compact Empty Middle Packages' option as checked by default. You will find this option under Setting section of the Projects tab.
I had a test folder which wasn't displaying in IntelliJ. It turned out that it had no files in it, IntelliJ was only showing folders that had some files in them. When i manually added files in test folder via Explorer, it reflected back in IDE.
It happens sometime. You need to go to the configuration (Project Settings) and add the Source folder as content root and then possibly set source/resource etc. from the configuration tab. Apply all the changes and you should be done.
Just me own 2c. I used "New" -> "Module from existing sources" to get IntelliJ to show folders and files from inside a Github Java project. Hope this helps someone.
Platform : Intellij2019.3 Macos10.12
The solution is:
go to the File - project structure - Modules
In the left column, + Add Content Root, and add the folder you hope to use as the root directory.
mark the folder you want to compile as source root
rebuild
Just go to View -> Tool windows -> project or Alt+1
I had a similar problem, this fixed it:
File -> New -> Module from Existing Sources...
I chose the src folder and then it detected the rest on its own.
If you still have issues, try reimporting project by doing:
File -> New -> Project from Existing Sources...
In the project explorer window (where all the classes are), switch from "packages" view to "project" view. Then all files, not just classes are displayed.

Categories

Resources