AngularJS is a javascript framework supported by Google that embraces extending HTML into a more expressive and readable format. It decreases emphasis on directly handling DOM manipulation from the application logic, allowing for easier testing. It employs efficient two-way data binding and sensible MVC implementation, reducing the server load of applications, a new wave of Single Page Applications (SPA). Your application is defined with modules that can depend from one to the others. It also encapsulates the behavior of your application in controllers which are instanciated thanks to dependency injection. Lets start with the well know example in the computure world, Hello World !!!, why can't we change a bit lets say Hello Universe.
Before we can do anything we need to create a simple HTML page in that we can include AngularJS. Create a file called index.html and use the following code: which is just a normal html code, which includes Angular JS Javascript, regular label, textbox and two new items.
First item which strikes our eyes is ng-app, which tells the active portion of he page. The directive ng-app will cause Angular to auto initialize your application.
Nextone is the attribute ng-model in textbox as ng-model="yourname". Whenever Angular sees this directive ng-model it automatically sets up two-way data binding.
How this works? When this page is loaded, Angualar bounds the state of text with model, thus when the user changes the value, model yourname will get's
automatically changed.
And finally, the mysterious expression {{ yourname }}: Which tells Angular to bind the value of model yourname in place of {{ yourname }}.
That's it we have just learned how to say Hello Universe through Angular
Happy Programming ...!!!
Before we can do anything we need to create a simple HTML page in that we can include AngularJS. Create a file called index.html and use the following code: which is just a normal html code, which includes Angular JS Javascript, regular label, textbox and two new items.
<!DOCTYPE html>
<html ng-app>
<head>
<title>Learning AngularJS - Hello Universe</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
Write Your Name in Textbox:
<input type="text" ng-model="yourname" />
<h1>Hello Universe by : {{ yourname }}</h1>
</body>
</html>
First item which strikes our eyes is ng-app, which tells the active portion of he page. The directive ng-app will cause Angular to auto initialize your application.
Nextone is the attribute ng-model in textbox as ng-model="yourname". Whenever Angular sees this directive ng-model it automatically sets up two-way data binding.
How this works? When this page is loaded, Angualar bounds the state of text with model, thus when the user changes the value, model yourname will get's
automatically changed.
And finally, the mysterious expression {{ yourname }}: Which tells Angular to bind the value of model yourname in place of {{ yourname }}.
That's it we have just learned how to say Hello Universe through Angular
Happy Programming ...!!!
