Friday, 28 February 2014

Using AngularJS in Eclipse, Part 1) The Basics

This is the first of four posts on how to run (inside Eclipse) the examples provided in AngularJS's home page:
The example covered on this post is the The Basics.

I'm doing this on an OSX laptop and the first step was to download and unzip (eclipse-standard-kepler-SR1-macosx-cocoa.tar.gz (32bit version of Eclipse's Kerpler) into the ~/_Dev/_AngularJS folder.

I fired up eclipse, chose the ~/_Dev/_AngularJS/workspace as the workspace root and installed the Eclipse Grovy REPL Scripting Environment 1.6.0 (update site) and Angular-JS Eclipse Tooling (update site) plugins.

1) Creating an Angular JS Project

After restarting eclipse, I right-clicked on the Project Explorer view and chose the New -> Static Web Project menu item

... set AngularJS_Tests as the project name and clicked Finish

... switched to the Web Perspective

... with the Project Explorer view now looking like this:

With the final setup being the conversion into an AngularJS Project

2) Creating the The_Basics.html file

To create the first test file, I right-clicked on the Web Content folder, and chose the New -> Html File menu option:

... set the file name to The_Basics.html and click on Finish

NOTE: The reason this first file is called The_Basics.html is because I'm going to be using the examples from AngularJS' home page

Once the The_Basics.html file opens up in eclipse

... I change its contents to the code sample from

Note how the AngularJS Eclipse plugin successfully detects the Angular attributes and showed relevant information about it.

Here is ng-app:

Here is ng-model:

3) Fixing the undefined Attribute name issue

Since I chose to the Eclipse's Static Web Project, when we save the The_Basics.html file (and if the Eclipse's Html validation settings are the default ones), the following error will show:

... which basically means that Eclipse is not recognising the AngularJS Html attributes:

To fix this, I went to the AngularJS_Test project's Properties, opened the HTML Syntax page (from the Validation section) and set to false the Undefined attribute name setting (in the Attributes' options , not the Elements)

With that config change, there are no problems in this page, and hovering on top of one the AngularJS directives will show the correct tooltip:

4) Viewing and previewing the The_Basics.html page

Since at the moment we only have one page, we can view it directly without needing a Web Server.

To do that, I clicked on the html file and chose the Web Browser option from the Open With menu:

This will open the default Eclipse Browser

... with the AngularJS test working as expected (in this case any text typed in the Name TextBox will automatically be shown in the page:

We can also preview some of the changes in real time, by choosing the Web Page Editor:

... which will look like this (note the non-processed HTML at the top and the HTML code at the bottom):

Opening up the Preview tab (from the default Design tab) will allow us to test the page currently being edited (note how Angular JS is working):

This means that (when in the Design tab) we can edit the AngularJS HTML page and see the changes immediately:

NOTE: This version of the Web Page Editor doesn't render the CSS while in that Design mode, which means that if we add bootstrap to this project:

... the CSS will only be visible when in the Preview tab:

4) Creating a Git Repository for the files created

The best way for me to share these files is via a Git Repository, so the final step of this post is to create one on the files we have already created.

Since we are in eclipse I tried to create an Git Repo for the current project:

But the Git Repository wizard:

... didn't work, because it expects the target folder to not exist:

This was easily solved via the command line (by executing $ git init on the AngularJS_Tests folder)

Now that we have a git repository, I was time to open it:

... using the Git Repositories view

 ... where we can use the Add an existing local Git repository link:

... to open the repository just created:

In order to create a git commit, I also opened the Git Staging view:

This is what these two git views look like (note that there are not commits/references and the list of new files in the Unstaged Changes list)

To commit the files drag-n-drop them from the Unstaged Changes to the Staged Changes, and write a commit message:

After clicking the Commit button the Git Repositories view will give a visual representation of the location current HEAD (which is the commit just done)


Sadhana Rathore said...
This comment has been removed by the author.
Sadhana Rathore said...

Great blog, I was searching this for a while. Do post more like this.
Angularjs Training in Chennai
Angular 7 Training in Chennai
AWS course in Chennai
DevOps Certification Chennai
ReactJS Training in Chennai
Robotics Process Automation Training in Chennai
Data Science Course in Chennai
Data Science Training in Chennai

Aruna Ram said...

