Search code examples
javascriptangularjsangularjs-directivejavascript-databinding

Angular two way data binding greeting

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

Solution

  • 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