Ionic Global Constant and Variable Codes Example

.

Ionic Global Constant and Variable

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/ 

.