Skip to content

Commit 1710d2c

Browse files
pkozlowski-opensourcepkozlowski-opensource
committed
feat(chapter-11): code examples for chapter 11
1 parent 61f3210 commit 1710d2c

File tree

14 files changed

+291
-0
lines changed

14 files changed

+291
-0
lines changed

‎1820EN_11_Code/01 - inner working - how digest loop works/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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="internals.js"></script>
7+
</head>
8+
<body ng-app="internals">
9+
10+
11+
<div ng-init="name = 'World'">
12+
<input simple-model='name'>
13+
<span simple-bind="name"></span>
14+
</div>
15+
16+
</body>
17+
</html>

‎1820EN_11_Code/01 - inner working - how digest loop works/internals.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
angular.module('internals', [])
2+
.directive('simpleModel', function ($parse) {
3+
return function (scope, element, attrs) {
4+
5+
var modelGetter = $parse(attrs.simpleModel);
6+
var modelSetter = modelGetter.assign;
7+
8+
//Model -> DOM updates
9+
scope.$watch(modelGetter, function(newVal, oldVal){
10+
element.val(newVal);
11+
});
12+
13+
//DOM -> Model updates
14+
element.bind('input', function () {
15+
scope.$apply(function () {
16+
modelSetter(scope, element.val());
17+
});
18+
});
19+
};
20+
})
21+
22+
.directive('simpleBind', function ($parse) {
23+
return function (scope, element, attrs) {
24+
25+
var modelGetter = $parse(attrs.simpleBind);
26+
scope.$watch(modelGetter, function(newVal, oldVal){
27+
element.text(newVal);
28+
});
29+
};
30+
});

‎1820EN_11_Code/02 - watchers on scope are fired often/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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 type="text/javascript">
7+
var HelloCtrl = function ($scope) {
8+
$scope.name = 'World';
9+
$scope.getName = function() {
10+
console.log('in a watch');
11+
return $scope.name;
12+
};
13+
}
14+
</script>
15+
</head>
16+
<body ng-app>
17+
18+
<div ng-controller="HelloCtrl">
19+
Hello, <span>{{getName()}}</span>!
20+
<input ng-model="name"/>
21+
</div>
22+
23+
</body>
24+
</html>

‎1820EN_11_Code/03 - tuning cpu - watchers - expensive computations/expensiveComputation.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
angular.module('expensiveComputation', [])
2+
.controller('ExpensiveComputationCtrl', function ($scope) {
3+
$scope.name = 'World';
4+
5+
$scope.myComplexComputation = function () {
6+
console.log('computing');
7+
return $scope.name;
8+
};
9+
10+
11+
$scope.getName = function () {
12+
return $scope.name;
13+
};
14+
$scope.getNameLog = function () {
15+
console.log('getting name');
16+
return $scope.name;
17+
};
18+
})
19+
20+
.filter('myComplexFilter', function () {
21+
return function (input) {
22+
console.log('filtering');
23+
return input;
24+
};
25+
});

‎1820EN_11_Code/03 - tuning cpu - watchers - expensive computations/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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="expensiveComputation.js"></script>
7+
</head>
8+
<body ng-app="expensiveComputation">
9+
10+
11+
<div ng-controller="ExpensiveComputationCtrl">
12+
<input ng-model='name'>
13+
<hr>
14+
<p>Function in an expression: {{myComplexComputation()}}</p>
15+
<hr>
16+
<p>Filter in an expression: {{name | myComplexFilter}}</p>
17+
<hr>
18+
<span>{{getName()}}</span>
19+
<span>{{getNameLog()}}</span>
20+
</div>
21+
22+
</body>
23+
</html>

‎1820EN_11_Code/04 - tuning cpu - watchers - remove/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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="remove.js"></script>
7+
</head>
8+
<body ng-app="remove">
9+
10+
11+
<div ng-controller="RemoveCtrl">
12+
<input ng-model='name'> {{watchedName}}
13+
<button ng-click="unregister()">Stop watching</button>
14+
</div>
15+
16+
</body>
17+
</html>

‎1820EN_11_Code/04 - tuning cpu - watchers - remove/remove.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
angular.module('remove', [])
2+
3+
.controller('RemoveCtrl', function ($scope) {
4+
5+
$scope.name = 'World';
6+
7+
var watchUnregisterFn = $scope.$watch('name', function (newValue, oldValue) {
8+
console.log("Watching 'name' variable");
9+
$scope.watchedName = newValue;
10+
});
11+
12+
$scope.unregister = function () {
13+
watchUnregisterFn();
14+
};
15+
});

