AngularJS Environment Setup

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

Requirements of AngularJS Installation

In order to work along with this tutorial, you will need to set up your AngularJS development environment. For this, you will need the following

  • Text Editor/IDE
  • Web Browser
  • Web Server
  • AngularJS Library

Text Editor/IDE

AngularJS is ultimately comprised of HTML and JavaScript, therefore any standard text editor/IDE will do. You might consider one of the following free programs.

  • Notepad++
  • Sublime Text
  • Aptana Studio 3
  • Ultra Edit
  • Text Wrangler
  • Eclipse
  • Visual Studio

*You can also use online editors, such as  jsbin.com or plnkr.com

Web Browser

Any major browser such as Chrome, Firefox, or Safari will work for this purpose and AngularJS cross-browser compatible. Just make sure that JavaScript is enabled.

Web Server

If you will be developing on your local computer, you may use such web servers as Apache or MS IIS.

AngularJS Library

To download AngularJS Click on the link: https://angularjs.org/.

angular js download image

There are three options to download the AngularJS library:

  • View on GitHub- By clicking on this button, you can download and install the library for direct use
    from your server.
  • Download Version 1
  • Download Version 2

If you would like to download a library, select Version 1

angular js library download image

Using the Content Delivery Network

Because AngularJS is a JavaScript library, the only thing necessary to work with AngularJS in your environment is to provide the application access to the angular.js library file with a <script> tag in the HTML templates. This can be done by using the Content Delivery Network (CDN), which supplies a URL for downloading the library from an online source, such as Google’s

(<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js">
</script>).

If the application cannot connect to the source, it will not work. Another way to supply the angular.js library is to directly download it from(https://angularjs.org/.) and provide the library through your web server. This slows down the application but is more reliable. We will use the online CDN library throughout this book.

Bootstrapping AngularJS

In order to use AngularJS in your web application, you must include the following Script

<script src="http://code.angularjs.org/1.0.5/ angular.js"> </script>.

The browser both loads and executes this file at the same time. Each segment of AngularJS code in your application works as a singular function, and the last line included in the script enacts that particular function. (function(window, document, undefined) {‘use strict’;……/All of your application’s AngularJS code is written here.})(window, document);//the last line in your code tells the browser to begin the function.

Every AngularJS function requires an object for the particular HTML location that the code is written in. When the object is identified, the AngularJS “DOMContentLoaded” event listener sends a callback to initiate the execution of all the function’s directives.

Once AngularJS receives a callback, indicating the object has been loaded, it looks to the “ng-app directive” to learn which HTML elements will be affected by the function. The instructions are then excited for that specific function, and it begins enacting the directives. AngularJS refers to this whole process as “Automatic Initialization.”

There are two parts to this process. The first part involves using the ng-app directive to define the application module. This directive (typically loaded in the <html> tag) signals the compiler to consider it the root. The second part is to load the angular.js library with the aforementioned <script> tag.

The ng-app directive is to ensure that the entire web page is included; however, you could add it to another container element, and only elements inside that container would be included in the AngularJS compilation and consequently in the AngularJS application functionality.

HTML Compiler in AngularJS

Angularjs Include an HTML compiler that looks for directives in the AngularJS template and uses JavaScript directive code to create extended HTML elements. The HTML compiler enables you to teach the browser new HTML syntax. It also allows you to assign behaviors to any HTML elements or attributes.

In fact, you can even design new HTML elements or attributes that have unique behaviors. These HTML extensions are called directives. Angular has many built-in directives that are helpful with building any app. All of the directives are executed by the web browser, eliminating any need for no server-side coding.

Compile: Search the HTML object and collect all of the instructions (directives).

Link: Combine the directives with a scope (data) and produce a live view for the user. All changes to the scope model are projected in the view. All user interaction changes to the view are updated in the scope model as well.

The compiler loads into the web browser when the library is bootstrapped. Once it is loaded, the compiler will look through the HTML, tie in any back-end JavaScript code to the web page elements, and render the client view for the application user. Because the compiler searches for directives as soon as the angular.js script is loaded, it is best practice to include the angular.js library as one of the last tags in the body> of the HTML, which helps the web page to load more quickly.

Example to load Angular JS Library

<!doctype html>
<html ng-app "myApp">
<body>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="/lib/myApp.js"></script>
</body>
</html>