Hi! I was much time to spend your post, it is very impressed to me. so I am regularly following your post. I would like more ideas from your blog...
Primavera Training in Chennai
Primavera Course in Chennai
Excel Training in Chennai
Corporate Training in Chennai
Embedded System Course Chennai
Linux Training in Chennai
Tableau Training in Chennai
Spark Training in Chennai
Oracle Training in Chennai

Vicky Ram said...

Awesome post. Really you are shared very informative concept... Thank you for sharing. Keep on

Guest posting sites

vachu said...

good article.
oracle training in chennai

janakikrishnan said...

Great job and the blog going great. Keep going.
Software Testing Course in Madurai
Software Testing Classes in Madurai
Software Testing Training in Madurai
Software Testing Course in Coimbatore
Best Software Testing Training Institute in Coimbatore
Software Testing Institute in Coimbatore

Vicky Ram said...

I have read your blog its very attractive and impressive. I like it your blog.

Article submission sites

janakikrishnan said...

Great job, keep doing your best. Thank you for the wonderful blog.
Tally Course in Madurai
Tally Training in Madurai
Tally Course in Coimbatore
Tally Training Coimbatore
Tally Classes in Coimbatore
Best Tally Classes in Coimbatore

Vicky Ram said...

Thanks for posting such an blog it is really very informative. And useful for the freshers Keep posting the

Guest posting sites

Sherin Alfonsa said...

Thanks for your blog!!! I would like to share with my friends and colleagues

RPA Training in Chennai
Spoken English Classes in Chennai
German Language Classes in Chennai
German Classes in Chennai
best german classes in chennai

kim john said...

Nice blog!! I hope you will share more info like this. I will use this for my studies and research.
Angularjs Training in Chennai
Angularjs Course in Chennai
Web Designing Course in Chennai
PHP Training in Chennai
Angularjs Courses in Chennai
Angular Training in Chennai
Best Angularjs Training in Chennai
Angularjs Training in Chennai
Angularjs Course in Chennai

Senthil said...

I got many useful informations about this topic from your blog. Really very useful for learning the skills
AngularJS Training in Tambaram
AngularJS Training in Porur
AngularJS Training in Velachery
Angularjs Training in chennai
AngularJS Training in T Nagar
Web Designing Training in OMR
Web Designing Training in T Nagar
Web Designing Training in Tambaram

ranasing rajkumar said...

This is a very amazing post for cheap web hosting services. in this post, you have provided all the basic information regarding.

website builder for reseller

ranasing rajkumar said...

Comfortabl y, the post is really the freshest on that deserving topic. I harmonise with your conclusions and definitely will thirstily look forward to your next updates.

private label website builder

ranasing rajkumar said...

Thank you for the link building list.I am going jot down this because it will help me a lot.Great blog! Please keep on posting such blog.

white label website builder

lekha mathan said...

Thank you so much for providing information on this. It was very useful.
Aviation Academy in Chennai
Air hostess training in Chennai
Airport management courses in Chennai
Ground staff training in Chennai
Aviation Courses in Chennai
air hostess course in Chennai
airport courses in Chennai
Ground staff training in Chennai

cynthiawilliams said...

I am very happy to visit your blog. This is definitely helpful to me, eagerly waiting for more updates.
Automation Anywhere Training in Chennai
Automation Training in Chennai
Automation courses in Chennai
RPA Training in Chennai
Robotics Process Automation Training in Chennai
Blue Prism Training in Chennai
Blue Prism Training Chennai
RPA Training in Chennai

Shadeep Shree said...

The blog you have shared is supreme and more useful for... Thanks for sharing with us...
Hacking Course in Coimbatore
ethical hacking training in coimbatore
ethical hacking course in bangalore
ethical hacking institute in bangalore
Tally course in Madurai
Software Testing Course in Coimbatore
Spoken English Class in Coimbatore
Web Designing Course in Coimbatore
Tally Course in Coimbatore
Tally Training Coimbatore

divya said...

Great info. The content you wrote is very interesting to read. This will loved by all age groups.
Angularjs Training in Chennai
Angularjs Course in Chennai
CCNA Training in Chennai
Salesforce Training in Chennai
Angular5 Training in Chennai
Angular6 Training in Chennai
Angular7 Training in Chennai
Angularjs Training in Chennai
Angularjs Course in Chennai