Basic Angular.js application

To create an Angular.js application you first need to add the relevant reference as shown below:

<script src="http://code.angularjs.org/1.0.5/angular.js"></script>

Following this you can add a basic angular controller as shown below (note $scope is an angular keyword):

<script type="text/javascript">

    function ControllerName($scope) {

        $scope.Name = 'England';

    }

</script>

In the html section of this page you can use the following code to display data from the angular controller:

<div ng-app>

    <div ng-controller="ControllerName">

        <input type=text ng-model="Name" />

        <br />

        <p>{{Name}}</p>

    </div>

</div>

The keywords used in the example above are explained as follows:

ng-app: Defines the scope of angular’s application. Any angular specific code outside this div will not be handled by angular

ng-controller: Defines the scope of the controller ControllerName. Within this div we can work with variables defined within ControllerName as if they are local variables

ng-model: Defines which variable will the text box bind with

{{Name}}: Displays the value of variable Name

On this page if we enter anything new in the text box, it will automatically change the value of variable Name which will automatically update the value of {{Name}} shown below.