Question

我正在尝试在两个不同的路由上跨多个控制器重用相同的服务。我使用第一个控制器设置了服务对象的名称并更改了路径，并尝试使用第二个控制器获取相同的对象，没有任何内容被打印。

app.js(file):

   angular.module('sampleapp', ["ngRoute"]).

   config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
  .when('/',
   {
    templateUrl: 'src/loginform/loginform.html',
    controller: 'LoginFormController'
   })
  .when('/home',
   {
     templateUrl: 'src/home/home.html',
     controller: 'HomeController'
   })
}])

Service Code: 

angular.module('sampleapp').service("CommonService", [function() {
  const Names = [
    {Name: "Mounish", age: 27},
    {Name: "Chakradhari", age: 24},
    {Name: "Venkat", age: 28}
  ];

  this.data = {
    firstName: ''
  };

  this.printNames = function() {
    return Names;
  }

  this.setName = function(value) {
    this.data.firstName = value;
  }

  this.getName = function() {
    return this.data.firstName;
  }

}])

Login form (controller 1):

angular.module('sampleapp')
.controller('LoginFormController', ["$scope", "$location", "CommonService", function($scope, $location , CommonService) {
  $scope.username = "jamili";
  $scope.submitHandler = function(event) {
    event.preventDefault();
    console.log("Clicked");
    window.location.href = '/home';
  };

  CommonService.setName("Mounish");
  CommonService.getName();
}])

Home Page (Controller 2): 
angular.module('sampleapp')
.controller('HomeController', ['$scope', "CommonService", function($scope, CommonService) {
    $scope.names = CommonService.printNames();
    console.log($scope.names);
    console.log(CommonService.getName());
}])

我正在尝试在两个不同的路由上跨多个控制器重用相同的服务。我使用第一个控制器设置了服务对象的名称并更改了路径，并尝试使用第二个控制器获取相同的对象，没有任何内容被打印。

Answer 1

是的，角度服务旨在在多个控制器和服务之间共享数据。

此处，您正在多次初始化模块。 Angular模块是app的不同部分的容器，如控制器，服务，指令等。您应该创建一次角度module。如果多次创建角度模块，它将覆盖以前的模块。

这是角度模块的documentation。

您可以按照this方法注册您的控制器和服务。

var sampleApp = angular.module('sampleApp',[])
sampleApp.service('CommonService',function(){
  //your processing logic 
});

sampleApp.controller('Controller_1',function($scope,CommonService){
  //write your code here
});

sampleApp.controller('Controller_2',function($scope,CommonService){
 //write your code here
});

我希望这会对你有所帮助!!

可以两个不同路由的两个控制器共享相同的服务吗？

1 个答案: