Wednesday, August 31, 2016

Angular ngStorage


1)  EDIT INDEX.HTML


<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.27/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
        <script>
            var example = angular.module("example", ["ngStorage"]);
            example.controller("ExampleController", function($scope, $localStorage) {
 
                $scope.save = function() {
                    $localStorage.message = "Hello World";
                }
 
                $scope.load = function() {
                    $scope.data = $localStorage.message;
                }
 
            });
        </script>
    </head>
    <body ng-app="example">
        <div ng-controller="ExampleController">
            <button ng-click="save()">Save</button>
            <button ng-click="load()">Load</button>
            <br>
            {{data}}
        </div>
    </body>
</html>

2) Run



By at No comments:

Ionic LocalStorage and SessionStorage


.
Ionic Local Storage and Session Storage
1) HTML5 introduced several methods of storing data within the clients browser. Two of these methods are local and session storage.
2) localStorage saves data until it is removed by the client or app.
3) sessionStorage saves data until the session ends, when the browser window/tab is closed.
4) We will be using a template source code for this tutorial. Download IonicSideMenu.zip . Unzip the folder and rename it as “IonicSideMenuStorageTest”.

1) Adding LocalStorage and SessionStorage Variable/Object in Ionic Services

Filename: js/services.js
angular.module('app.services', [])
.factory('$localstorage', ['$window', function($window) {
  return {
    set: function(key, value) {
      $window.localStorage[key] = value;
    },
    get: function(key, defaultValue) {
      return $window.localStorage[key] || defaultValue;
    },
    setObject: function(key, value) {
      $window.localStorage[key] = JSON.stringify(value);
    },
    getObject: function(key) {
      return JSON.parse($window.localStorage[key] || '{}');
    }
  }
}])
.factory('$sessionstorage', ['$window', function($window) {
  return {
    set: function(key, value) {
      $window.sessionStorage[key] = value;
    },
    get: function(key, defaultValue) {
      return $window.sessionStorage[key] || defaultValue;
    },
    setObject: function(key, value) {
      $window.sessionStorage[key] = JSON.stringify(value);
    },
    getObject: function(key) {
      return JSON.parse($window.sessionStorage[key] || '{}');
    }
  }
}])
.factory('BlankFactory', [function(){
}])
.service('BlankService', [function(){
}]);

2) Inject LocalStorage and SessionStorage into Ionic Controllers

angular.module('app.controllers', [])

.controller('homeCtrl', ['$scope', '$stateParams', '$localstorage',// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams,$localstorage) {
        $localstorage.set('a',1);
        $scope.a=$localstorage.get('a');
}])
   
.controller('cartCtrl', ['$scope', '$stateParams', '$sessionstorage',// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams,$sessionstorage) {
        $sessionstorage.set('b',2);
        $scope.b=$sessionstorage.get('b');
}])
   
.controller('cloudCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
   

3) Insert the Ionic Variables Into HTML

Filename: templates/home.html
<ion-view title="Home" id="page1">
    <ion-content padding="true" class="has-header">
            <p>{{a}}</p>
    </ion-content>
</ion-view>
Filename: templates/cart.html
<ion-view title="Cart" id="page2">
    <ion-content padding="true" class="has-header">
             <p>{{b}}</p>
    </ion-content>
</ion-view>

4) Run

.
By at No comments:

Ionic Global Constant and Variable Codes Example


.
Ionic Global Constant and Variable
1) Constants are values that do not change throughout the program runtime. On the other hand, Variables are values that may change throughout the program runtime.
2) In Ionic Framework, constants use the keyword “constant” whereas variables use the keyword “values”.
3) Both constants and values accept primitive data and object data. However, when a constant stores an object data, the object properties are allowed to change during runtime hence this may override the constant concept.
4) We will be using a template source code for this tutorial. Download IonicSideMenu.zip. Unzip the folder and rename it as “IonicSideMenuVarTest”.

1) ADDING A CONSTANT

1.1) Edit js/services.js


angular.module('app.services', [])
.constant ('appName','my App')
.factory('BlankFactory', [function(){
}])
.service('BlankService', [function(){
}]);

1.2) Edit js/controllers.js


angular.module('app.controllers', [])

.controller('homeCtrl', ['$scope', '$stateParams', 'appName',// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams,appName) {
//console.log(appName);
$scope.appName=appName;
}])
   
.controller('cartCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
   
.controller('cloudCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
   

1.3) Edit templates/home.html


<ion-view title="Home" id="page1">
    <ion-content padding="true" class="has-header">
    <p>Hello {{appName}}</p>
    </ion-content>
</ion-view>

1.4) Run

2) ADDING MULTIPLE VALUES INTO A CONSTANT

2.1)  Edit js/services.js


angular.module('app.services', [])
.constant('config', {
    appName: "My App",
    appVersion: "2.0",
    apiUrl: "http://www.google.com?api"
})
.factory('BlankFactory', [function(){
}])
.service('BlankService', [function(){
}]);

2.2) Edit js/controllers.js


angular.module('app.controllers', [])

.controller('homeCtrl', ['$scope', '$stateParams', 'config',// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams,config) {
//console.log(appName);
$scope.configdata=config.appName+" "+config.appVersion;
}])
   
.controller('cartCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
   
.controller('cloudCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
   

2.3) Edit templates/home.html


<ion-view title="Home" id="page1">
    <ion-content padding="true" class="has-header">
    <p>Hello {{configdata}}</p>
    </ion-content>
</ion-view>

2.4) Run

3) ADDING A VARIABLE

3.1)  Edit js/services.js


angular.module('app.services', [])
.value('usersOnline',0 )
.factory('BlankFactory', [function(){
}])
.service('BlankService', [function(){
}]);

3.2) Edit js/controllers.js


angular.module('app.controllers', [])

.controller('homeCtrl', ['$scope', '$stateParams', 'usersOnline',// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams,usersOnline) {
//console.log(appName);
        $scope.usersOnline=usersOnline;        
        usersOnline=15;
        $scope.usersOnline=usersOnline;        
}])
   
.controller('cartCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
   
.controller('cloudCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
   

3.3) Edit templates/home.html


<ion-view title="Home" id="page1">
    <ion-content padding="true" class="has-header">
    <p>Hello {{usersOnline}}</p>
    </ion-content>
</ion-view>

3.4) Run

4) ADDING MULTIPLE VALUES INTO A VARIABLE

4.1)  Edit js/services.js


angular.module('app.services', [])
.value('user', {
    firstName: '',
    lastName: '',
    email: ''
})
.factory('BlankFactory', [function(){
}])
.service('BlankService', [function(){
}]);

4.2) Edit js/controllers.js


angular.module('app.controllers', [])

.controller('homeCtrl', ['$scope', '$stateParams', 'user',// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams,user) {
//console.log(appName);
        user.firstName = 'Dwayne';
        user.lastName = 'Charrington';
        user.email = 'dwayne@ilikekillnerds.com';
        $scope.user=user;        
}])
   
.controller('cartCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
   
.controller('cloudCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
   

4.3) Edit templates/home.html


<ion-view title="Home" id="page1">
    <ion-content padding="true" class="has-header">
       <p>{{user.firstName}}</p>
       <p>{{user.lastName}}</p>
       <p>{{user.email}}</p>    
    </ion-content>
</ion-view>

4.4) Run

REFERENCE:
http://ilikekillnerds.com/2014/11/constants-values-global-variables-in-angularjs-the-right-way/ 
.
By at No comments:
Subscribe to: Posts (Atom)