Created
February 25, 2014 04:46
-
-
Save sphingu/6d9c64abac66e9439e50 to your computer and use it in GitHub Desktop.
AngularJSHub.com Examples Basic
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Nested Controller</title> | |
| <script src="angular.min.js"></script> | |
| <script src="nestedScript.js"></script> | |
| </head> | |
| <body> | |
| <div ng-controller="firstControllerScope"> | |
| First Name : {{firstName}} | |
| <br /> | |
| Set First Name : | |
| <input type="text" data-ng-model="firstName" /> | |
| <div ng-controller="secondControllerScope"> | |
| <p> | |
| First Name(from Parent) : {{$parent.firstName}} | |
| <br /> | |
| First Name : {{firstName}} | |
| <br /> | |
| Last Name : {{lastName}} | |
| <br /> | |
| Full Name : {{getFullName()}} | |
| </p> | |
| <p> | |
| Set First Name : | |
| <input type="text" data-ng-model="firstName" /><br /> | |
| Set Last Name : | |
| <input type="text" data-ng-model="lastName" /> | |
| </p> | |
| </div> | |
| </div> | |
| <h2>With ModelObject</h2> | |
| <div ng-controller="controllerFirst"> | |
| First Name : {{ firstModelObj.firstName}} | |
| <br /> | |
| Set First Name : | |
| <input type="text" data-ng-model="firstModelObj.firstName" /> | |
| <div ng-controller="controllerSecond"> | |
| <p> | |
| First Name : {{firstModelObj.firstName}} | |
| <br /> | |
| Last Name : {{secondModelObj.lastName}} | |
| <br /> | |
| Full Name : {{getFullName()}} | |
| </p> | |
| <p> | |
| Set First Name : | |
| <input type="text" data-ng-model="firstModelObj.firstName" /><br /> | |
| Set Last Name : | |
| <input type="text" data-ng-model="secondModelObj.lastName" /> | |
| </p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var firstControllerScope = function ($scope) { | |
| // Initialize the model variables | |
| $scope.firstName = "John"; | |
| }; | |
| var secondControllerScope = function ($scope) { | |
| // Initialize the model variables | |
| $scope.lastName = "Doe"; | |
| // Define utility functions | |
| $scope.getFullName = function () { | |
| return $scope.firstName + " " + $scope.lastName; | |
| }; | |
| }; | |
| var controllerFirst = function ($scope) { | |
| // Initialize the model object | |
| $scope.firstModelObj = { | |
| firstName: "sumit1" | |
| }; | |
| }; | |
| var controllerSecond = function ($scope) { | |
| $scope.secondModelObj = { lastName: "hingu2" }; | |
| $scope.getFullName = function () { | |
| return $scope.firstModelObj.firstName + " " + $scope.secondModelObj.lastName; | |
| }; | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html data-ng-app=""> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>One Way Binding</title> | |
| <!--<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>--> | |
| <script src="angular.min.js"></script> | |
| <script src="script.js"></script> | |
| </head> | |
| <!--remove because we initialize it in contactController | |
| <body data-ng-init="firstName='sumit';lastName='hingu';">--> | |
| <body data-ng-controller="contactController"> | |
| <div data-ng-controller="contactController"> | |
| <p> | |
| First Name : <span data-ng-bind="firstName"></span> | |
| <br /> | |
| Last Name : {{lastName}} | |
| <br /> | |
| Full Name : {{getFullName()}} | |
| </p> | |
| <p> | |
| Set First Name : | |
| <input type="text" data-ng-model="firstName" /><br /> | |
| Set Last Name : | |
| <input type="text" data-ng-model="lastName" /> | |
| </p> | |
| </div> | |
| <!-- Same As Above --> | |
| <div data-ng-controller="contactOneController"> | |
| <p> | |
| First Name : <span data-ng-bind="firstName"></span> | |
| <br /> | |
| Last Name : {{lastName}} | |
| <br /> | |
| Full Name : {{getFullName()}} | |
| </p> | |
| <p> | |
| Set First Name : | |
| <input type="text" data-ng-model="firstName" /><br /> | |
| Set Last Name : | |
| <input type="text" data-ng-model="lastName" /> | |
| </p> | |
| </div> | |
| </body> | |
| </html> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*One Way Binding | |
| Two Way Binding | |
| Controller | |
| MultipleController | |
| */ | |
| //simple Contact Controller in Angular js | |
| var contactController = function ($scope) { | |
| // Initialize the model variables | |
| $scope.firstName = 'sumit'; | |
| $scope.lastName = 'hingu'; | |
| // Define utility functions | |
| $scope.getFullName = function () { | |
| return $scope.firstName + " " + $scope.lastName; | |
| } | |
| }; | |
| //Another Controller with same as above | |
| var contactOneController = function ($scope) { | |
| // Initialize the model variables | |
| $scope.firstName = 'sumitOne'; | |
| $scope.lastName = 'hinguOne'; | |
| // Define utility functions | |
| $scope.getFullName = function () { | |
| return $scope.firstName + " " + $scope.lastName; | |
| } | |
| }; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment