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, Jun 27 '15 at 11:34
while using ngcookies , see here : http://stackoverflow.com/questions/30964795/ng-model-with-cookie/30964872#30964872 — Sajal, Jun 27 '15 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, Jun 27 '15 at 12:56

Romf7890 · Accepted Answer · 2015-06-28T15:54:59.860

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

You can also store that kind of important value into the $rootScope. — Deblaton Jean-Philippe, Jun 27 '15 at 12:55
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, Jun 28 '15 at 14:23
Marius, thanks so much dude! The Plnkr has made it nice and clear — Mobeale, Jun 28 '15 at 15:58

Angular two way data binding greeting

1 Answers1