Skip to content

Instantly share code, notes, and snippets.

@sphingu

sphingu/Configuratoin&RunPhase.html

Created February 25, 2014 06:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sphingu/bc79454665df1b763fb9 to your computer and use it in GitHub Desktop.
Save sphingu/bc79454665df1b763fb9 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJsHub.Com Module Example
Raw
Configuratoin&RunPhase.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Configuration and Run phases</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
var PersonManager = function () {
var fullNameSeparator = " ";
return {
setFullNameSeparator: function (separator) { fullNameSeparator = separator; },
$get: function (person) {
return {
getPersonFirstName: function () { return person.firstName; },
getPersonLastName: function () { return person.lastName; },
getPersonFullName: function () { return person.firstName + fullNameSeparator + person.lastName; }
}
}
};
};
angular.module("mainModule", []).value("person", { firstName: "", lastName: "" }).provider("personManager", PersonManager)
.config(function (personManagerProvider) { personManagerProvider.setFullNameSeparator("*"); })
.run(function (person) { person.firstName = "Sumit"; person.lastName = "Hingu"; })
.controller("mainController", function ($scope, person, personManager) {
$scope.personInstance=person;
$scope.personManagerInstance=personManager;
});
</script>
</head>
<body ng-app="mainModule" ng-controller="mainController">
<p>
First Name : {{personManagerInstance.getPersonFirstName()}}<br />
Last Name : {{personManagerInstance.getPersonLastName()}}<br />
Full Nmae : {{personManagerInstance.getPersonFullName()}}<br />
</p>
<p>
Set first name:
<input type="text" ng-model="personInstance.firstName" /><br />
Set last name:
<input type="text" ng-model="personInstance.lastName" />
</p>
</body>
</html>
Raw
Module.html
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title>Module in Angular JS</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
/* Simple Module with No Dependency */
angular.module("mainModule", []).controller("contactController", function ($scope) {
//Initialize Model
$scope.person = {
firstName: 'Sumit',
lastName: 'Hingu',
//Define utility functions on the model object
getFullName: function () { return this.firstName + " " + this.lastName; }
};
});
</script>
</head>
<body ng-app="mainModule">
<div ng-controller="contactController">
<p>
First Name : {{person.firstName}}
<br />
Last Name : {{person.lastName}}
<br />
Full Name : {{person.getFullName()}}
</p>
Set First Name :
<input type="text" ng-model="person.firstName" /><br />
Set Last Name :
<input type="text" ng-model="person.lastName" />
</div>
</body>
</html>
Raw
RegisterFactory.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Register Factory</title>
<script src="angular.min.js"></script>
<script>
var PersonManager = function (person) {
//Private Variable
var personInstance = person;
return {
getPersonFirstName: function () { return personInstance.firstName; },
getPersonLastName: function () { return personInstance.lastName; },
getPersonFullName: function (separator) { return personInstance.firstName + separator + personInstance.lastName; }
};
}
angular.module("mainModule", []).value("person", { firstName: "", lastName: "" })
//Register Factory with person management function and name it as 'PersonManager'
//this factory requires "person" object instance registered as a value in this module and passed as DI
.factory("personManager", PersonManager).controller("mainController", function ($scope, person, personManager) {
person.firstName = "Sumit";
person.lastName = "Hingu";
$scope.personInstance = person;
$scope.personManagerInstance = personManager;
});
</script>
</head>
<body ng-app="mainModule" ng-controller="mainController">
<p>
First Name : {{personManagerInstance.getPersonFirstName()}}<br />
Last Name : {{personManagerInstance.getPersonLastName()}}<br />
Full Name : {{personManagerInstance.getPersonFullName(" / ")}}<br />
</p>
<p>
Set First Name : <input type="text" ng-model="personInstance.firstName" /><br/>
Set Last Name : <input type="text" ng-model="personInstance.lastName" />
</p>
</body>
</html>
Raw
RegisterProvider.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="angular.min.js"></script>
<script type="text/javascript">
var PersonManager = function () {
return {
$get: function (person) {
return {
getPersonFirstName: function () { return person.firstName; },
getPersonLastName: function () { return person.lastName; },
getPersonFullName: function (separator) { return person.firstName + separator + person.lastName; }
}
}
};
}
angular.module("mainModule", []).value("person", { firstName: "", lastName: "" }).provider("personManager", PersonManager)
.controller("mainController", function ($scope, person, personManager) {
person.firstName = "Sumit";
person.lastName = "Hingu";
$scope.personInstance = person;
$scope.personManagerInstance = personManager;
});
</script>
</head>
<body ng-app="mainModule" ng-controller="mainController">
<p>
First Name : {{personManagerInstance.getPersonFirstName()}}<br />
Last Name : {{personManagerInstance.getPersonLastName()}}<br />
Full Nmae : {{personManagerInstance.getPersonFullName("*")}}<br />
</p>
<p>
Set first name:
<input type="text" ng-model="personInstance.firstName" /><br />
Set last name:
<input type="text" ng-model="personInstance.lastName" />
</p>
</body>
</html>
Raw
REgisterService.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Register a Service</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
var PersonManager = function (person) { this.personInstance = person; }
PersonManager.prototype.getPersonFirstName = function () { return this.personInstance.firstName; };
PersonManager.prototype.getPersonLastName = function () { return this.personInstance.lastName; };
PersonManager.prototype.getPersonFullName = function (separator) { return this.personInstance.firstName + separator + this.personInstance.lastName; };
angular.module("mainModule", []).value("person1", { firstName: "", lastName: "" })
/*register a service with PersonManager Function and name it as personManager
this service required the person object instance registered as a value in the "mainModule"
*/
.service("personManager", PersonManager).controller("mainController", function ($scope, person, personManager) {
$scope.personManagerInstance = personManager;
person.firstName = 'Sumit';
person.lastName = 'Hingu';
});
</script>
</head>
<body ng-app="mainModule">
<div ng-controller="mainController">
<p>
First Name : {{personManagerInstance.getPersonFirstName()}}<br />
Last Name : {{personManagerInstance.getPersonLastName()}}<br />
Full Name : {{personManagerInstance.getPersonFullName(" / ")}}
</p>
<p>
Set First Name :
<input type="text" ng-model="personManagerInstance.personInstance.firstName" /><br />
Set Last Name :
<input type="text" ng-model="personManagerInstance.personInstance.lastName" />
</p>
</div>
</body>
</html>
Raw
RegisterValue.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Registering a value </title>
<script src="angular.min.js"></script>
<script type="text/javascript">
angular.module("mainModule", [])
//register object instance as a value and name it as person
.value("person", { firstName: "", lastName: "", getFullName: function () { return this.firstName + " " + this.lastName; } })
//get "person" registered object instance throught DI(dependency injection)
.controller("personController", function ($scope, person) {
person.firstName = "Sumit";
person.lastName = "Hingu";
//set a variable on the scope to a reference the "person" instance
$scope.personInstance = person;
});
</script>
</head>
<body ng-app="mainModule">
<div ng-controller="personController">
<p>
First Name : {{personInstance.firstName}}
<br />
Last Name : {{personInstance.lastName}}
<br />
Full Name : {{personInstance.getFullName()}}
</p>
Set First Name :
<input type="text" ng-model="personInstance.firstName" /><br />
Set Last Name :
<input type="text" ng-model="personInstance.lastName" />
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment