<body ng-app='MainApp'>
<div ng-controller='MainCtrl'>
<div>
<div>Text: <input type='text' ng-model='text' /></div>
<button type='button' ng-click='speak(text);'>Speak</button>
</div>
</div>
</body>var mainMod = angular.module('MainApp', ['ServiceMod']);
mainMod.controller('MainCtrl', ['$scope','testService',
function ($scope,testService) {
$scope.text = '';
$scope.speak = function(text){
testService.speak(text);
}
}
]);
var serviceMod = angular.module('ServiceMod', []);
serviceMod.factory('testService',function(){
var service = {};
service.words = [];
service.speak = function(word){
this.words.push(word);
if(this.words.length > 3){
alert(this.words.join(' '));
this.words = [];
}
}
return service;
});
External CSS
This Pen doesn't use any external CSS resources.