2つの異なるルートの2つのコントローラが同じサービスを共有できますか？

Question

2つの異なるルート上の複数のコントローラ間で同じサービスを再利用しようとしています。私は最初のコントローラを使用してサービス中のオブジェクトの名前を設定し、ルートを変更し、何も印刷されない第2のコントローラを使用してサービス内の同じオブジェクトをフェッチしようとします。

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()); 
}]) 

同じサービスを2つの異なるルート上の複数のコントローラ間で再利用しようとしています。私は最初のコントローラを使用してサービス中のオブジェクトの名前を設定し、ルートを変更し、何も印刷されない第2のコントローラを使用してサービス内の同じオブジェクトをフェッチしようとします。

Answer 1

はい、角度サービスは、複数のコントローラとサービス間でデータを共有することを意図しています。

ここでは、モジュールを複数回初期化しています。角度モジュールは、コントローラー、サービス、指示などのさまざまな部分のアプリケーション用のコンテナです。角度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 
}); 

私はこれがあなたを助けてくれることを願っています！