AngularJS: The Beginning

In addition to Knockout and Backbone, the JavaScript framework that has been the most popular is Angular. One cannot study the MV* pattern in JavaScript without getting their hands dirty with Angular. So, with this article, we begin our step-by-step journey with Angular.

Where to get the library from?

Well the latest versions of the framework is available at AngularJS. In the download section there, choose for the uncompressed version and download it.

download angularjs

Once it is downloaded, we are good to go.

The Hello World

So, for the next step, we would do a simple demo. In a HTML page we first add the reference to the Angular script file.

script

In the body of the HTML we have the following.

Hello World

Now let's add the spice of Angular JS over the Spaghetti. To do that, we need to tell the browser that the application that you are rendering is, instead of being a simple HTML application, an Angular app. To do that, we need to add the Angular directive to the tag inside that we want to write the Angular code. For simplicity, we add that inside the <html> tag itself. Here's how it is done.

tag itself

This directive however can be added at any level inside the body. Now let us go a bit forward and try to print the text that is entered into the input box at it's bottom. To do this, we need to use the Angular binding.

Step 1: Declare the input box as the Angular model.

angular model

Step 2: Use this binding to print the text.

print the text

That's it. We are done. On opening the HTML page in Chrome, the following would be the output.

output

Here is the entire code for the application.

  1.   <!DOCTYPE html>  
  2.   <html ng-app>  
  3.   <head>  
  4.       <title>Angular Demo</title>  
  5.       <script src="js/angular.js"></script>  
  6.   </head>  
  7.   <body>  
  8.       <div >  
  9.           Write something: <input type="text" ng-model="something" />  
  10.          <br/>  
  11.          You've written : {{something}}  
  12.      </div>  
  13.  </body>  
  14.  </html>  
I hope you've liked the first article on AngularJS. Stay tuned for more.

Up Next
    Ebook Download
    View all
    Learn
    View all