<!doctype html> <html ng-app="app"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> </head> <script> var app = angular.module("app", []) app.factory("Data", function(){ return { firstname: "Adel" } }) // First Controller app.controller("first", function(Data, $scope){ $scope.userData = Data }) // Second Controller app.controller("second", function(Data, $scope){ $scope.userData = Data }) </script> <body> <div ng-controller="first"> <input type="text" ng-model="userData.firstname" > <br> from controller one : <span>{{userData.firstname}}</span> </div> <div ng-controller="second"> <br> from controller two : <span>{{userData.firstname}}</span> </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="script1.js"></script> </head> <body ng-app="mainApp"> <center><h1 class="h1">Custom Services Demo</h1></center> <div class="col-md-4 col-md-offset-0 col-xs-12"> <div id="seen"> <div class="login"> <!--<h2>AngularJS Services Implementation</h2><hr><br><br>--> <h2>Get Square Root For A Number</h2><hr/> <div ng-controller = "CalcController"> <p>Enter a number: <input type = "number" ng-model = "number" /></p> <button ng-click = "square()">X<sup>0.5</sup></button> <p>Result: {{number}}</p> </div> </div> </div> </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> <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> var app = angular.module("myApp", []) app.controller("HelloController", function($scope){ $scope.message = "Hello World" }) </script> </head> <body ng-app="myApp"> <div ng-controller="HelloController"> {{message}} </div> </body> </html>
<!doctype html> <html ng-app="myAap" ng-controller="myController"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> <style> .orderRow{ padding-left: 10px; padding-right: 10px; cursor: pointer; } .showError{ color:red; } input.ng-touched{ border-color:red; } input.ng-valid{ border-color:green; } </style> </head> <body> <div> <h3><u>Show Details : </u></h3> <table border="2"> <tr> <th>Si No.</th> <th> Name <span ng-click="manageOrder('Name')" class="orderRow">↓</span> </th> <th> City <span ng-click="manageOrder('City')" class="orderRow">↓</span> </th> <th> Country <span ng-click="manageOrder('Country')" class="orderRow">↓</span> </th> <th>Action</th> </tr> <tr ng-repeat="x in userData | orderBy : orderByField"> <td>{{$index+1}}</td> <td>{{x.Name}}</td> <td>{{x.City}}</td> <td>{{x.Country}}</td> <td><button ng-click="editRecord(userData.indexOf(x))">Edit</button></td> </tr> </table> </div><br> <div> <h3><u>Manage User Data : </u></h3> <h4><u>{{formHeading}}</u></h4> <form name="userForm"> <div> Name : <input type="text" ng-model="Name" name="Name" required minlength="6" pattern="[A-z\s]*"> <span ng-show="userForm.Name.$touched && userForm.Name.$invalid" class="showError">Error in this field</span> </div><br> <div> City : <input type="text" ng-model="City" name="City" required minlength="6" pattern="[A-z\s]*"> <span ng-show="userForm.City.$touched && userForm.City.$invalid" class="showError">Error in this field</span> </div><br> <div> Country : <input type="text" ng-model="Country" name="Country" required minlength="6" pattern="[A-z\s]*"> <span ng-show="userForm.Country.$touched && userForm.Country.$invalid" class="showError">Error in this field</span> </div><br> <button ng-disabled="userForm.Name.$invalid || userForm.City.$invalid || userForm.Country.$invalid" ng-click="saveData(editId)">{{buttonText}}</button> </form> </div> <script> var aap = angular.module('myAap' , []); aap.controller('myController' , function($scope , $http){ $http({ url : 'https://www.w3schools.com/angular/customers.php', method : 'GET' }).then(function(response){ $scope.userData = response.data.records; }); $scope.orderByField = ''; $scope.manageOrder = function(orderByField){ $scope.orderByField = orderByField; }; $scope.formHeading = 'Add new user'; $scope.Name = $scope.City = $scope.Country = ''; $scope.buttonText = 'Save'; $scope.flag = 'as'; $scope.editId = ''; $scope.saveData = function(editId){ if($scope.flag == 'as') { $scope.userData.push({'Name' : $scope.Name , 'City' : $scope.City , 'Country' : $scope.Country}); } else if($scope.flag == 'es') { $scope.userData[editId].Name = $scope.Name; $scope.userData[editId].City = $scope.City; $scope.userData[editId].Country = $scope.Country; } $scope.Name = $scope.City = $scope.Country = ''; $scope.userForm.$setPristine(); $scope.userForm.$setUntouched(); }; $scope.editRecord = function(editId){ $scope.formHeading = 'Edit existing user'; $scope.Name = $scope.userData[editId].Name; $scope.City = $scope.userData[editId].City; $scope.Country = $scope.userData[editId].Country; $scope.buttonText = 'Update'; $scope.flag = 'es'; $scope.editId = editId; }; }); </script> </body> </html>
<!doctype html> <html > <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> </head> <body ng-app="demo"> <div ng-controller="demoController"> <h1> Binding Example </h1> {{fullname("Ganesh","99")}} </div> <br> <div ng-controller="repeatController"> <h1> Repeat Example </h1> <ul> <li ng-repeat="empName in Employee.Names"> {{empName.name}} </li> </ul> </div> <br> <div ng-controller="firstController"> <h1> Controller Within Controller </h1> <div ng-controller="secondController"> {{name}} </div> </div> <script type="text/javascript"> var app = angular.module("demo",[]); //------ Binding-------- app.controller('demoController',function($scope){ $scope.fullname = function(firstName,LastName) { return firstName + LastName; } }); //----- Repeat controller---------- app.controller("repeatController",function($scope){ $scope.Employee={ Names :[ {name: "Ganesh"}, {name: "Ganesh 1"}, {name: "Ganesh 2"} ] } }); //------ Controller Within controller----- app.controller("firstController",function($scope){ $scope.name="Ganesh First"; }); app.controller("secondController",function($scope){ $scope.name="Ganesh Second"; }); </script> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more
