Archive for the 'AngularJS' Category

July 22nd, 2017
10:52 pm
AngularJS – Controller Lifecycle and using $scope lifecycle hooks

Posted under AngularJS
Tags ,

This post here answers a basic question I had as to what is the AngularJS controller lifecycle.

The post links to a plnker which demonstrates some of the lifecycle hooks – $viewContentLoaded and $destroy.

These posts relate to the events used/hooked in the example – but more digging is needed to expand on this area:

https://docs.angularjs.org/api/ngRoute/directive/ngView

https://stackoverflow.com/questions/28800426/what-is-on-in-angularjs

https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Unfortunately my first attempt at trying this in an angularjs-up-and-running example failed with $scope being undefined.

I initially used this code pattern to pass $scope into the controller:

angular.module('notesApp', [])

.controller('SubCtrl', [function($scope) {

console.log('SubCtrl has been constructed');
$scope.$on('$viewContentLoaded', function() {
console.log('SubCtrl has loaded');
});
$scope.$on('$destroy', function() {
console.log('SubCtrl is no longer necessary');
})

var self = this;
self.list = [
{id: 1, label: 'Item 0'},
{id: 2, label: 'Item 1'}
];

self.add = function() {
self.list.push({
id: self.list.length + 1,
label: 'Item ' + self.list.length
});
};
}]);

The problem above is that the controller function is passed as an array (to avoid problems during minification) and so $scope has to be passed differently as per this post here.

angular.module('notesApp', [])
.controller('SubCtrl', ['$scope', function(scope) {

console.log('SubCtrl has been constructed');
scope.$on('$viewContentLoaded', function() {
console.log('SubCtrl has loaded');
});
scope.$on('$destroy', function() {
console.log('SubCtrl is no longer necessary');
})

var self = this;
self.list = [
{id: 1, label: 'Item 0'},
{id: 2, label: 'Item 1'}
];

self.add = function() {
self.list.push({
id: self.list.length + 1,
label: 'Item ' + self.list.length
});
};
}]);

The complete working example follows:

app.js

// File: chapter5/need-for-service/app.js
angular.module('notesApp', [])
.controller('MainCtrl', [function() {
var self = this;
self.tab = 'first';
self.open = function(tab) {
self.tab = tab;
};
}])
.controller('SubCtrl', ['$scope', function(scope) {

console.log('SubCtrl has been constructed');
scope.$on('$viewContentLoaded', function() {
console.log('SubCtrl has loaded');
});
scope.$on('$destroy', function() {
console.log('SubCtrl is no longer necessary');
})

var self = this;
self.list = [
{id: 1, label: 'Item 0'},
{id: 2, label: 'Item 1'}
];

self.add = function() {
self.list.push({
id: self.list.length + 1,
label: 'Item ' + self.list.length
});
};
}]);

index.html

<!-- File: chapter5/need-for-service/index.html -->
<html ng-app="notesApp">

<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js">
</script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as mainCtrl">
<h1>Hello Controllers!</h1>
<button ng-click="mainCtrl.open('first')">Open First</button>
<button ng-click="mainCtrl.open('second')">Open Second</button>
<div ng-switch on="mainCtrl.tab">

<div ng-switch-when="first">
<div ng-controller="SubCtrl as ctrl">
<h3>First tab</h3>
<ul>
<li ng-repeat="item in ctrl.list">
<span ng-bind="item.label"></span>
</li>
</ul>

<button ng-click="ctrl.add()">Add More Items</button>
</div>

</div>
<div ng-switch-when="second">
<div ng-controller="SubCtrl as ctrl">
<h3>Second tab</h3>
<ul>
<li ng-repeat="item in ctrl.list">
<span ng-bind="item.label"></span>
</li>
</ul>

<button ng-click="ctrl.add()">Add More Items</button>
</div>
</div>
</div>
</body>

</html>

No Comments »