AngularJS services
Work in progress
by bruscopelliti
HTML
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>My AngularJS App</title>
</head>
<body ng-controller="stageController">
<h1>AngularJS Services</h1>
<div id="main">
<div title="This is a Circle" class="form circle"></div>
<div title="This is a Square" class="form square"></div>
<div title="This is a Parallelogram" class="form parallelogram"></div>
</div>
<p>by <a href="http://brunoscopelliti.com" target="_blank" title="{{author}}">{{author}}</a>
</p>
</body>
</html>
CSS
body {
margin:0;
padding:0;
}
h1 {
font-size:24px;
}
body > div {
min-height:120px;
margin:10px 0 15px;
padding:10px;
}
body > p {
background:#EEEEEE;
margin:0;
padding:5px 10px;
text-align:right;
}
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> <style> body {
padding:5px 10px;
}
body > div {
min-height:160px;
}
body > p {
background:#EEEEEE;
margin:0;
position:fixed;
bottom:0;
padding:5px 0;
text-align:center;
width:100%;
}
.form {
cursor:pointer;
display:inline-block;
height:60px;
margin:0 20px;
width:60px;
}
.circle {
background:Orange;
border-radius:30px;
}
.square {
background:Green;
}
.parallelogram {
background:blue;
-webkit-transform: skew(-10deg);
}
a {
color: #D1001C;
font-weight: bold;
opacity: 1;
text-decoration: none;
}
a:hover {
opacity:0.8;
text-decoration: underline;
}
JavaScript
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.services']);
/* Controllers */
function stageController(scope, a, identifies) {
scope.author = a;
identifies();
}
stageController.$inject = ['$scope', 'author', 'identifier'];
/* Services */
angular.module('myApp.services', [])
.value('author', 'Bruno Scopelliti')
.factory('identifier', ['$window', function (win) {
return function () {
}
}]);