1

My HTML docs look like this:

<div>
        ...
     <button ng-click='cos.contentsRetrieve()'>
         Retrieve
     </button>

In my angular-ui-router appConfig I have:

controller: ['$scope','contentService', 'enumService', 
            function ($scope, contentService, enumService) {
                $scope.cos = contentService;
                $scope.ens = enumService;
        }],

My service (and the interface file for it define things like the contentsRetrieve() function.

Is this the correct way for me to be linking the services and the HTML? Also is there any way with AngularJS 1.4 that I can have any type checking of the functions (in this case 'cos.contentsRetrieve' ? I assume the answer is not until I use Angular 2 but I would just like to be sure I am on the right track right now.

user990423
  • 1,397
  • 2
  • 12
  • 32
  • I tried to show how to hook up Typescript and angular with plunkers [here](http://stackoverflow.com/q/30482138/1679310) and with more details [there](http://stackoverflow.com/a/30507056/1679310)... it is not ui-router (great option btw ;) but it could show how to... – Radim Köhler Aug 11 '15 at 13:36

3 Answers3

1

First thing, i wouldn't use $scope because it's deprecated, use controllerAs syntax instead (nice blog post explaining the topic). Then you can bind service directly to controller as you did so in our case ctrl.service = injectedService and the n in template ctrl.service.method(). What is also possible is to store data directly in service and show it through controller binding directly in the template so that controller is only used as a delegate between user events and service methods and data. This patter in described in model pattern blog post.

tomastrajan
  • 1,728
  • 14
  • 28
1

I agree with @tomastrajan as for controllerAs syntax. Also I recommend you to declare $inject field and specify types of your services:

class YourController {
    static $inject = ['contentService', 'enumService'];

    constructor(public cos: ContentService, public ens: EnumService) {

    }
}

Then you can register your controller in a simple way:

yourApp.controller('YourController', YourController);

Configure router like this:

controller: 'YourController as yc'

And use controller in HTML:

ng-click='yc.cos.contentsRetrieve()'
Artem
  • 1,773
  • 12
  • 30
0

If all you need to do is bind a method to your click handler then do just that on $scope. There shouldn't be any reason for you to bind your entire service to $scope.

<div>
    ...
    <button ng-click='retrieveContents()'>
        Retrieve
    </button>

controller: ['$scope','contentService', 'enumService', 
            function ($scope, contentService, enumService) {
                $scope.retrieveContents = contentService.contentsRetrieve;
                ...
        }],

Though, what you probably want to do is get some content (asynchronously) and then display it. Assuming your service method returns a promise you would want to create a method within the controller that uses your services, then does stuff with the return value(s). 

<div>
...
<button ng-click='getStuff()'>Retrieve</button>
<div>{{stuff}}</div>

controller: ['$scope','contentService', 'enumService', 
                function ($scope, contentService, enumService) {
                    $scope.getStuff = function() {
                        contentService.contentsRetrieve().then(function (results) {
                            $scope.stuff = results;
                        });
                    };
                    ...
            }],
alaney
  • 613
  • 5
  • 12