‎1820EN_11_Code/05 - tuning cpu - watchers - hidden watchers/hiddenWatches.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
angular.module('hiddenWatches', [])
2+
.controller('HiddenWatchesCtrl', function ($scope) {
3+
4+
$scope.name = 'World';
5+
6+
$scope.getNameLog = function () {
7+
console.log('getting name');
8+
return $scope.name;
9+
};
10+
});

‎1820EN_11_Code/05 - tuning cpu - watchers - hidden watchers/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="hiddenWatches.js"></script>
7+
</head>
8+
<body ng-app="hiddenWatches">
9+
10+
<div ng-controller="HiddenWatchesCtrl">
11+
<input ng-model='name'>
12+
<div ng-show="false">
13+
<span>{{getNameLog()}}</span>
14+
</div>
15+
</div>
16+
17+
</body>
18+
</html>

‎1820EN_11_Code/06 - tuning cpu - loops - timeout and the clock directive/clock.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
angular.module('ago', [])
2+
3+
.controller('ClockCtrl', function ($scope) {
4+
5+
$scope.evaluatedToo = function () {
6+
console.log("I'm evaluated too, each second!");
7+
};
8+
9+
$scope.$watch(function (newValue, oldValue) {
10+
console.log('$digest loop in progress...');
11+
});
12+
})
13+
14+
.directive('clockBad', function ($timeout, dateFilter) {
15+
return {
16+
restrict: 'E',
17+
link: function (scope, element, attrs) {
18+
19+
function update() {
20+
var timeNow = new Date();
21+
element.text(dateFilter(timeNow, 'hh:mm:ss'));
22+
$timeout(update, 1000);
23+
}
24+
25+
update();
26+
}
27+
};
28+
})
29+
30+
.directive('clockGood', function ($timeout, dateFilter) {
31+
return {
32+
restrict: 'E',
33+
link: function (scope, element, attrs) {
34+
35+
function update() {
36+
var timeNow = new Date();
37+
element.text(dateFilter(timeNow, 'hh:mm:ss'));
38+
$timeout(update, 1000, false);
39+
}
40+
41+
update();
42+
}
43+
};
44+
});

‎1820EN_11_Code/06 - tuning cpu - loops - timeout and the clock directive/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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="clock.js"></script>
7+
</head>
8+
<body ng-app="ago" ng-controller="ClockCtrl">
9+
<clock-bad></clock-bad>
10+
{{evaluatedToo()}}
11+
</body>
12+
</html>

‎1820EN_11_Code/07 - tuning memory - deep watches/deepWatch.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
angular.module('deepWatch', [])
2+
.controller('DeepWatchCtrl', function ($scope) {
3+
4+
$scope.user = {
5+
firstName: 'AngularJS',
6+
lastName: 'Superhero',
7+
age: 4,
8+
superpowers: 'unlimited'
9+
};
10+
11+
$scope.$watch('user', function (changedUser) {
12+
$scope.fullName = changedUser.firstName + ' ' + changedUser.lastName;
13+
}, true);
14+
15+
$scope.$watch(function(scope) {
16+
return scope.user.firstName + ' ' + scope.user.lastName;
17+
}, function (newFullName) {
18+
$scope.fullName2 = newFullName;
19+
});
20+
21+
$scope.fullNameFn = function () {
22+
return $scope.user.firstName + ' ' + $scope.user.lastName;
23+
};
24+
});

‎1820EN_11_Code/07 - tuning memory - deep watches/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="deepWatch.js"></script>
7+
</head>
8+
<body ng-app="deepWatch">
9+
10+
<div ng-controller="DeepWatchCtrl">
11+
<input type="text" ng-model="user.firstName"/>
12+
{{fullName}}
13+
{{fullName2}}
14+
{{fullNameFn()}}
15+
</div>
16+
17+
</body>
18+
</html>

‎1820EN_11_Code/08 - tuning memory - size of a watch/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+
</head>
7+
<body ng-app ng-init="variable='variable part'">
8+
<p>This is very long text that refers to one {{variable}} defined on a scope. This text can be really, really long and
9+
occupy a lot of space in memory. It is so long since… </p>
10+
11+
<p>This is very long text that refers to one <span ng-bind='variable'></span> defined on a scope. This text can be
12+
really, really long and occupy a lot of space in memory. It is so long since… </p>
13+
</body>
14+
</html>

0 commit comments

Comments
 (0)