Home » JavaScript » Angular.js » AngularJS Development Environment Example

About Yatin

Yatin Batra
The author is graduated in Electronics & Telecommunication. During his studies, he has been involved with a significant number of projects ranging from programming and software engineering to telecommunications analysis. He works as a technical lead in the information technology sector where he is primarily involved with projects based on Java/J2EE technologies platform and novel UI technologies.

AngularJS Development Environment Example

Hello readers, in this tutorial, we will guide you for setting up a solid development environment for having the best Angular learning and working experience.

1. Introduction

1.1 What is AngularJS?

AngularJS is a JavaScript MVC or Model-View-Controller framework developed by Google that lets developers build well structured, easily testable, and maintainable front-end applications. Before we start with creating an actual application using AngularJS, let us see what the actual parts of an AngularJS application are.

1.1.1 Templates

In AngularJS, a template is an HTML with additional markups. AngularJS library compiles the templates and renders the resultant HTML page.

1.1.2 Directives

Directives are the markers (i.e. attributes) on a DOM element that tell AngularJS to attach a specific behavior to that DOM element or even transform the DOM element and its children. Most of the directives in AngularJS library starts with the ng. The directives consist of the following three parts:

  • ng-app: The ng-app directive is a starting point. If the AngularJS framework finds the ng-app directive anywhere in the HTML document, it bootstraps (i.e. initializes) itself and compiles the HTML template
  • ng-model: The ng-model directive binds an HTML element to a property on the $scope object. It also binds the values of AngularJS application data to the HTML input controls.
  • ng-bind: The ng-bind directive binds the AngularJS application data to the HTML tags

1.1.3 Expressions

An expression is like a JavaScript code which is usually wrapped inside the double curly braces such as {{ expression }}. AngularJS library evaluates the expression and produces a result.

1.2 Why should we use AngularJS?

Using the Model-View-Controller architecture, the framework separates a web application into a simple and yet manageable structure, which comprises of “views”, “models” and “controllers”. The AngularJS library provides the in-build directives (or attributes) to extend the HTML inside a web page. When developers attach these directives to the HTML elements and attributes, it creates a dynamic web-page with very little coding.

These new APIs make a developer life easier, really! But it would be difficult for a beginner to understand this without a solid development environment. Therefore, let us create a development environment, for having the best Angular experience.

2. AngularJS Development Environment Example

Here is a step-by-step guide to set-up a development environment for AngularJS.

2.1 Tools

We need the following tools to set up a development environment for AngularJS.

  • AngularJS Library
  • Eclipse Ide
  • Browser
  • Web Server

2.2 AngularJS Library

To download AngularJS Library, go to this link -> Click on Download AngularJS button, which will open the following popup.

Fig. 1: Download AngularJS Library

Fig. 1: Download AngularJS Library

Select the required AngularJS version from the download popup and click on the download button in the popup. This screen also gives various options for using the Angular JS as follows:

  • Downloading & Hosting Files Locally:
    • There are two different options i.e. Legacy and Latest. The names itself are self-descriptive. Legacy has version less than 1.2.x and latest has 1.6.x version
    • Developers can also go with the minified, uncompressed or the zipped version
  • CDN Access: Developers also have access to a CDN. The CDN will give them access around the world to the regional data centers i.e. Google Host. This means using CDN moves the responsibility of hosting the files from your own servers to a series of external ones. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of AngularJS from the same CDN, it won’t have to be re-downloaded. Developers can include the AngularJS library from the following CDN URL:
    https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js
    

2.3 Editor

AngularJS is eventually an HTML and the JavaScript code. So they can install any good editor or IDE as per their choice. The following editors are recommended:

2.4 Web Server

Developers can use any web server such as Apache Tomcat, JBoss, and IIS etc. for the development purposes.

2.5 Browser

Developers can install any browser of their choice as AngularJS supports the cross-browser compatibility. However, it is recommended to use Google Chrome while developing an application.

2.6 Setting up AngularJS in Eclipse Ide

Now, open the Eclipse Ide and navigate to Help -> Eclipse Marketplace. In the Find text box enter ‘AngularJS’ and press enter.

Fig. 2: Eclipse Market Place

Fig. 2: Eclipse Market Place

Look for the plugin ‘Angular IDE 2017 CI 10’. Click Install. Eclipse will ask you to confirm the selected features.

Fig. 3: Confirm Selected Features

Fig. 3: Confirm Selected Features

Click Confirm. Eclipse will ask you to Review the Licenses. Click ‘I accept the terms of the license agreement‘ and press Finish.

Fig. 4: Review Licenses

Fig. 4: Review Licenses

Eclipse will start installing the plugin and will show you a Security Warning pop-up as below. Click OK.

Fig. 5: Security Warning

Fig. 5: Security Warning

Eclipse will ask you to restart for the changes to take effect. Click Yes. To confirm that the plugin was installed correctly you can go to Help -> About Eclipse and look for the AngularJS Eclipse plugin in the Installation Details section.

Now open up the Eclipse Ide and follow this link to start with your introductory AngularJS application. That’s all for this post and happy learning!!

3. Conclusion

In this section, developers learned how to install an AngularJS plugin in Eclipse. I hope this article served developers with whatever they were looking for.

(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of