Its been about a month since I started using AngularJS. I used to write my codes in SublimeText2 but i wanted to use WebStorm since it claimed to be more AngularJS friendly. I wrote a simple Hello World app and tried to run it but i couldn't get any hint of how to do it. I also don't have any knowledge about Node.js.Do i need Node.js to run app on WebStorm? Is Node.js a server? I tried going through tutorials on WebStorm page and also read few articles on Node.js but couldn't understand it. Can anyone explain it in a simple and understandable way?
You can open your HTML+JS application in the selected browser in WebStorm by clicking on the browser icon on the top right corner of the editor tab with index.html file opened (or any other html file you'd like to open in browser).
The same action could be done from the file context menu: Open in - Browser.
WebStorm will automatically start built-in web server for your convenience.
Note that you still can go to your project folder and execute your particular HTML file from there, the same way you would do it with the text editor.
Read more on working with AngularJS in WebStorm in this blog post.
If you have back-end in Node.js for your app, then you, of course, need Node.js installed. To run your node web app you need to create Node.js run configuration. More on it here.
Related
How can I run my AngularJS Application in the IntelliJ IDEA? I use the last version of the IntelliJ IDEA and I installed the AngularJS support with the IntelliJ IDEA AngularJS Plugin. I wonder, that I cannot define some Server Run/Debug Configuration (like Tomcat) to run my application.
Is there a way to do this?
EDIT: Or there is some other way to deploy the application? I cannot find any suitable Run/Debug Configuration to somehow deploy my project locally.
Well, you need an application server to run the application. I'm using IntelliJ Idea with a local JBoss.
Build your modules and deploy them on the JBoss. You can even use an automated front-end build process with bower and gulp.
If you are only using javascript you don't even need a local server running, js is executed in the the browser. A JBoss, Tomcat or other application server is used for your server logic (e.g. Java code).
A 'lisa p' says:
You need an application server to run it locally on, such as JBoss.
Unless it's a static application (i.e. no dynamic content) in which case, just open your index.html file in a web-browser.
Ideally, if you wanted to continue to develop more pure AngularJS projects, then use Jetbrains' WebStorm IDE instead of their IntelliJ IDEA IDE.
IntelliJ is for Java Development, WebStorm is for Web and JavaScript Development.
To run Angular application without Tomcat/JBoss, we need to create a "JavaScript Debug" configuration. To do this, follow the instructions below.
In intellij menu bar, Choose Run --> Edit Configurations
Click green plus (+) sign and choose "JavaScript Debug"
For the value in URL box, navigate to the index.html file by clicking the little button[...] next to URL field
For the rest of the values in the form, follow the screenshot below
I am using Visual Studio Community 2015 to build HTML-Pages as I like the editor. Today I am working on a page which generates its content with AngularJS and is being formatted by Fullpage.js
Now I am trying to debug my page. When I am launching it with F5 on Visual Studio, Angular works as it should and creates all data I want it to create, but fullpage.js does not work (no console errors, just not doing anything at all).
If I am opening the html file manually in my browser, the exact opposite happens: Angular does not work (I tracked it down to the part of my code where I fill my $scope via $http.get() to a local json file), but fullpage.js seems to work fine, just without content.
I imported fullpage, angular and jquery through the nuget packet manager, might that be the issue or am I missing something?
Have you tried to deploy your code to a different server instead of opening it up in your browser? This sounds like a CORS problem.
I have an angular.js web app, suddenly I have noticed that when I edit sources in WebStorm and click "Run" and my app opens in chrome browser, all sources are still old ones, they didn't updated! How can I fix that?
My local webserver hosts by node.js
As I said I'm very new to JS, and the problem was that sources in index.html were taken from example website and not from local sources, that it, pretty dumb issue, but it was a problem for me
I want to create an angularjs app but each time it requires to press the refresh button in the browser to get the update. thus it bring to this question:
Is there any way to get live update while writing angularjs app? So I don't need to press the refresh button each time I make changes in my angularjs app.
Yes, you can use grunt which is a task runner written in node, grunt has a plugin called grunt-contrib-livereload that reloads the page whenever there are changes in the files/directories that you want to watch. Alternatively, there's a scaffolding tool for client side web applications in AngularJS called yeoman, that has a generator called generator-angular - this generator has an opinionated structure towards AngularJS application development and it comes with a basic setup that you can use for livereloading code changes from any files that you have configured to watch.
Start using yeoman. It has grunt that will solve yr problem plus lots of more exciting stuff.
Check this quick start guide : http://yeoman.io/learning/
I use the open source editor Brackets.io by Adobe. Just click the lightning icon button to the right of the editor to run your web page and will auto refresh for every save.
You can do this in many ways. Many of the options are already mentioned in this post. All of them are workable. In my experience the most simplistic way to do this by the following way.No configuration , No setting , No need to code anything.
Just add this line in your <head> </head> tag of the html file
<script src="http://livejs.com/live.js"></script>
I recently started to learn about AngularJS and came across WebStorm and the AngularJS plugin by John Lindquist. Started by creating a new project using the angular-seed project and imported to WebStorm using File -> Open Directory. My directory structure looks like this
Now when I try to Debug it I get a 404 error. If I move the file app/index.html to the root folder and adjust all URL's to begin with app then it works fine. Is there a way to keep the default folder structure without moving the index.html to the root folder and also make it work with WebStorm?
I am using WebStorm 6.0.2.
I use WebStorm 7, so there might be some discrepancy in comparison with version 6 that you're using, but the over-all functionality is the same.
Quick solution:
Open the file in the editor and right click in the code to access the context menu. Choose the "Debug" option, which should start a debug session pointing to the current page.
Configuration solution:
WebStorm supports configurations for setting up different debugging scenarios. From the "Run" menu, choose the "Configurations" option. Add a JavaScript debug configuration, and add the URL you want in the designated field within the dialog presented.
Then, when you initialize a debugging session (a general one, not one for a specific page), you're presented a small dialog that allows you to choose a debug configuration.
Maybe there are more options or ways to accomplish the same thing as well, but I've never really given it more thought. I hope this is a working solution for you, but if not there's alway the documentation. If you need further clarification with regard to my answer, just give me a comment.