What is AngularJS ?

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

AngularJS is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating applications



1.Create Angular module 
var myApp = angular. module('DriverApp' , []);

2.Create  controller
var myApp = angular.module('myApp',[]);

myApp.controller('DoubleController', ['$scope', function($scope) {
  $scope.double = function(value) { return value * 2; };
}]);

3.Add Angular JS file as a script source

<script src="modules/angular/angular.js" ></script>

4.We can  attach our controller to the DOM using the ng-controller directive. The greeting property can now be data-bound:

<div ng-controller="GreetingController">

  {{ greeting }}

</div>


5.ng-repeat directive, each repetition has access to the current repetition object:

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

Display table values using ng-repeat and ng-controller

<div  ng-controller="empcontroller" >
    <div class="x_panel">
        <div class="x_title">
            <h2>Customer Table</h2>
            <div class="clearfix"></div>
        </div>
        <div class="x_content">

            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Middle Name</th>
                    <th>Birthday</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="valdata in userdata">
                    <td>{{valdata.firstname}}</td>
                    <td>{{valdata.lastname}}</td>
                    <td>{{valdata.middlename}}</td>
                    <td>{{valdata.birthday}}</td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>