AngularJS Environment Setup

In the previous article we introduced AngularJS. In this article contains brief information about AngularJS environment setup. We shall explain how you can can turn a normal HTML application into an AngularJS application. We shall also explain basic components of an AngularJS application. In this article, we shall do some real coding, so let the fun begin!

Environment Setup

AngularJS is a JavaScript library, the best way to use AngularJS in your applications is by adding CDN referent to AngularJS library hosted by google. Take a look at the following code sample to see how AngularJS CDN is included in an application, so that it can use AngularJS.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="">
 	<p>Car Name: <input type="text" ng-model="carname"></p>
 	<p ng-bind="carname"></p>
</div>

</body>
</html>

Download the code Try the code

Take a look a the above code. In the head section, you should find a JavaScript reference that points to AngularJS library hosted by google. Now to see if AngularJS is actually working, open the above page in the browser. You should see a text box. Start entering anything in the text box. You will see that as soon as you start entering text in the text box, same text appears below it. Changing the characters in the text box, updates the text below it at run time.

This is something really cool. To achieve such functionality in JavaScript, you would have to create a function that would have to be called on every key pressed. This shows the power of AngularJS while performing tasks that would otherwise require large and complex piece of code.

If you look at the code above, you should see three attributes ng-app, ng-model, ng-bind. These are basically AngularJS directives. AngularJS Directives are attributes that extend HTML elements to include AngularJS functionalities. We shall study AngularJS directives in more detail in an upcoming article. For now just breifly explain what these three directives do.

  • ng-app:This attribute says that the AngularJS functionalities would exist only within this element.
  • ng-model:  The ng-model directive binds an input , select , textarea (or custom form control) to a property (application variable) on the scope. In the above case “carname” is AngularJS application variable and it is bound to a text box.
  • ng-bind:It binds the value of application variable to inner html of any html element.

In this article we studied AngularJS Environment Setup. In the next article, we shall how what MVC architecture is and how AngularJS makes use of it.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .