Adding angularjs to Your Environment

angularjs is a client-side JavaScript library, which means the only thing you need to do to implement angularjs in your environment is to provide a method for the client to get the angular.js library file by using a <script> tag in the HTML templates.

The simplest method of providing the angular.js library is to use the Content Delivery Network (CDN), which provides a URL for downloading the library from a third party. The downside of this method is that you must rely on a third party to serve the library, and if the client cannot connect to that third-party URL, your application will not work. For example, the following <script> tag loads the angular.js library from Google APIs CDN:

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

The other method of providing the angular.js library is to download it from the angularjs website (http://angularjs.org) and use your own web server to serve the file to the client. This method takes more effort and also requires extra bandwidth on your web server; however, it might be a better option if you want more control over how the client obtains the library.

Bootstrapping angularjs in an HTML Document

To implement angularjs in your web pages, you need to bootstrap the HTML document. Bootstrapping involves two parts. The first part is to define the application module by using the ng-app directive, and the second is to load the angular.js library in a <script> tag.

The ng-app directive tells the angularjs compiler to treat that element as the root of the compilation. The ng-app directive is typically loaded in the <html> tag 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.

When possible, you should include the angular.js library as one of the last tags, if not the last tag, inside the <body> of the HTML. When the angular.js script is loaded, the compiler kicks off and begins searching for directives. Loading angular.js last allows the web page to load faster.

The following is an example of implementing the ng-app and angular.js bootstrap in an HTML document:

<!doctype html>
<html ng-app="myApp">
  <body>
    <script src="http://code.angularjs.org/1.3.8/<span%20class="EmpStrong">angular.min.js"></script>
    <script src="/lib/myApp<span%20class="EmpStrong">.js"></script>
  </body>
</html>

Using the Global APIs

As you are implementing angularjs applications, you will find that there are common JavaScript tasks that you need to perform regularly, such as comparing objects, deep copying, iterating through objects, and converting JSON data. angularjs provides a lot of this basic functionality in the global APIs.

The global APIs are available when the angular.js library is loaded, and you can access them by using the angular object. For example, to create a copy of an object named myObj, you use the following syntax:

var myCopy = angular.copy(myObj);

The following code shows an example of iterating through an array of objects by using the forEach() global API:

var objArr = [{score: 95}, {score: 98}, {score: 92}];
var scores = [];
angular.forEach(objArr, function(value, key){
  this.push(key + '=' + value);
}, scores);
// scores == ['score=95', 'score=98', 'score=92']

some of the most useful utilities provided in the global APIs.

Image

Image

wrapping up

angularjs is a JavaScript library framework that provides a very structured method for creating websites and web applications. angularjs structures a web application into a very clean MVC-styled approach. angularjs scopes provide contextual binding to the data model for the application and are made up of basic JavaScript objects. angularjs utilizes templates with directives that extend HTML capabilities, enabling you to implement totally customized HTML components.