<!DOCTYPE html>
<html>
<head>
<title>AngularJS Global Variables: Constant & Values with example</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="app.js"></script>
<style>
h2{
background:#000;
color: #fff;
padding: 20px; 5px;
}
</style>
</head>
<body>
<!-- Main Content -->
<div class="container" ng-app="demoLearningTurn">
<div class="content" ng-controller="mainCtrl">
<h1>AngularJS Global Variables: Constant & Values with example</h1>
<h2>Constants Examples</h2>
<p>Applicaiton Name: {{app_name}}</p>
<h3>Application API</h3>
<ul>
<li>Application Name: {{app_api.app_name}}</li>
<li>Application Version: {{app_api.version}}</li>
<li>Application API URL: {{app_api.api_url}}</li>
</ul>
<h2>Values Examples</h2>
<p>Users online: {{user_online}}</p>
<h3>User Profile</h3>
<ul>
<li>First Name: {{profile.first_name}}</li>
<li>Last Name: {{profile.last_name}}</li>
<li>Email: {{profile.email}}</li>
</ul>
</div>
<p><center>Tutorial: <a href="http://learningturn.com/angular-js/angularjs-global-variables-constants-values-example/" >AngularJS Global Variables: Constants & Values With Example</a></center></p>
</div>
</body>
</html>
// Create AngularJS application
var app = angular.module('demoLearningTurn',[]);
// Constants
app.constant('APP_NAME', 'Leaning Turn Demo App');
app.constant('APP_API', {
'app_name': 'Leaning Turn Demo App',
'version' : '1.0',
'api_url' : 'www.learningturn.com?api'
});
// Values
app.value('user_online', '0');
app.value('profile',{
'first_name': '',
'last_name' : '',
'email' : ''
});
// Create Controller with name mainCtrl
app.controller('mainCtrl', function($scope, APP_NAME, APP_API, user_online, profile){
$scope.app_name = APP_NAME;
$scope.app_api = APP_API;
user_online = 100;
$scope.user_online = user_online;
profile.first_name = 'Shahzad';
profile.last_name = 'Farukh';
profile.email = 'shahzadfarukh100@gmail.com';
$scope.profile = profile;
});