I have developed a basic AngularJS application with two template pages: login.html and content.html. The pages are loaded dynamically into the index.html using ng-view and routing functionalities.
Everything is running smoothly.
Take a look at my index.html below:
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<title>Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Test Page</h1>
<div ng-view></div>
</body>
</html>
Here's the layout for login.html:
<div>
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<button ng-click="doLogin()">Submit</button>
</div>
And this is the structure of the content.html:
<div>
<button ng-click="alertPassword()">Click Me!</button>
</div>
The app.js script contains:
var app = angular.module('testApp', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(false);
$routeProvider
.when('/', {
redirectTo: '/login'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'loginController'
})
.when('/content', {
templateUrl: 'content.html',
controller: 'contentController'
})
.otherwise({
redirectTo: '/'
})
})
.controller('loginController', function($scope, $rootScope, $location){
$scope.doLogin = function (password) {
$rootScope.password = password;
$location.path('/content');
}
})
.controller('contentController', function($scope, $rootScope){
var password = $rootScope.password;
$scope.alertPassword = function () {
alert(password);
}
})
All parts of the application are functioning correctly, except for the fact that the value of $rootScope.password on the content page shows as undefined.
When I click the button labeled Click Me!, I anticipate retrieving the password entered on the login page, but instead receive 'undefined'.
Note: Despite searching extensively on Stack Overflow, no solution has been found for this specific issue.