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.
- <!DOCTYPE html>
- <html ng-app>
- <head>
- <title>Angular Demo</title>
- <script src="js/angular.js"></script>
- </head>
- <body>
- <div >
- Write something: <input type="text" ng-model="something" />
- <br/>
- You've written : {{something}}
- </div>
- </body>
- </html>
I hope you've liked the first article on AngularJS. Stay tuned for more.