AngularJS
Introduction To Angular JS:
Introduction To Angular JS:
- Angular Js is a Structural framework for developing dynamic Web Applications.
- It is a open source framework powered by Google.
- Angular JS is not a replacement of JavaScript. Infact it is developed using Javascript.
- It makes Client Side Programming easy.
- Angular JS Framework implements MVC Pattern (Model/View/Controller).
Angular JS Features:
- Structural Programing (MVC structure)
- Parallel Development
- Data Binding
- HTML as Template
- Highly Testable
- Routing Support for SPA
- Powered by Google
Task : Dynamic Display of Images
Output:
*.html
<html>
<head>
<style>
img{height:120;width:100;border:1px solid yellow;border-radius:25px}
.imgdisplaydivclass{width:280px;float:left;padding:10px;margin-left:60px;margin-bottom:20px;border:1px double black;border-radius:25px}
span{text-align:left}
</style>
</head>
<body bgcolor="#f0f0f0" ng-app="iplApp" >
<div style="background-color:DodgerBlue">
<p style="font-family:verdana;font-size:20;font-weight:bold;text-align:center;padding:5px 5px 5px 0px;"><img src="Images/coverpage.jpg" /> VIVO IPL 2018 Different Franchisee Team Captains <img src="Images/crickt.jpg"/> <img src="Images/Angular.png"/> Mr. Narasimha Rao <img src="Images/NRSir.jpg" /> Captain of Our Ship
</p>
</div>
<div ng-controller="IPLController">
<div class="imgdisplaydivclass" ng-repeat ="item in iPLTeams track by $index">
<img ng-src="Images/{{item.image}}"/><br><br>
<span><b>Name : </b> {{item.captain | uppercase}}</span><br>
<span><b>Team : </b>{{item.team}}</span><br>
<span><b>Auction Price : </b> <mark>{{item.auctionPrice | currency:"₹"}} cr</mark></span><br>
<span><b>Coach : </b>{{item.coach}}</span>
<br>
</div>
</div>
<script src="Scripts/angular.js"></script>
<script>
var app = angular.module("iplApp",[]);
app.controller("IPLController",function($scope)
{
$scope.iPLTeams = [{team:"Chennai Super Kings",captain : "MS Dhoni", auctionPrice: 15 , coach : "Stephen Fleming",image:"Dhoni.jpg"},
{team:"Delhi Daredevils",captain : "Gautham Gambhir", auctionPrice: 2.8 , coach : "Rickey Pointing",image:"Gambhir.jpg"},
{team:"Mumbai Indians",captain : "Rohit Sharma", auctionPrice: 15, coach : "Mahila Jayawardane",image:"Rohit.jpg"},
{team:"Kings XI Punjab",captain : "Yuvraj Singh", auctionPrice: 2 , coach : "Brad Hodge",image:"Yuvraj.jpg"},
{team:"Kolkata Knight Riders",captain : "Robin Uttappa", auctionPrice: 6.4 , coach : "Jacques Kallis",image:"Uttappa.jpg"},
{team:"Rajasthan Royals",captain : "Steve Smith", auctionPrice: 12.5, coach : "Paddy Upton",image:"Smith.jpg"},
{team:"Royal Chanllengers Bangalore",captain : "Virat Kohli", auctionPrice: 17 , coach : "Daniel Vettori",image:"Virat.jpg"},
{team:"Sunrisers Hyderabad",captain : "David Warner", auctionPrice: 12.5, coach : "Tom Moody",image:"warner.jpg"}];
});
</script>
</body>
</html>
