angularjs中控制器的可能（部分类）概念吗？

Question

有没有办法在 angularjs 中使用部分代码进行代码分组？

原因 --- 我有一个包含太多代码的控制器。这个控制器包含了一些方法和许多功能的代码，它降低了代码的可读性。我想保持控制器名称相同并进行代码分组。

例如：-

app.controller('MainController', function ($scope, router) {
    $scope.Read = function() {

    };
    $scope.Write = function() {

    };
    $scope.Update = function() {

    };
    $scope.Delete = function() {

    };
});

部分：

    app.controller('MainController', function ($scope, router) {
        $scope.firstName = firstname;
        $scope.middleName = middleName;
        $scope.lastName = lastName;
    });

另一个部分：

    app.controller('MainController', function ($scope, router) {
        $scope.Print = function() {

        };
        $scope.PrintPreviw = function() {

        };
    });

我需要这样实现。

还有其他方法吗？是的，请更新.. 谢谢

Answer 1

您可以尝试将代码分类为逻辑块。之后，您可以将逻辑块合并到对象中。

//Do NOT do this!
$scope.firstName = firstname;
$scope.middleName = middleName;
$scope.lastName = lastName;

//instead do this
var person = {
    firstname: "name",
    middleName: "mName",
    lastName: "Lname"
}

//then in your view access them like this
{ { person.firstname } }

此外，您可以将一些代码移动到服务或工厂中。然后在控制器中使用这些方法。

//take things out of your controller and put then in a service or factory.
app.service('notePad', function () {
    return {

        Read: function (newState) {
            return state += state;
        },

        Write: function (state) {
            return state += state;
        },
        Update: function (state) {
            state = state;
        },
        Delete: function () {
            state = null;
        }

    };
});

//then in your controller access them like this
//Note you do not need everything on $scope if you are not going to use it in the view.
app.controller('MainController', function ($scope, router, notePad) {
    $scope.Read = notePad.Read();
    $scope.Write = notePad.Write();
    $scope.Update = notePad.Update();
    $scope.Delete = notePad.Delete();
});

如果您需要服务内的控制器功能，您仍然可以访问范围和其他控制器属性，例如。

注意：确保您创建了一个 onDestroy 方法来清理所有剩余的变量。

//pass your scope to your service
app.controller('MainController', function ($scope, router, notePad) {
    notePad.changeView($scope);
});

//munipulate your scope just like you would in a controller
app.service('notePad', function () {
    function changeView(scope) {
        scope.write = 'example';
    }
});

//the result of the scope change in the service will show up in the view
{ { write } } == 'example'