2014-07-03 36 views
7

Angular似乎没有提供一个内置的解决方案来定义具有属性和方法的类实例,而且它是开发人员构建它的。AngularJS面向对象的方法

您认为这样做的最佳做法是什么? 如何将此链接与后端链接?

我收集的一些提示使用了工厂服务和命名函数。

来源: Tuto 1 Tuto 2

感谢您的见解

回答

7

我认为最接近的结构,它可能是一个factory,有以下几个原因对象:

基本语法:

.factory('myFactory', function (anInjectable) { 

    // This can be seen as a private function, since cannot 
    // be accessed from outside of the factory 
    var privateFunction = function (data) { 
    // do something 
    return data 
    } 

    // Here you can have some logic that will be run when 
    // you instantiate the factory 
    var somethingUseful = anInjectable.get() 
    var newThing = privateFunction(somethingUseful) 

    // Here starts your public APIs (public methods) 
    return { 
    iAmTrue: function() { 
     return true 
    }, 

    iAmFalse: function() { 
     return false 
    }, 

    iAmConfused: function() { 
     return null 
    } 
    } 
}) 

然后你就可以使用它像一个标准的对象:

var obj = new myFactory() 

// This will of course print 'true' 
console.log(obj.iAmTrue()) 

希望这会有所帮助,我完全知道角度模块的第一次冲击可能相当激烈...

+0

这似乎很容易实现;最好的办法是将这个链接以某种方式链接到我在节点端用猫鼬定义的模式,以便从定义的位置获取属性,而不是重写它们,并将它们与角度服务中的方法组合。我在考虑ngResource,但没有成功构建工作案例。这有道理吗? – vonwolf

+0

我不确定。在我看来,通过这样做(我不知道它是否可行),你正试图将前端和后端连接起来。作为一个经验法则,解耦越好越好。 无论如何,'ngResource'只是'$ http'资源的包装,我个人不喜欢。 – domokun

+0

@domokun'new myFactory()'如何在你的情况下工作?工厂返回一个对象,所以你通常不能调用'new ...()'。你在做一些额外的技巧吗?我得到'对象不是一个函数'运行它。 – Lycha

1

你会使用的角度服务。

所有的角度服务都是单例,可以注入任何控制器。

理想情况下,您只需在控制器中保留html上的绑定/操作,其余逻辑将在您的服务中。

希望这会有所帮助。

1

我的想法通过评估这个库:https://github.com/FacultyCreative/ngActiveResource

但是这个库假定严格休息,所以我这不是为我工作。什么做工作是这样的:

我创建的基本型号

var app = angular.module('app', []); 

    app .factory('Model', function(){ 
     var _cache = {}; // holding existing instances 
     function Model() { 
      var _primaryKey = 'ID', 
       _this = this; 

       _this.new = function(data) { 
       // Here is factory for creating instances or 
       // extending existing ones with data provided 
       } 

     } 

     return Model; 
}); 

比我带着简单的功能扩展“继承”

Function.prototype.inherits = function (base) { 
     var _constructor; 
     _constructor = this; 
     return _constructor = base.apply(_constructor); 
    }; 

,现在我CAM创建我的模型是这样

app.factory('Blog', [ 
    'Model', 
    '$http', 
    function(Model, $http) { 
    function Blog() { 
     // my custom properties and computations goes here 
     Object.defineProperty(this, 'MyComputed' , { 
     get: function() { return this.Prop1 + this.Prop2 } 
     }); 
    } 

    // Set blog to inherits model 
    Blog.inherits(Model); 

    // My crud operations 

    Blog.get = function(id) { 
    return $http.get('/some/url', {params: {id:id}}).then(function(response) { 
     return Blog.new(response.data); 
    }); 
    } 

    return Blog; 

    } 
]); 

最后,在控制中使用它oller

app.controller('MyCtrl', [ 
    '$scope', 'Blog', 
    function($scope, Blog) { 
     Blog.get(...).then(function(blog) { 
     $scope.blog = blog; 
     }); 
    } 
]) 

现在,我们的模型和扩展中还有更多,但这将是一个主要原则。我不是声称这是最好的方法,但我正在开发一个非常大的应用程序,它对我来说真的很棒。

注意:请注意,我在此输入此代码,可能会出现一些错误,但主要原则在这里。

0

由于我的问题并没有真正反映我所面临的问题,所以我只是为了它而发布我的方法:正如Domokun所说,经验法则是将正面和背面分开。但是,由于我只是建立原型并管理两端,我只想将事情放在一个地方,让其他应用程序使用中央信息作为服务。

我想在这里做的是通过构建NG-重复的表单包含模型领域,最重要的是如何在形式显示信息(例如“姓”而不是“姓”)

所以正如我开始解决猫鼬模型一样,这里是我设法做到的:

首先,可以通过app.get请求将模型的猫鼬模式从节点端传递到角端,其中包含以下响应:

res.send(mongoose.model('resources').schema.paths); 

它会吐出一个包含“资源”集合的所有字段的对象。最重要的是我包括在这样的模型的一些附加信息:

var resourceSchema = new Schema({ 
    _id: { type: Number }, 
    firstname: { type: String, display:'First name' }, 
    lastname: { type: String, display:'Last name' } 
}); 

mongoose.model('resources', resourceSchema); 

所以基本上我可以检索这个对称的角边,我有我需要映射字段,并很好地显示出来。看来我也可以描述验证,但我还没有。

赞赏这种方法的任何建设性反馈(无论是有效的还是完全的异端)。