Skip to content

Commit 3fef3a1

Browse files
pkozlowski-opensourcepkozlowski-opensource
committed
feat(chapter4): code samples for chapter 4
1 parent bb5bc50 commit 3fef3a1

File tree

27 files changed

+579
-0
lines changed

27 files changed

+579
-0
lines changed

‎1820EN_04_Code/01 - different directive names/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<html>
2+
<head>
3+
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
4+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
5+
</head>
6+
7+
<body ng-app ng-init="name = 'World'">
8+
<ul>
9+
<li><input ng-model="name"></li>
10+
<li><input ng:model="name"></li>
11+
<li><input ng_model="name"></li>
12+
<li><input x-ng-model="name"></li>
13+
<li><input x-ng:model="name"></li>
14+
<li><input x-ng_model="name"></li>
15+
<li><input data-ng-model="name"></li>
16+
<li><input data-ng:model="name"></li>
17+
<li><input data-ng_model="name"></li>
18+
<li><input data_ng-model="name"></li>
19+
</ul>
20+
</body>
21+
</html>

‎1820EN_04_Code/02 - display - expressions escaping/expressionsEscaping.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
angular.module('expressionsEscaping', ['ngSanitize'])
2+
.controller('ExpressionsEscapingCtrl', function ($scope) {
3+
$scope.msg = 'Hello, <b>World</b>!';
4+
});

‎1820EN_04_Code/02 - display - expressions escaping/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
6+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-sanitize.js"></script>
7+
<script src="expressionsEscaping.js"></script>
8+
</head>
9+
<body ng-app="expressionsEscaping" ng-controller="ExpressionsEscapingCtrl">
10+
<p>{{msg}}</p>
11+
<p ng-bind-html-unsafe="msg"></p>
12+
<p ng-bind-html="msg"></p>
13+
</body>
14+
</html>

‎1820EN_04_Code/03 - ngShowHide and ngSwitch/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<html>
2+
<head>
3+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
4+
</head>
5+
6+
<body ng-app>
7+
<label>Show secret? <input type="checkbox" ng-model="showSecret"></label>
8+
<hr>
9+
<div ng-show="showSecret">Secret</div>
10+
<hr>
11+
<div ng-hide="!showSecret">Secret</div>
12+
<hr>
13+
<div ng-switch on="showSecret">
14+
<div ng-switch-when="true">Secret</div>
15+
<div ng-switch-default>Won't show you any of my secrets!</div>
16+
</div>
17+
</body>
18+
</html>

‎1820EN_04_Code/04 - repeater - basic syntax/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
6+
<script src="repeaterBasics.js"></script>
7+
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
8+
<link href="repeater.css" rel="stylesheet">
9+
</head>
10+
<body ng-app="repeaterBasics" ng-controller="RepeaterBasicsCtrl">
11+
12+
<table class="table table-bordered">
13+
<tr ng-repeat="user in users" ng-class-even="'light-gray'" ng-class-odd="'dark-gray'">
14+
<td>{{user.name}}</td>
15+
<td>{{user.email}}</td>
16+
</tr>
17+
</table>
18+
19+
<table class="table table-bordered">
20+
<tr ng-repeat="user in users" ng-class="{'dark-gray' : !$index%2, 'light-gray' : $index%2}">
21+
<td>{{user.name}}</td>
22+
<td>{{user.email}}</td>
23+
</tr>
24+
</table>
25+
26+
<ul>
27+
<li ng-repeat="(name, value) in user">
28+
Property {{$index}} with {{name}} has value {{value}}
29+
</li>
30+
</ul>
31+
32+
</body>
33+
</html>

‎1820EN_04_Code/04 - repeater - basic syntax/repeater.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.light-gray {
2+
background-color: #f9f9f9;
3+
}
4+
5+
.dark-gray {
6+
background-color: #dddddd;
7+
}

‎1820EN_04_Code/04 - repeater - basic syntax/repeaterBasics.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
angular.module('repeaterBasics', [])
2+
3+
.controller('RepeaterBasicsCtrl', function ($scope) {
4+
$scope.users = [
5+
{ name:'Pawel', email: '[email protected]' },
6+
{ name:'Peter', email: '[email protected]' }
7+
];
8+
9+
$scope.user = $scope.users[0];
10+
});

