What components should an angular 1.5 application be divided into?

Question

Angular

Hello!
I need to implement a timer. Text with seconds placed in a directive with an isolated osprey. Tell me, please, where should the logic of the timer itself be located, with methods: start, pause, reset, get / set the current value? You can use directives in the controller, but how can you use methods in other components later?
You can, of course, push all the logic into the application controller, but then the meaning of using angular will be lost.

Answer 1

https://plnkr.co/edit/Ra0pAOJAhzZUvK0yluuL?p=preview

Answer 2

You don't even need a directive to solve the problem. It is better and more correct to use the component ( https://habrahabr.ru/post/277087/) , link the start, pause properties of the component (all values ​​are boolean) with the component attributes of the same name (it is better to bind unilaterally). In the component itself, implement all the necessary countdown logic (for example, through the $timeout service - https://docs.angularjs.org/api/ng/service/$timeout) , do not forget to cancel the wait for the time interval through the implementation of the $onDestroy() method in component.
The controller, by setting its properties that will be associated with the attributes of the component, will start and stop your stopwatch.
Here is an example of how it works output.jsbin.com/camuvetixo
Here is the code how it looks

//main.js
angular.module("myApp", []);

//app.component.js
angular.module("myApp").component("body", {
    controller: MyAppComponent,
    template: '<a href="javascript:void(0)" ng-click="$ctrl.OnStart()">start</a><br /><a href="javascript:void(0)" ng-click="$ctrl.OnStop()">stop</a><my-timer start="$ctrl.start"></my-timer>'
});
function MyAppComponent() {
    this.start = false;
    this.OnStart = function () {
        this.start = true;
    };
    this.OnStop = function () {
        this.start = false;
    }
}

//timer.component.js
angular.module("myApp").component("myTimer", {
    controller: MyTimerComponent,
    bindings: { start: "<" },
    template: "<div>{{$ctrl.time}}</div>"
});

function MyTimerComponent($timeout) {
    var _start, _cancel, _time = 0;

    function OnTime() {
        _cancel = $timeout(OnTime, 1000);
        _time++;
    }

    function Start() {
        if (_start) return
        _start = true;
        _cancel = $timeout(OnTime, 1000);
    }

    function Stop() {
        if (_start) {
            $timeout.cancel(_cancel);
            _time = 0;
            _start = false;
        }
    }

    Object.defineProperty(this, "start", {
        get: function () {
            return _start;
        },
        set: function (value) {
            if (_start != value) {
                if (value)
                    Start();
                else
                    Stop();
            }
        }
    });
    Object.defineProperty(this, "time", {
        get: function () {
            return _time;
        }
    });

    this.$onDestroy = Stop;
}