项目作者: derrandz

项目描述 :
A better way than controllers
高级语言: JavaScript
项目地址: git://github.com/derrandz/ng-serve-by.git
创建时间: 2016-10-29T11:46:14Z
项目社区:https://github.com/derrandz/ng-serve-by

开源协议:MIT License

下载


ng-server-by

A better way than controllers

What is ngServeBy ?

ngServeBy is directive that binds services to the scope of the using element. As if using ngController.

Why not just use ngController?

It’s often that we write services to distribute code in our application. And to make usage of service, we inject them to controllers/directives, but then to reuse them somewhere else, we’ll either re-instantiate a controller or inject them to that other directive.

Example:

Let’s imagine we have a little app where we would like to display our posts in the news feed (e.g: as in facebook) :

For that we have written a service:

postsService.js

  1. app.service('postsService', function () {
  2. return {
  3. fetch: function () {},
  4. refresh: function () {},
  5. spinLoader: function () {}
  6. ...
  7. };
  8. });

Injected it into a controller:

postsController.js

  1. app.controller('postsController', function ($scope, postsService) {
  2. $scope.fetch = postsService.fetch;
  3. $scope.refresh = postsService.refresh;
  4. $scope.spinLoader = postsService.spinLoader;
  5. // other functionalities
  6. });

And use it in our page (Jade is used in here instead of html, because it’s simpler):

  1. div(ng-controller="postsController")
  2. div(ng-init="fetch()")
  3. ...

But then, whenever we would like to use that somewhere else, without wanting to creat another controller, create a file for it, call it in the dom, what could you do? Use ngServeBy!

Usage:

Define our services in a fashion that allows binding functions to the current scope, as if in a controller, only now you could use the same service all across your app without having to create controllers:

postsService.js

  1. app.service('postsService', function () {
  2. // You can directly bind your vars/functions to the scope
  3. return function (scope) { // or function (scope, element, attrs) if you need to manipulate the DOM
  4. scope.fetch = function () {};
  5. ...
  6. };
  7. // or you can make use of the `as` syntax
  8. return function (scope) { // or function (scope, element, attrs) if you need to manipulate the DOM
  9. var self = this;
  10. self.fetch = function () {};
  11. ...
  12. };
  13. });

And in your page:

  1. // When you've bound your vars/functions to the scope.
  2. div(ng-serve-by="postsService")
  3. div(ng-init="fetch()")
  4. ...
  5. // When you've bound your vars/functions to `this` keyword.
  6. div(ng-serve-by="postsService as p")
  7. div(ng-init="p.fetch()")
  8. ...

Why all that?

Honestly, I missed on why I created this solution to begin with, but one of the reasons is that because it solved some of my problems at the time, and not until recently I felt like sharing it after having forgot most of the reasons why. If you think it’s a good practice or a bad practice, please let me know!