Posted under AngularJS
Permalink
Tags Tip, Tutorial
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>