AngularJs Tutorials
![say]()
Important News
use AngularJs on the Webpage
Define ng-app
AngularJS Framework first checks the ng-app directive within the HTML page. If its found then Angular bootstrap itself and starts to manage the section of the page that has a ng-app directive.
File name : index.php
<html ng-app=''> </html>
You can also define ng-app directive on any other HTML tags like – <body>,<div>,<table>, etc.
ng-model
Create some input elements and added ng-model directive. Display the change of element using {{ }} and ng-bind directive on the screen.
ng-model is a directive which binds the values on HTML element in the application.
ng-bind and {{ }}
ng-bind and {{ }} both use to display the output. The double-curly syntax is more naturally readable and requires less typing but it is much slower.
File name : index.php
Example
File name : index.php
<html ng-app="">
<head>
<title>First Application in AngularJS</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body>
<table>
<tr>
<td>Your name : </td>
<td><input type="text" ng-model="name"></td>
</tr>
<tr>
<td>Price : </td>
<td><input type="text" ng-model="price"></td>
</tr>
<tr>
<td>Number : </td>
<td><input type="text" ng-model="num"></td>
</tr>
<tr>
<td colspan='2'>
NAME {{ name | uppercase }}<br/>
name {{ name | lowercase }}<br/>
Price {{ price | currency:'Rs ':2 }}<br/>
Number : {{ num | number:2 }}<br/>
</td>
</tr>
</table>
</body>
</html>
File name : index.php