Jeevan Reddy Gaddam: 2016

Friday, January 8, 2016

AngularJS Helloworld

As a Developer, we know that Web browser understands HTML. Most of the client side frameworks works on HTML to improve the performance of user experience. Similar way AngularJS also works on HTML tags and its customized directives (ng-app, ng-controller) to render page.

How it works ?

Scope is glue between view and model. Whatever entered information will be updated in syc with Model.

View template:

<!DOCTYPE html>
<html ng-app="helloApp">                       
<head>
    <title>AngularJS - Hello World</title>
<script src="angular.js"></script>
<script src="helloController.js"></script>
</head> <body ng-controller="HelloController">                   
<input type="text" ng-model="name"> <br />  
Hello <strong> {{name}} </strong>
   </body> 
</html>

Controller:

var helloApp = angular.module('helloApp', []);

helloApp.controller('HelloController', function($scope) {
   $scope.name = 'world';
});

Output

download