How can you display a user's input in another html file in AngularJS?
<div ng-app>
<div>
<label>Input:</label>
<input type="text" ng-model="uInput" placeholder="Enter text here">
<hr>
</div>
</div>
another file:
<div>
<h1>{{ uInput }}</h1>
</div>
Right now, it takes the input but doesn't display it in the new page.
In other words, how do I pass the user input to the other view?
Simplest way, have the same controller for both the pages,
Page1.html
<div ng-app="app">
<div ng-controller="someController">
<label>Input:</label>
<input type="text" ng-model="uInput" placeholder="Enter text here">
<hr>
</div>
</div>
Page2.html
<div ng-app="app" ng-controller="someController">
<h1>{{ uInput }}</h1>
</div>
And your controller could be,
app.controller('someController', function($scope){
//your controller code, bind variables here
//in this case, just the declaration will do
});
Alternatively, you can use Service injection, routing etc.
I assume that you are familiar with routes and services.
Use services, first load
$scope.first_controller= uInput;
then use services.
myservice.variablename = $scope.first_controller;
then:
$scope.second_controller= myservice.variablename;
and you shoud display in other view like this:
{{ second_controller }}
ng-controller="someController". Declare these onbodyordivor whatever you use on those two pages. So essentially both the pages would be using same controller and shall have same values on scope. Second way, you can have routes setup, there you can mention template url and controllers. Here you shall have template urls as"page1.html"and"page2.html"but the controller declaration can be same as"someController".