In addition to knockout and backbone, the JavaScript framework which has been most popular is Angular. One cannot study MV* pattern in JavaScript without having their hands dirty with Angular. So, with this post, 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 https://angularjs.org/ . In the download section there, choose for the uncompressed version and download it.
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.
In the body of the html we have the following.
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, is an angular app. To do that, we need to add the angular directive to the tag inside which we want to write angular code. For simplicity, we add that inside the <html> tag itself. here’s how it is done.
This directive however can be add at any level inside the body. Now let us go a bit forward and try to print the text which is entered in the input box at it’s bottom. To do this, we need to using the Angular binding.
Step 1: Declaring the Input box as the angular model.
Step 2: Use this binding to print the text.
That’s it. We are done. On opening the HTML page on chrome, following would be the 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>
Hope you’d like the first post on angular js. Stay tuned for more.
Posts
0 comments