AngularJS setup in Eclipse


      So we know how to setup AngularJS environment in your PC. But we always can't write code in notepad. How about trying this in Eclipse IDE. Ok, let see how to setup AngularJS in Eclipse IDE.

Step 1 - Download Eclipse IDE
      So AngularJS is developed or tested in Eclipse JEE 4.5 Mars. So you can download this IDE from official Eclipse site and get this installed. 

Eclipse Mars 4.5

Step 2 : Download AngularJS plugin from Market Place
      Now open your IDE and go to Marketplace by selecting help Menu from the top as shown below:
Select Eclipse Marketplace

The below window will appear, now Find AngularJS there..
Eclipse MarketPlace
Find AngularJS

Step 3: Installing AngularJS

           Now click on install to have AngularJS installed in Eclipse. Once you click install, it will ask for confirmation. Select all applicable options and click Confirm button.

Confirm Features

After confirmation you will have to accept the term and conditions of license agreement.

Accept Terms and Conditions

Now you will be able to see the software getting installed as below..

Software Installing

If there are any warnings related to software authenticity just click OK and move forward. After installation is completed you will have to reboot Eclipse.

Reboot Eclipse

Step 4: Try a simple AngularJS code
         Now we got AngularJS plugin installed in Eclipse, why not try a simple code to confirm.

Now Create a static Web Project in Eclipse as shown below and Name it.. I have named it as TestAngularJS

Create Static Web Project

Then Configure this Project as AngularJS project as shown below
Convert To AngularJS project

Then create a html file in your project and copy paste the below code..

Create HTML file
<!doctype html>
<html ng-app>   
   <head>
      <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
   </head>
   
   <body>
      <div>
         <label>Name:</label>
         <input type ="text" ng-model ="yourtext" placeholder ="Enter a name here">
         <hr />
         
         <h1>Hello {{yourtext}}</h1>
      </div>
      
   </body>
</html>


Project Structure
And now the file step RUN your program to see the Ouput. You see a text box there in the output, key in whatever text you wish and see the output..

Output

Hope this tutorial helps you to understand the below stuff 

  • Setup AngularJS plugin from Eclipse Marketplace
  • Create Simple AngularJS project in Eclipse




Reactions:

0 comments :

Post a Comment