Untitled

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-route.min.js"></script>
    <script src="script.js"></script>
    
  </head>

  <body>
    <div ng-view>
        
    </div>
  </body>

</html>

var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'route1.html',
      controller: 'route1_controller'
    })
    .when('/route2', {
      templateUrl: 'route2.html',
      controller: 'route2_controller'
    });
});

app.controller('route1_controller', function($scope, service_example, $location) {
  $scope.go_to = function() {

    service_example.add_data($scope.input_data);
    $location.path('/route2');
  };
});

app.controller('route2_controller', function($scope, service_example) {
  $scope.data_from_service = service_example.get_data();
});

app.service('service_example', function() {
  var data;

  this.add_data = function(param) {
    data = param;
  };
  this.get_data = function() {
    return data;
  };
});

/* Styles go here */

<p>Route 1</p>
Data: <input ng-model="input_data" type="text" name="FirstName" value="Mickey"><button ng-click="go_to()">Submit</button>

<p>Route 2</p>
<p>Data from service: {{data_from_service}}</p>