<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="welcomeMsg='welcome';myCol='pink';quantity=10;cost=5;employee={EmployeeName:'Chinni',Id:2178};points=[1,15,19,2,40]">
<p ng-bind="welcomeMsg"></p>
<h1>Hello {{firstName}}</h1>
<p>Input something in the input box:</p>
<p>FirstName : <input type="text" ng-model="firstName" placeholder="Enter name here"></p>
<p>LastName : <input type="text" ng-model="lastName" placeholder="Enter name here"></p>
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
<p>My first expression: {{ 5 + 5 }}</p>
<p>Total in dollar: {{ quantity * cost }}</p>
<p>Total in dollar using ng-bind:
<span ng-bind="quantity * cost">
</span>
</p>
<p>Hi
<span ng-bind="welcomeMsg+ ' ' + firstName + ' ' + quantity"></span>
</p>
<p>The full name along with ID from JSONOj and array obj is
<span ng-bind="firstName + ' ' + lastName + employee.Id + ' ' + points[2]"></span>
</p>
<p>Employee Id from Employee JSONObject is : {{employee.Id}}</p>
<p>Array Object value at index 2 is : {{points[2]}}</p>
</div>
</body>
</html>
If we consider an AngularJS application to consist of:
--> View, which is the HTML.
--> Model, which is the data available for the current view.
--> Controller, which is the JavaScript function that makes/changes/removes/controls the data.
Then the scope is the Model.
The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.
--> View, which is the HTML.
--> Model, which is the data available for the current view.
--> Controller, which is the JavaScript function that makes/changes/removes/controls the data.
Then the scope is the Model.
The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.