Question

我有一个角度应用，我们有4个不同的页面。每个页面都有自己的控制器。有一个主页有一个控制器，使用

路由到每个页面及其控制器

when('/a',{
            templateUrl: './components/a.html',
            controller:'aCtrl'
    }).
when('/b',{
            templateUrl: './components/b.html',
            controller:'bCtrl'
    }).
when('/c',{
            templateUrl: './components/c.html',
            controller:'cCtrl'
    }).
when('/d',{
            templateUrl: './components/d.html',
            controller:'dCtrl'
    }).
when('/home',{
            templateUrl: './components/Home.html',
            controller:homeCtrl'
}).

现在我想在这些控制器/页面之间共享一些数据或一些常用功能。我们应该怎么做？我用google搜索他们说使用SERVICE。但我不知道我需要在哪个控制器上编写服务。任何人都可以为此提供一个很好的例子。

Answer 1

AngularJS中的服务未在控制器中写入。它直接绑定到您的应用程序，可以在您的应用程序中的任何位置使用。这就是为什么服务是AngularJS中控制器之间的推荐通信方式。

你需要做的是写一个这样的服务：

angular.module('yourApp').service('serviceName', function () {....});

在服务中，您可以：

从API端点获取数据（您可以使用$http提供程序）

定义常量数据（您可以使用Angular＆＃39; constant提供商）

定义一些代码，这些代码接收一些数据并对其进行操作并返回新数据

您想要对数据做任何其他事情

现在，将服务作为依赖项包含在控制器中，如下所示：

angular.module('yourApp').controller('yourController', function (serviceName) { console.log(serviceName.getData()); // Do something with your data });

现在，在此控制器中，您可以访问服务已返回的数据。当然，可以将相同的服务注入多个控制器，从而可以跨控制器共享数据。

Answer 2

您可以通过多种方式共享数据。

事件
服务
$ rootScope

服务为我们提供了一种在整个应用程序中共享数据和功能的简便方法。我们创建的服务是可以注入控制器和其他服务的单例，使它们成为编写可重用代码的理想位置。

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

app.controller('leftCtrl', function ($scope,userService) {
left.btnClicked = function (object) {
   userService.saveData(object);
}
});

app.controller('rightCtrl', function ($scope, userService) {
$scope.getData = userService.getData();
});

app.service('userService', function () {
   var data = {};
   this.saveData = function(object){
   data = object;
}

this.getData = function(){
return data;
}
});

Answer 3

达斯汀有正确的方法。但是，有时您可以使用不同的方法，即将应用程序包装在AppController中。

现在可以访问AppController中的所有内容。您可以使用此方法来放置您希望应用程序的子控制器可以访问的函数或常量，而不必在任何地方注入服务。

<body ng-controller="AppController">
    <div ng-view></div>
</body>

在2个不同的控制器之间进

3 个答案: