Scribd
Upload
45 views11 pages

55 MVC Framework Intoduction To AngularJS Directives Expressions Data Types Module and Controllers 20-02-2023

The document contains multiple HTML code snippets demonstrating different AngularJS concepts like data binding, expressions, filters, ng-repeat, controllers and scopes. Specifically, it shows how to: 1) Bind input values to variables using ng-model for two-way data binding 2) Evaluate expressions using {{}} and perform operations 3) Loop through arrays and objects with ng-repeat 4) Define controllers and assign values to scopes 5) Pass data between controllers and scopes

Uploaded by

fokac40868
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
45 views11 pages

55 MVC Framework Intoduction To AngularJS Directives Expressions Data Types Module and Controllers 20-02-2023

The document contains multiple HTML code snippets demonstrating different AngularJS concepts like data binding, expressions, filters, ng-repeat, controllers and scopes. Specifically, it shows how to: 1) Bind input values to variables using ng-model for two-way data binding 2) Evaluate expressions using {{}} and perform operations 3) Loop through arrays and objects with ng-repeat 4) Define controllers and assign values to scopes 5) Pass data between controllers and scopes

Uploaded by

fokac40868
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

<!

DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<body>

<div ng-app="">
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name1" placeholder="Enter name here"></p>
<h2>Hello(ng-bind) <span ng-bind="name1"></span></h2>
</div>

</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>

</div>

</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<body>

<div ng-app="" ng-init="firstName='vellore'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>

</body>
</html>
<!DOCTYPE html>
<html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"
></script><body>
<p>Change the value of the input field:</p>
<div ng-app="" ng-init="myCol='yellow'">
<input type="text" style="background-color:{{myCol}}" ng-model="myCol">
</div>
<p>AngularJS resolves the expression and returns the result.</p>
<p>The background color of the input box will be whatever you write in the input field.
</p></body></html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"
></script><body>

<div ng-app="" ng-init="quantity=5;cost=5;">

<p>Total in dollar: {{ quantity * cost }}</p>


</div>
</div>

</body></html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<body>

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[1] }}</p>

</div>

</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<body>

<div ng-app="" ng-init="names=[


{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'},{name:'vijay',country:'india'}]">

<p>Looping with objects:</p>


<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul>

</div>

</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="" ng-init="firstName='John';lastName='Doe';">

<p>The full name is: {{ firstName + " " + lastName }}</p>

</div>

</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<body>

<div ng-app="" ng-init="names=['Jani','Hege','Kai','vit']">


<p>Looping with ng-repeat:</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>

</body>
</html>
<!DOCTYPE html><html><script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script><body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
{{ firstName + " " + lastName }}
</div><script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "VIT";
$scope.lastName = "Vellore";
});</script></body></html>
<!DOCTYPE html>
<html>
<head>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script></head>
<body ng-app = "myapp">
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Web Technology!</h2>
<h2>Welcome {{helloTo.num}} to the world of Web Technology!</h2>
</div><script>
angular.module("myapp", []).controller("HelloController",
function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS today";
$scope.helloTo.num = 4;
});</script></body></html>

You might also like