AngularJS Examples

01_hello.html


<!DOCTYPE html>
<html ng-app>
<head>
<link rel="stylesheet" href="frameworks/bootstrap.min.css">
<style>
h5{width:400px;}
pre{width:200px;}
</style>
</head>
<body>
<div class="container">
<h5 class="bg-info">Type in the box:</h5>
<input type="text" ng-model="aardvark"/>
<h5 class="bg-info">It shows up here:</h5>
<h1>{{aardvark}}</h1>
<h5 class="bg-info">And affects this element:</h5>
<div class="row">
<div class="{{aardvark}}" style="font-size:1.5em;">
Wrap me in a Bootstrap element
</div>
</div><br>
<pre class="bg-success">
Try these:
pull-right
hidden
text-primary
bg-danger
</pre>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
</html>

02_controller.html


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="frameworks/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
</head>
<body>

<div class="container" ng-app="myApp">

<div ng-controller="FirstCtrl">
<input typre="text" ng-model="data.message">
<h1>{{data.message}}</h1>
</div>

<div ng-controller="SecondCtrl">
<input typre="text" ng-model="data.message">
<h1>{{data.message}}</h1>
</div>
</div>

<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.factory('Data',function() {
return {message: "I'm data from a service"}
})

function FirstCtrl($scope, Data) {
$scope.data = Data;
}

function SecondCtrl($scope, Data){
$scope.data = Data;
}
</script>
</body>
</html>

03_button.html


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="frameworks/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
</head>
<body>

<div class="container" ng-app="" ng-controller="loginController">
<button ng-click="toggle()">Hide login</button>
<p ng-hide="myVar">
Username: <input type=text ng-model="login.username"><br>
Password: <input type=password ng-model="login.password"><br><br>
Login String: {{login.username + " " + login.password}}
</p>

</div>

<script type="text/javascript">
function loginController($scope) {
$scope.login = {username: "username", password: "password"}
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
}
</script>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>
</html>


04_clock.html


<html ng-app="cookbookApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script type="text/javascript">
angular.module('cookbookApp', [])
.controller('MainController', function($scope, $interval) {
function calculateRotation() {
var now = new Date();
$scope.hourRotation = 360 * now.getHours() / 12;
$scope.minuteRotation = 360 * now.getMinutes() / 60;
$scope.secondRotation = 360 * now.getSeconds() / 60;
}
$interval(calculateRotation, 1000);
calculateRotation();
});
</script>
</head>
<body ng-controller="MainController">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<g>
<circle style="stroke: #ccc; fill: #fff;" cx="100" cy="100" r="100"/>
<line x1="100" y1="100" x2="100" y2="50" style="stroke-width: 5px; stroke: #333;" ng-attr-transform="rotate({{hourRotation}} 100 100)" />
<line x1="100" y1="100" x2="100" y2="20" style="stroke-width: 3px; stroke: #888;" ng-attr-transform="rotate({{minuteRotation}} 100 100)" />
<line x1="100" y1="100" x2="100" y2="5" style="stroke-width: 2px; stroke: #bb0000;" ng-attr-transform="rotate({{secondRotation}} 100 100)" />
</g>
</svg>
</body>
</html>

index.css


h2 {
display: inline;
margin-left: 15px;
}

p {
width: 480px;
border: 5px solid gray;
}

.toggle {
display: none;
}

.toggle + label {
color: #999999;
cursor: pointer;
display: inline;
font-weight: bold;
line-height: 21px;
margin: 5px 5px 5px 15px;
}

.toggle + label + br + div {
display: block;
overflow: hidden;
height: 0px;
width: 480px;
margin: 5px;
border: 5px solid gray;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}

.toggle:checked + label + br + div {
height: 300px;
overflow: scroll;
}

.toggle + label:after {
content: "+";
display: inline;
font-weight: bold;
}

.toggle:checked + label:after {
content: "\2212";
}



index.php


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="frameworks/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<h1>AngularJS Examples</h1>

<?php
$x=0;
$files_in_directory = scandir("/var/www/taoexmachina.com/example/angular/", 0);
array_shift($files_in_directory);
array_shift($files_in_directory);
foreach($files_in_directory as $FileName){
$x = $x + 1;
if (is_file($FileName)) {
if ($File = fopen($FileName,"rt")) {
print "<a href='".$FileName."'><h2>".$FileName."</h2></a>";
print "<input class='toggle' id='item".$x."' type='checkbox'><label for='item".$x."'>view code</label><br><div>";
while (!feof($File)) {
$Line = fgets($File);
print htmlspecialchars($Line)."<br>";
}
print "</div>";
fclose($File);
} else {
print "File cannot be opened";
}
}
}

?>
</div>
</body>
</html>