Angular two way data binding greeting

Question

Apologies for what is probably a very basic question. I'm making a little demo quiz project with angular. On the first page I have a basic two-way data binding greeting (i.e you enter your name in a box and it welcomes the user e.g <p> Welcome {{name}} </p>

How can I save the name entered and carry this welcome over to the next page/template? Here is the code

<strong>Welcome</strong> {{email}}

  <p class="lead">Please enter your name </p>
      <body ng-app ng-init="email = 'John';">
      <label>enter name<input type="text" ng-model="firstName"/></label><br />
  </body>

And here is my routing

'use strict';


angular
  .module('angularQuizApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      [...]

I started with a yeoman angular scaffold so have changed very little code. Thank you in advance kind angular wizards

We have no idea how you handle routing... We can't help you with so few information. — Deblaton Jean-Philippe
– Deblaton Jean-Philippe, Commented Jun 27, 2015 at 11:34
while using ngcookies , see here : stackoverflow.com/questions/30964795/ng-model-with-cookie/… — Sajal
– Sajal, Commented Jun 27, 2015 at 12:03
@Mobeale, I asked it because some developpers handle routing inside the server. In that case, using a service would not have worked (but cookies well) — Deblaton Jean-Philippe
– Deblaton Jean-Philippe, Commented Jun 27, 2015 at 12:56

Romf7890 · Accepted Answer · 2015-06-28 15:54:59Z

2

To achieve what you wish easily, you could create a service that keep the user name:

angular.module('angularQuizApp').
 factory('StorageService',[
function(){

    var name = "";

    var _setName  = function(name){
        name = name;
    }:

    var _getName = function(){
        return name;
    };  

    return {
        setName : _setName,
        getName : _getName,
    }



}]);

Then in your controllers, call the right methods from service :

angular.module('angularQuizApp').
controller('MyController', ['$scope', 'StorageService',
   function($scope, StorageService) {
     $scope.name = StorageService.getName(); // or setName(name_value)
}]);

By this way, this service keeps the user's name through your angular app. Within this service, you could save whatever you want. But this object/name will be destroyed if your quit the app.

If you want to keep objects persistantly, take a look at angular-storage : https://github.com/grevory/angular-local-storage

EDIT

Here is a functional app that I made : http://plnkr.co/edit/7ZzBYnKmV1xflzi81YQc?p=preview

edited Jun 28, 2015 at 15:54

answered Jun 27, 2015 at 12:16

Romf7890

3613 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Deblaton Jean-Philippe Over a year ago

You can also store that kind of important value into the $rootScope.

Mobeale Over a year ago

Unfortunately couldn't get this to work, Dude :( The two way binding worked fine, but it didn't save the value over to the next page

Mobeale Over a year ago

Marius, thanks so much dude! The Plnkr has made it nice and clear

Collectives™ on Stack Overflow

Angular two way data binding greeting

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related