Angular-timer siddii

Question

in my web app (which is with angularJs in the front part and with Symfony2 in the back part) i need to integrate a timer (count down of a quizzer) i found this timer https://github.com/siddii/angular-timer on github and it seems to be cool but i don't the integration in my webapp works but when i try to start the counter on an event (button click) it don't works, in fact i tried this script:

<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example - Single Timer Example</title>
<script src="../angular/angular.min.js"></script>
<script src="../app/js/timer.js"></script>
<script>
    angular.module('MyApp', ['timer']);
    function MyAppController($scope) {
        $scope.timerRunning = true;

        $scope.startTimer = function (){
            $scope.$broadcast('timer-start');
            $scope.timerRunning = true;
        };

        $scope.stopTimer = function (){
            $scope.$broadcast('timer-stop');
            $scope.timerRunning = false;
        };

        $scope.$on('timer-stopped', function (event, data){
            console.log('Timer Stopped - data = ', data);
        });
    }
    MyAppController.$inject = ['$scope'];
</script>
</head>
<body ng-app="MyApp">
    <div ng-controller="MyAppController">
    <h1>AngularJS - Single Timer Example</h1>
    <h3><timer/></h3>
    <button ng-click="startTimer()" ng-disabled="timerRunning">Start   Timer</button>
    <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
    </div>
    <br/>
</body>
</html>

and i got this error:

Argument 'MyAppController' is not a function, got undefined

any one can help me plz ?

after some changes the my code becomes :

   <!DOCTYPE html>
<html>
 <head>
   <title>AngularJS Example - Single Timer Example</title>
    <script src="../angular/angular.min.js"></script>
    <script src="../app/js/timer.js"></script>
    <script>
      var myApp =  angular.module('myApp', ['timer']);
        myApp.controller('MyAppController', ['$scope', function ($scope) 

    {
        $scope.timerRunning = true;

        $scope.startTimer = function (){
            $scope.$broadcast('timer-start');
            $scope.timerRunning = true;
    };

    $scope.stopTimer = function (){
        $scope.$broadcast('timer-stop');
        $scope.timerRunning = false;
    };

    $scope.$on('timer-stopped', function (event, data){
        console.log('Timer Stopped - data = ', data);
    });
}]).$inject = ['$scope'];

 </script>
 </head>
 <body ng-app="myApp">
<div ng-controller="MyAppController">
<h1>AngularJS - Single Timer Example</h1>
<h3><timer/></h3>
<button ng-click="startTimer()" ng-disabled="timerRunning">Start   Timer</button>
<button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
</div>
  <br/>
</body>
</html>

and i'm getting this beauty :/

Unknown provider: I18nServiceProvider <- I18nService

Instead of `function MyAppController($scope) {`, put: `angular.module('MyApp').controller('MyAppController', ['$scope', function ($scope) { ...you controller code here... }]);` — mggSoft, Apr 28 '15 at 10:32
i'll edit my code after some changes and the problem persists but the error is not the same now — Alouini Khalil, Apr 28 '15 at 11:03
look at the question after the edit provider: I18nServiceProvider <- I18nService — Alouini Khalil, Apr 28 '15 at 11:10
Delete this from code: `.$inject = ['$scope']`. You are injecting here: `myApp.controller('MyAppController', ['$scope', function ($scope) `. — mggSoft, Apr 28 '15 at 11:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/76444/discussion-between-mggsoft-and-alouini-khalil). — mggSoft, Apr 28 '15 at 11:27
https://jsfiddle.net/#&togetherjs=J7xoDyscuw this is a jsFiddle just we need to include the _timer and the angular script because in the jsFiddle it is my path — Alouini Khalil, Apr 28 '15 at 11:29

Angular-timer siddii

0 Answers0