AngularJS, a JavaScript framework developed by a Google and supported by Google. As the technology grows we have lost the patience to wait for a search results on web and wanted faster results. We do not want to render a HTML page on server side and the concept of Single page Application (SPA) started which leads to many front-end frameworks like Knockout, Ember, Angular, backbone what not!
Briefly: AngularJS is focused on maintaining data models for objects, and how they are viewed on the front end. It assists with running single-page applications (SPA).
AngularJS uses a Model-View-Controller programming concept. This involves separating the:
– Model (the data objects represented in your application), from the
– View (all the stuff the user sees — for example, all the differently tweaked screens and sub screens in Android vs iOS vs desktop browser versions of Chrome/Firefox/IE/Safari, etc), from the
– Controller (the glue code that manages the Model and connects it with the various Views).
Before we get into any theory, let us get our hands dirty with some actual Angular code. Thanks to Viral Patel (http://viralpatel.net/blogs/ ) for a nice sample application this was really helpful to understand the concepts.
Let us see a small Hello World application and we will try to see what the new terminologies it brings up. In above demo, just write something in the textbox and press Add button. This will adds whatever you type in text box in an array. The content of array is displayed below in a list.
Briefly: AngularJS is focused on maintaining data models for objects, and how they are viewed on the front end. It assists with running single-page applications (SPA).
AngularJS uses a Model-View-Controller programming concept. This involves separating the:
– Model (the data objects represented in your application), from the
– View (all the stuff the user sees — for example, all the differently tweaked screens and sub screens in Android vs iOS vs desktop browser versions of Chrome/Firefox/IE/Safari, etc), from the
– Controller (the glue code that manages the Model and connects it with the various Views).
Before we get into any theory, let us get our hands dirty with some actual Angular code. Thanks to Viral Patel (http://viralpatel.net/blogs/ ) for a nice sample application this was really helpful to understand the concepts.
Let us see a small Hello World application and we will try to see what the new terminologies it brings up. In above demo, just write something in the textbox and press Add button. This will adds whatever you type in text box in an array. The content of array is displayed below in a list.
1: <!DOCTYPE html>
2: <html ng-app id="ng-app">
3: <title>Hello World, AngularJS</title>
4: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
5: </script>
6: </head>
7: <body>
8: <div ng-controller="ContactController">
9: Email:<input type="text" ng-model="newcontact"/>
10: <button ng-click="add()">Add</button>
11: <h2>Contacts</h2>
12: <ul>
13: <li ng-repeat="contact in contacts"> {{ contact }} </li>
14: </ul>
15: </div>
16: <script type="text/javascript">
17: function ContactController($scope) {
18: $scope.contacts = ["Jijo.Venginikkadan@mail.com", "vgjijo@maildomain.com", "vgjijo@somedomain.com"];
19:
20: $scope.add = function () {
21: $scope.contacts.push($scope.newcontact);
22: $scope.newcontact = "";
23: }
24: }
25: </script>
26: </body>
27: </html>
28:
Scope is nothing but an object that Glues the View with Controller. They hold the Model data that we need to pass to view. Scope uses Angular’s two-way data binding to bind model data to view.
ng-controller defines a Controller to be bound with the view. In this case we defined a controller called ContactController in DIV using ng-controller attribute.
ContactController is nothing but a plain vanilla JavaScript function. In the demo we defined it as function. Also see the definition of ContactController function. There is an object $scope which we pass as an argument. This object is used to bind the controller with view. When AngularJS initialize this controller, it automatically creates and injects the $scope object to this function using dependency injection
ngRepeat is one of the most used AngularJS attribute. It iterate through an array and bind the view with each element. So in our example it creates tag for each item within contacts array. ngRepeat takes expression as argument. In our case “contact in contacts” where contact is user defined variable and contacts is an array within $scope.
The function add() is bound to Add button using an attribute ng-click. ng-click binds the click event on the button or link or any clickable element with the function that is defined within $scope. So in this case, whenever Add button is clicked, the add() method on $scope will be called. In add() method we add (or push) a string in contacts array. This is the string that user types in text box
No comments:
Post a Comment