<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html>
<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> </head> <body ng-app=" " ng-init="a=100"> <input type="text" ng-model="a"> <h1 ng-bind="a"></h1> </body> </html>
<html ng-app="notesApp"> <head><title>Notes App</title></head> <body ng-controller="MainCtrl as ctrl"> <div> <select ng-model="ctrl.selectedCountryId" ng-options="c.id as c.label for c in ctrl.countries"> </select> Selected Country ID : {{ctrl.selectedCountryId}} </div> <div> <select ng-model="ctrl.selectedCountry" ng-options="c.label for c in ctrl.countries"> </select> Selected Country : {{ctrl.selectedCountry}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"> </script> <script type="text/javascript"> angular.module('notesApp', []) .controller('MainCtrl', [function() { this.countries = [ {label: 'USA', id: 1}, {label: 'India', id: 2}, {label: 'Other', id: 3} ]; }]); </script> </body> </html>
<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html>
<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script> <style> .header{ width:800px; height : 80px; text-align:center; background-color:gray; } .footer{ text-align:center; background-color:gray; } .leftMenu{ background-color:gray; width:150px; height:500px; } .mainContent{ height:500px; width:650px; background-color:gray; } a{ display:block; padding:5px; } </style> </head> <body> <table border="1"> <tr> <td colspan="2" class="header"> Header </td> </tr> <tr> <td class="leftMenu"> <a href="#/home">Home</a> <a href="#/cources">Cources</a> <a href="#/students">Students</a> </td> <td class="mainContent"> Main Content </td> </tr> </table> </body> </html>
<!doctype html> <html > <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> </head> <body> <html ng-app="myApp"> <div ng-controller="myCtrl"> <input ng-model="FirstName" Placeholder="First Name"> <input ng-model="LastName" placeholder="Last Name"> Name: {{FirstName+" "+LastName}} </div> <div ng-controller="myCtrl2"> <input ng-model="FirstName2" Placeholder="First Name"> <input ng-model="LastName2" placeholder="Last Name"> Name: {{FirstName2+" "+LastName2}} </div> <div ng-init="MyColor='red'" > <input style="Background-color:{{MyColor}}" ng-bind="MyColor" > </div> <div ng-init="Quantity=5;Rate=2"> Total Price:{{Quantity*Rate}} <br/> <span ng-bind="Quantity*Rate"></span> </div> <div ng-init="EmpDetails={Fname:'Anurag',LName:'Tidke'}"> {{EmpDetails.Fname}} </div> <div ng-init="Numbers=[1,2,3,4,5,6]"> {{Numbers[2]}} </div> <div ng-init="Names=['Anurag','Akshay','Nikhil']"> <ul> <li ng-repeat="x in Names"> {{x}} </li> </ul> </div> <div ng-controller="NewController"> {{CarName}} </div> <div ng-app="NewApp" ng-controller="newController2"> {{TestName}} </div> </html> </body> </html> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.FirstName= "John"; $scope.LastName= "Doe"; }); app.controller('myCtrl2', function($scope) { $scope.FirstName2= "Anaya"; $scope.LastName2= "Tidke"; }); app.controller('NewController',function($scope){ $scope.CarName="Brezza"; }); var NewApp = angular.module('NewApp',[]); NewApp.controller('NewController2',function($scope){ $scope.TestName="New Test name"; }); </script>
<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html>
<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> <style> body{ color:brown; margin:100px; font-family: sans-serif; } </style> </head> <body> <div> <label>Name:</label> <input ng-model="yourName" placeholder=" Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> <label>I'm :</label> <input ng-model="filling" placeholder=" happy, sad, excited..."> <h2>Why are you {{filling}}?</h2> </div> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more