Let's say we have the following service:
myApp.factory('FooService', function () { ...
Then, from a controller, I would say:
myApp.controller('FooCtrl', ['$scope', 'FooService', function ($scope, FooService) { ...
The two-part question is:
Found a reasonable solution. Inject it into the bootstrap method (run), and add it to the root scope. From there it will be available to all controllers and views.
myApp.run(function ($rootScope, $location, $http, $timeout, FooService) {
$rootScope.foo = FooService;
....
Re-reading the post I mentioned above, it didn't say "wrap" exactly... just "abstract", so I presume the poster was referring to this same solution.
For thoroughness, the answer to (1) is then:
myApp.controller('FooCtrl', ['$scope', function ($scope) {
// scope inherits from root scope
$scope.foo.doSomething();
...
and the answer to (2) is simply:
{{doSomething()}}
Complementing question #1 (Global accesibillity) I will only add that in order to avoid issues when minifiying the file (if that's the case) it should be written like this:
this.app.run(["$rootScope", "Foo", function($rootScope, FooService) {
return $rootScope.fooService = FooService;
}
]);
As far as accessing the service directly in the view, that seems exceedingly un-angular. Binding it to a scope variable in the controller seems like a better solution than using the service directly in the UI to help maintain separation of duties.