CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Suat Karabacak
Suat Karabacak

Reputation: 651

How to store data from two different web pages in one controller in angular.js

I am trying to create a web page which allows you create some task on server with Angular.js When you want to create a task you need APIs because of this I don't want to enter APIs for every task I create I want to enter APIs just one time but I don't want to do it with local or session storage

and keep in json object which I create but when I enter data to same object from different forms it is not getting data in same object. I can take data from object but not in one piece

 <div class="jumbotron text-center">
        <h1>Currency Alert Form</h1>
                    This form makes use platform to send you email notifications when a currency exchange rate falls or rises above a value.<br><br>
<div>

<form role="form" ng-submit="" novalidate>

	<div class="form-group">
	<input class="form-control" type="text" placeholder="Task Name" ng-model="formData.task_name" id="task_name" required>
	</div>
	
	<div class="form-group">
	<input class="form-control" type="text" placeholder="E-Mail" ng-model="formData.email" id="email" required>
	</div>

	<div class="form-group">
	<input class="form-control" type="text" placeholder="Currency" ng-model="formData.currency" id="currency" required>
	</div>
	
	<div class="form-group">
	<label for="frequency">Above</label>
	<input class="minimal" name="compare" ng-model="formData.compare" type="radio" checked  id="above" value="above">
	<label for="frequency">Below</label>
	<input class="minimal" name="compare" type="radio" ng-model="formData.compare"  id="below" value="below">
	<input type="number" step="any" name="threshold" ng-model="formData.threshold" id="threshold" placeholder="e.g. 0.9" required>
	</div>
	
	<div class="form-group">
	<button type="submit" class="btn btn-success">Submit</button>
	</div>

</form>
{{formData}}
{{formData.apiKey}}


</div>
    </div>

Here is my HTML code for currency alert.

 <!DOCTYPE html>
     <html ng-app="myApp">
    <head>
      
      <!-- load bootstrap and fontawesome via CDN -->
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

      
      <!-- load angular and angular route via CDN -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
      <script src="js/app.js"></script>
    </head> 
	<body ng-controller="generalController">   

        <!-- HEADER AND NAVBAR -->
        <header>	
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">waylay task center</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#about"><i class="fa fa-shield"></i> APIs</a></li>
                    <li><a href="#contact"><i class="fa fa-comment"></i> Currency Alert</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">
		 <div class="jumbotron text-center">
        <h1>
		 API KEYS
		 </h1>
		<div class="form-group">
		<input type="text" id="api_key" placeholder="API Key" ng-model="formData.apiKey" class="form-control"></input>
		</div>
		<div class="form-group">
		<input type="text" id="api_secret" placeholder="API Secret" ng-model="formData.apiSecret" class="form-control"></input>
		{{formData}}
		</div>
			</div>
			 <div ng-view>
			
			 </div>


        </div>

    </body>
    </html>

and this one is for main page.

And finally my .js file.

// app.js
var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider){
	
	$routeProvider
						
			
			.when('/', {
				templateUrl : 'pages/home.html',
				controller  : 'generalController'
			})

			
			.when('/about', {
				templateUrl : 'pages/about.html',
				controller  : 'generalController'
			})

			
			.when('/contact', {
				templateUrl : 'pages/contact.html',
				controller  : 'generalController'
			});
	
});



myApp.controller('generalController', function($scope){
	$scope.message = 'you are at general page';
	
	$scope.formData={
		apiKey:"",
		apiSecret:"",
		currency:"",
		task_name:"",
		compare:"",
		email:"",
		threshold:""
	};
});

Upvotes: 2

Views: 882

Answers (1)

harishr
harishr

Reputation: 18055

you can use service to share data between controllers. below is an example of how to do it

app.factory('theService', function() {  
    return {
        customers: {}
    };
});

app.controller("DashboardCtrl", function($scope, theService) {
    theService.customers = $scope.customers;
});

app.controller("ClientCtrl", function($scope, theService) { 
    $scope.customers = theService.customers; 
});

Upvotes: 1

Related Questions