Question

我是AngularJS的新手，我想了解如何正确地将模型与控制器分开。直到现在我一直在使用控制器内部的模型。例如：

angular.module("app").controller("customerController", ["Customer", "$scope", "$routeParams",
    function (Customer, $scope, $routeParams){
        $scope.customer = Customer.find({ID:$routeParams.ID});
}]);

此函数从数据库中检索客户并将该客户公开给该视图。但是我想更进一步：例如，我可能需要对数据库中包含的行数据进行抽象，或者创建一些有用的函数来进行抽象。类似的东西：

customer.getName = function(){
    //return customer_name + customer_surname
};
customer.save = function(){
    //save the customer in the database after some modifies
};

我想为Customer创建一个模型，并在许多控制器中重用该模型。也许我可以为客户创建一个List，其方法是从数据库或其他东西中检索所有客户。

总之，我希望有一个反映数据库实体（如上面的客户）的模型，其中包含与之交互的属性和方法。也许是创建客户或客户列表的工厂。如何在AngularJS中完成这样的任务？我想收到一些关于你这个问题的建议。一个简单的例子将是非常有用的或理论上的答案，帮助我找到正确的方法来解决像Angular这样的问题。谢谢，祝你工作顺利。

Answer 1

Angular JS使您可以在模型更改或事件发生时进行自动视图更新。哎呀！

它是通过使用$ watch来实现的，这些是一种全局范围java脚本对象，并且在角度js web应用程序的生命周期中保留在主存储器中。

1.在将任何内容放入 $范围之前，请考虑数据的大小，因为您附加到它的每个数据对象都会+1到$ watch。当您从数据库中读取时，您可能有包含＆gt; 4列的100多行并相信我它将消耗客户端处理。请考虑数据集的大小并阅读有关大数据集的角度相关性能问题

2.为您的数据库实体建模型我建议使用普通的javascript类，即不要把所有内容都放在$ scope上（它会避免不必要的手表！）http://www.phpied.com/3-ways-to-define-a-javascript-class/

3.您希望在用户更改值时启动事件。为此，我建议如果你使用ng-repeat来渲染数组中的数据，那么使用$ index来获取完成更改的行号，并在ng-click中传递它，并使用actionIdentifier来区分你想要的各种活动

ng-click="someFunc($index,actionIdentifier)"

Answer 2

您需要创建工厂/服务才能完成工作，请检查jsfiddle

HTML：

<div ng-app="users-app">
  <h2>Users</h2>
  <div ng-view ></div>

  <script type="text/ng-template" id="list.html">
      <p>Users: {{(user || {}).name || 'not created'}}</p>
      <button ng-click='getUser()'>Get</button>
      <button ng-click='saveUser(user)'>Save</button>
  </script>
</div>

JS：

angular.module('users-app', ['ngRoute'])

.factory('Users', function() {
    function User (user) {
        angular.extend(this, user);
    }

    User.prototype.save = function () {
        alert("saved " + this.name);
    }

    return {
        get: function() {
            return new User({name:'newUser'});
        }
    }
})

.config(function($routeProvider) {
  $routeProvider
    .when('/', {controller:'ListCtrl',templateUrl:'list.html'});
})

.controller('ListCtrl', function($scope, Users) {

   $scope.getUser = function() {
        $scope.user = Users.get();
    }
    $scope.saveUser = function(u) {
        u.save();
    }
})

希望有所帮助，罗恩

基于数据库实体创建模型

2 个答案: