How to Install and configure AngularJs in eclipse

AngularJs is a JavaScript framework  developed and maintained by Google. It’s main goal is to develop web based applications with Model-View-Controller capability. JetBrains developed an IDE based on open source framework Intellij Idea called WebStrom which is a perfect IDE to work with AngularJs. Still I love to work on eclipse, here’s how we can do it….

This plugin is developed based on powerful JavaScript inference engine called “tern.js” For AngularJs to work in eclipse we need to install “node.js” We can install it by clicking here. After installation make sure we contain the installation path in class path.

AngularJs doesn’t have a plugin which we can use directly, but I have found a snapshot by a person called “Angelo” where the project is build in Jenkins at this link.

Steps to Follow:

1. Get the most latest version of eclipse By the time I have created the post latest version  is Kepler. Go to help – install new software – and install the snapshot provided @ http://oss.opensagres.fr/angularjs-eclipse/1.0.0-SNAPSHOT/ Install only the marked items

how-to-install-and-configure-angularjs-in-eclipse_1

2. Create a dynamic web project and make sure that all the html pages run smoothly on local server like tomcat, JBoss or glass fish.
3. Now convert created project to AngularJs project by Right Click on the project – Configure – Convert to AngularJs Project

how-to-install-and-configure-angularjs-in-eclipse_2

4. Open eclipse – window – preferences – tern – configure as mentioned in the below image

how-to-install-and-configure-angularjs-in-eclipse_3

5. Right Click on  project – properties – Tern – Plugins – Select “angular”

how-to-install-and-configure-angularjs-in-eclipse_4

6. Follow the same steps in the above point and now select Type Definitions – browser

how-to-install-and-configure-angularjs-in-eclipse_5

7. Now we must give path for all the script files that we are going to write. For this right click on project – properties – tern – Script Paths. Click on Add Folder button and select a folder under Web Content where all the JavaScript files will be available.
8. To disable warnings that will generate while coding in AngularJs.

how-to-install-and-configure-angularjs-in-eclipse_6

9. Download AngularJs JavaScript file from official website and copy js file to the folder that mentioned in 7.
10. Create a new html file and copy the following code snippet and run the file on local server. If everything went correctly whatever you type in the text box will appear as heading dynamically.

<html>
  <head>
    <script src="angular.js"></script>
   </head>
  <body>
  	<div ng-app>
  	<input type="text" ng-model="data.message" />
 	<h1>{{ data.message }}</h1>
    </div>
  </body>
</html>
Advertisements

10 thoughts on “How to Install and configure AngularJs in eclipse

  1. Unfortunately I’ve had little luck installing AngularJS Eclipse 0.5 on several machines with the latest Luna or Mars release of Eclipse. There is now, more recently than this blog entry, an Eclipse plugin update site for this plugin. But it does not successfully display help for directives. It seems to boil down to a version mismatch in expectations for org.mozilla.javascript, and I can’t find any update sites to address this. The Error Log console says…

    org.osgi.framework.BundleException: Could not resolve module: tern.eclipse.ide.server.rhino.core [855]
    Unresolved requirement: Require-Bundle: tern.server.rhino; bundle-version=”0.2.0″
    -> Bundle-SymbolicName: tern.server.rhino; bundle-version=”0.5.0.201409012129″
    tern.server.rhino [860]
    Unresolved requirement: Import-Package: org.mozilla.javascript; bundle-version=”1.7.4″

    at org.eclipse.osgi.container.Module.start(Module.java:434)
    at org.eclipse.osgi.container.ModuleContainer$ContainerStartLevel.incStartLevel(ModuleContainer.java:1582)
    at org.eclipse.osgi.container.ModuleContainer$ContainerStartLevel.incStartLevel(ModuleContainer.java:1561)
    at org.eclipse.osgi.container.ModuleContainer$ContainerStartLevel.doContainerStartLevel(ModuleContainer.java:1533)
    at org.eclipse.osgi.container.ModuleContainer$ContainerStartLevel.dispatchEvent(ModuleContainer.java:1476)
    at org.eclipse.osgi.container.ModuleContainer$ContainerStartLevel.dispatchEvent(ModuleContainer.java:1)
    at org.eclipse.osgi.framework.eventmgr.EventManager.dispatchEvent(EventManager.java:230)
    at org.eclipse.osgi.framework.eventmgr.EventManager$EventThread.run(EventManager.java:340)

    Like

  2. i have problem in first step .it is unable to download the angular-js from that link..and after it will ask for a repository name..what is the solution for this plz help me out for this problem?

    Like

    1. Hi Vikash, AngularJs doesn’t on Java. Project is served as static files from WEB-INF/webapp folder if you are using with java application. Data is served through restful webservices. Coming to this post it’s very old and may not be relevant with v2 available in the market. There are lot of IDE’s available in market right now with lot of plugin for angularJs. Try Microsoft Visual Code, its very nice !!

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s