Skip to content

Commit 79092a4

Browse files
author
Warren Seymour
committed
Add basic directive examples
1 parent 1cb30ef commit 79092a4

File tree

6 files changed

+146
-0
lines changed

6 files changed

+146
-0
lines changed

‎examples/7-1-ng-click.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>AngularJS Workshop &middot; Basic Directives &middot; ng-click</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link href="/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
7+
</head>
8+
<body ng-app="MyApp">
9+
<div class="container">
10+
<h1 class="page-header">AngularJS Workshop &middot; Basic Directives &middot; ng-click</h1>
11+
12+
<div class="well" ng-controller="PersonController">
13+
<p>{{ person.name }} is {{ person.age }} years old</p>
14+
<button class="btn btn-primary" ng-click="person.age = person.age - 1">Get younger</button>
15+
<button class="btn" ng-click="birthday()">Get older</button>
16+
</div>
17+
</div>
18+
19+
<script src="/lib/angular/angular.js"></script>
20+
<script src="js/7-1-ng-click.js"></script>
21+
</body>
22+
</html>

‎examples/7-2-ng-show-if.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>AngularJS Workshop &middot; Basic Directives &middot; ng-show and ng-if</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link href="/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
7+
</head>
8+
<body ng-app="MyApp">
9+
<div class="container">
10+
<h1 class="page-header">AngularJS Workshop &middot; Basic Directives &middot; ng-show and ng-if</h1>
11+
12+
<div ng-controller="PenController">
13+
<p>The pen is...</p>
14+
<input type="text" class="form-control" ng-model="pen.colour">
15+
16+
<div class="row">
17+
<div class="col-lg-6">
18+
<h2 class="page-header">ng-show</h2>
19+
<p ng-show="pen.colour == 'red'">The pen is red!</p>
20+
</div>
21+
22+
<div class="col-lg-6">
23+
<h2 class="page-header">ng-if</h2>
24+
<p ng-if="pen.colour == 'blue'">The pen is blue!</p>
25+
</div>
26+
</div>
27+
</div>
28+
</div>
29+
30+
<script src="/lib/angular/angular.js"></script>
31+
<script src="js/7-2-ng-show-if.js"></script>
32+
</body>
33+
</html>

‎examples/7-3-ng-repeat.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>AngularJS Workshop &middot; Basic Directives &middot; ng-repeat</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link href="/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
7+
</head>
8+
<body ng-app="MyApp">
9+
<div class="container">
10+
<h1 class="page-header">AngularJS Workshop &middot; Basic Directives &middot; ng-repeat</h1>
11+
12+
<div ng-controller="CarController">
13+
<div class="row">
14+
<div class="col-lg-6">
15+
<div ng-repeat="car in cars" class="well">
16+
{{ car.colour }} {{ car.make }}
17+
</div>
18+
</div>
19+
20+
<div class="col-lg-6 form-horizontal">
21+
<div class="form-group">
22+
<label class="col-lg-2 control-label">Colour</label>
23+
<div class="col-lg-10">
24+
<input type="text" class="form-control" ng-model="newCar.colour">
25+
</div>
26+
</div>
27+
28+
<div class="form-group">
29+
<label class="col-lg-2 control-label">Make</label>
30+
<div class="col-lg-10">
31+
<input type="text" class="form-control" ng-model="newCar.make">
32+
</div>
33+
</div>
34+
35+
<button class="btn btn-primary pull-right" ng-click="addCar()">Add Car</button>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
41+
<script src="/lib/angular/angular.js"></script>
42+
<script src="js/7-3-ng-repeat.js"></script>
43+
</body>
44+
</html>

‎examples/js/7-1-ng-click.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
angular.module('MyApp', [])
2+
.controller('PersonController', function($scope) {
3+
$scope.person = {
4+
name: "Warren Seymour",
5+
age: 28
6+
};
7+
8+
$scope.birthday = function() {
9+
$scope.person.age += 1;
10+
};
11+
});

‎examples/js/7-2-ng-show-if.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
angular.module('MyApp', [])
2+
.controller('PenController', function($scope) {
3+
$scope.pen = {
4+
colour: 'green'
5+
};
6+
});

‎examples/js/7-3-ng-repeat.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
angular.module('MyApp', [])
2+
.controller('CarController', function($scope) {
3+
$scope.cars = [
4+
{
5+
colour: "Blue",
6+
make: "Metro"
7+
},
8+
{
9+
colour: "Black",
10+
make: "Astra"
11+
},
12+
{
13+
colour: "Grey",
14+
make: "Corsa"
15+
}
16+
];
17+
18+
$scope.newCar = {
19+
colour: "",
20+
make: ""
21+
};
22+
23+
$scope.addCar = function() {
24+
$scope.cars.push($scope.newCar);
25+
$scope.newCar = {
26+
colour: "",
27+
make: ""
28+
};
29+
};
30+
});

0 commit comments

Comments
 (0)