‎1820EN_04_Code/05 - repeater - iterating over object properties/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
6+
<script src="repeatOverObject.js"></script>
7+
</head>
8+
<body ng-app="repeatOverObjectApp" ng-controller="RepeatOverObjectCtrl">
9+
10+
<ul>
11+
<li ng-repeat="(key, value) in dataAsObj">{{key}} => {{value}}</li>
12+
</ul>
13+
14+
</body>
15+
</html>

‎1820EN_04_Code/05 - repeater - iterating over object properties/repeatOverObject.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
angular.module('repeatOverObjectApp', [])
2+
3+
.controller('RepeatOverObjectCtrl', function ($scope) {
4+
5+
$scope.dataAsObj = {
6+
foo : 'foo value',
7+
bar : 'bar value',
8+
baz : 'baz value'
9+
};
10+
});

‎1820EN_04_Code/06 - repeater - list with details patterns/index.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
6+
<script src="listAndDetails.js"></script>
7+
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
8+
<link href="repeater.css" rel="stylesheet">
9+
</head>
10+
<body ng-app="listAndDetails">
11+
12+
<div>
13+
<table class="table table-bordered" ng-controller="ListAndOneDetailCtrl">
14+
<thead>
15+
<tr>
16+
<th>Name</th>
17+
<th>e-mail</th>
18+
</tr>
19+
</thead>
20+
<tbody ng-repeat="user in users" ng-click="selectUser(user)" ng-switch on="isSelected(user)">
21+
<tr>
22+
<td>{{user.name}}</td>
23+
<td>{{user.email}}</td>
24+
</tr>
25+
<tr ng-switch-when="true" class="light-gray">
26+
<td colspan="2">{{user.desc}}</td>
27+
</tr>
28+
</tbody>
29+
</table>
30+
</div>
31+
32+
<div ng-controller="ListAndManyDetailsCtrl">
33+
<table class="table table-bordered">
34+
<thead>
35+
<tr>
36+
<th>Name</th>
37+
<th>e-mail</th>
38+
</tr>
39+
</thead>
40+
<tbody ng-repeat="user in users" ng-controller="UserCtrl" ng-click="toggleSelected()" ng-switch on="isSelected()">
41+
<tr>
42+
<td>{{user.name}}</td>
43+
<td>{{user.email}}</td>
44+
</tr>
45+
<tr ng-switch-when="true" class="light-gray">
46+
<td colspan="2">{{user.desc}}</td>
47+
</tr>
48+
</tbody>
49+
</table>
50+
</div>
51+
52+
53+
54+
</body>
55+
</html>

‎1820EN_04_Code/06 - repeater - list with details patterns/listAndDetails.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
angular.module('listAndDetails', [])
2+
3+
.value('users', [
4+
{ name:'Pawel', email:'[email protected]', desc:'Pawel details go here...'},
5+
{ name:'Peter', email:'[email protected]', desc:'Peter details go here...' }
6+
])
7+
8+
.controller('ListAndOneDetailCtrl', function ($scope, users) {
9+
$scope.users = users;
10+
11+
$scope.selectUser = function (user) {
12+
$scope.selectedUser = user;
13+
};
14+
15+
$scope.isSelected = function (user) {
16+
return $scope.selectedUser === user;
17+
};
18+
})
19+
20+
.controller('ListAndManyDetailsCtrl', function ($scope, users) {
21+
$scope.users = users;
22+
})
23+
24+
.controller('UserCtrl', function ($scope) {
25+
26+
$scope.toggleSelected = function () {
27+
$scope.selected = !$scope.selected;
28+
};
29+
30+
$scope.isSelected = function (user) {
31+
return $scope.selected;
32+
};
33+
});

‎1820EN_04_Code/06 - repeater - list with details patterns/repeater.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.light-gray {
2+
background-color: #f9f9f9;
3+
}
4+
5+
.dark-gray {
6+
background-color: #dddddd;
7+
}

‎1820EN_04_Code/07 - event handlers/eventHandlers.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
angular.module('eventHandlers', [])
2+
3+
.controller('EventhandlersCtrl', function ($scope) {
4+
5+
$scope.items = ['foo', 'bar', 'baz'];
6+
7+
$scope.readPosition = function (item, $event) {
8+
console.log(item + ' was clicked at: ' + $event.clientX + ',' + $event.clientY);
9+
};
10+
});

