In this post I ll provide a code that explains data binding concept in angular concept in AngularJs. My stress is to provide working example rather than overwhelm with a lot of theoretical stuffs which you can find after any angular related Google search.
Here is fist simple Angular Hello World Example :
<!DOCUMENT html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" > </script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('UserController',function($scope){
$scope.name= 'World'
}
);
</script>
</head>
<body ng-app ='myApp' >
<div ng-controller='UserController'>
Enter your Name :<input type= 'text' ng-model = "name" >
<p>
Hello {{name}}
</p>
</div>
</body>
</html>
just copy paste this code and save as Hello.htm or any file name you want to choose and open it.
here us how your output should look like
Now the angular part this is name in text box and greeting that you see below. When you type a different name in text box the greeting changes.
Here is an example of greeting when name is Pankaj
Now here comes the boring part of theory.
As you know angular is based on MVC design pattern.So you should have some idea about this pattern
let us discuss angular elements one by on:
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" > </script>
This is link for angular library you must include it to use angular feature on your page.
another option is to copy this link on your machine and use that. but for now just use the above link.
<script>
var myApp = angular.module('myApp', []);
Here we are defining a module for our application. First argument of angular module is a module name and second is list of dependencies. More about dependencies later. Just look at this syntax for now and get yourself familiarised with it.
myApp.controller('UserController', function($scope){
$scope.name= 'World'
}
);
here comes a little complex looking part. Lets break it into pieces and understand. myApp is module you just created. we are adding a controller to it. In order to do that we call function controller on module with 2 parameters. first parameter is controller name and second is a function.
The function parameter of controller takes one parameter $scope. IT might take more but for now just one.
This is a special parameter. say hello to it too and remember its name and shape. it is injected by angular for you. So its name should always be same.
Whatever property you set to this parameter will be available in web page that uses this controller. Don't worry if you don't understand what this means. It ll be clear in a moment. just remember that we are setting a property name with $scope variable.
<body ng-app ='myApp' >
ng-app is an angular directive. It is used to specify that this part of web page will use angular features. Directives are used with html tags and they have their meaning. that's all you need to know
about directives for now.
Here value of ng-app is myApp , the module that we have created in scripts section.In this case whole body of page is angularized.
<div ng-controller='UserController'>
ng-controller is another directive which specifies controller name that this part of web page will use. Remember parent body tag mentioned that this part uses myApp module. So at this point all controllers of myApp module are available. as we know we have created one controller for myApp module we can use that here with above directive.
Enter your Name :<input type= 'text' ng-model = "name" >
ng-model is another directive. value of this directive holds data for this view in which it is used. here view is your input element and its model is "name". now if you remember we created a property name in scope of UserController. when we say ng-model="name", this name refers to same name which is in associated with scope.
so you can $scope.name to $scope.username and use ng-model= "username" and it ll work just fine.
Hello {{name}}
here value in {{ }} refers to scope property with same name. any change to scope property will be reflected here. as we just saw scope.name is also model for text input so any change in text input will be reflected here too.
more on bindings later.
So that is all about this simple application.