‎1820EN_04_Code/07 - event handlers/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
6+
<script src="eventHandlers.js"></script>
7+
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
8+
</head>
9+
<body ng-app="eventHandlers" ng-controller="EventhandlersCtrl">
10+
11+
<ul>
12+
<li ng-repeat="item in items" ng-click="logPosition(item, $event)">
13+
{{item}}
14+
</li>
15+
</ul>
16+
17+
</body>
18+
</html>

‎1820EN_04_Code/08 -filters - array filters full example/arrayFilters.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
angular.module('arrayFilters', [])
2+
3+
.controller('ArrayFiltersCtrl', function ($scope) {
4+
5+
//model
6+
$scope.backlog = [
7+
{name:'Submit proposal', desc:'Submit book proposal to PACKT', priority:1, estimation:1, done:true},
8+
{name:'Prepare outline', desc:'Prepare book outline with estimated page count', priority:2, estimation:2, done:true},
9+
{name:'Prepare samples', desc:'Think of code samples', priority:3, estimation:5, done:true},
10+
{name:'Write 1st draft', desc:'Write 1st draft of the text', priority:3, estimation:12, done:false},
11+
{name:'Review draft', desc:'Re-read and review the 1st draft', priority:4, estimation:5, done:false},
12+
{name:'Incorporate reviewers remarks', desc:'Go over and reviewers remarks ', priority:6, estimation:3, done:false},
13+
{name:'Promote in social media', desc:'Promote book in social media!', priority:10, estimation:1, done:false}
14+
];
15+
16+
//filtering
17+
$scope.filteredBacklog = $scope.backlog;
18+
19+
//custom filtering function
20+
21+
$scope.doneAndBigEffort = function (backlogItem) {
22+
return backlogItem.done && backlogItem.estimation > 20;
23+
};
24+
25+
//sorting
26+
$scope.sortField = undefined;
27+
$scope.reverse = false;
28+
29+
$scope.sort = function (fieldName) {
30+
if ($scope.sortField === fieldName) {
31+
$scope.reverse = !$scope.reverse;
32+
} else {
33+
$scope.sortField = fieldName;
34+
$scope.reverse = false;
35+
}
36+
};
37+
38+
$scope.isSortUp = function (fieldName) {
39+
return $scope.sortField === fieldName && !$scope.reverse;
40+
};
41+
$scope.isSortDown = function (fieldName) {
42+
return $scope.sortField === fieldName && $scope.reverse;
43+
};
44+
45+
//pagination
46+
$scope.pageSize = 3;
47+
$scope.pages = [];
48+
$scope.$watch('filteredBacklog.length', function(filteredSize){
49+
$scope.pages.length = 0;
50+
var noOfPages = Math.ceil(filteredSize / $scope.pageSize);
51+
for (var i=0; i<noOfPages; i++) {
52+
$scope.pages.push(i);
53+
}
54+
});
55+
56+
$scope.setActivePage = function (pageNo) {
57+
if (pageNo >=0 && pageNo < $scope.pages.length) {
58+
$scope.pageNo = pageNo;
59+
}
60+
};
61+
})
62+
63+
.filter('pagination', function(){
64+
return function(inputArray, selectedPage, pageSize) {
65+
var start = selectedPage*pageSize;
66+
return inputArray.slice(start, start + pageSize);
67+
};
68+
});

‎1820EN_04_Code/08 -filters - array filters full example/arrayFilters.spec.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
describe('pagination filter', function () {
2+
3+
var paginationFilter;
4+
beforeEach(module('arrayFilters'));
5+
beforeEach(inject(function (_paginationFilter_) {
6+
paginationFilter = _paginationFilter_;
7+
}));
8+
9+
it('should return a slice of the input array', function () {
10+
11+
var input = [1, 2, 3, 4, 5, 6];
12+
13+
expect(paginationFilter(input, 0, 2)).toEqual([1, 2]);
14+
expect(paginationFilter(input, 2, 2)).toEqual([5, 6]);
15+
16+
expect(paginationFilter(input, 0, 3)).toEqual([1, 2, 3]);
17+
expect(paginationFilter(input, 1, 3)).toEqual([4, 5, 6]);
18+
});
19+
20+
it('should return empty array for out-of bounds', function () {
21+
22+
var input = [1, 2];
23+
expect(paginationFilter(input, 2, 2)).toEqual([]);
24+
});
25+
});

0 commit comments

Comments
 (0)