Currently, I am utilizing yeoman angularjs-fullstack for project generation. Now, my task is to customize it according to my preferences. I have limited experience with AngularJS and TypeScript, so any feedback would be greatly appreciated, not just the solution to why it isn't functioning. :)
Main.html:
<div ng-if=main.isLoggedIn()>
<div ng-if="main.timeOutGreeting()">
<div ng-show="main.showGreeting">
<header class="hero-unit" id="banner">
<div class="container">
<h1>Hi!</h1>
<p class="lead">Welcome back, mr b>{{main.currentUser().name}}</b></p>
</div>
</header>
</div>
</div>
</div>
and mainController.ts:
'use strict';
(function() {
class MainController {
showGreeting = true;
constructor(Auth, $state, $timeout) {
this.user = {};
this.isLoggedIn = Auth.isLoggedIn;
this.isAdmin = Auth.isAdmin;
this.currentUser = Auth.getCurrentUser;
this.$state = $state;
this.$timeout = $timeout;
}
goToLogin() {
this.$state.go('login');
}
timeOutGreeting() {
this.$timeout(function() {
this.showGreeting = false;
}, 3000);
}
}
angular.module('noteApp')
.controller('MainController', MainController);
})();
The objective is to display "Hi! Welcome back, mr User" for a brief period (3 seconds) before disappearing. Any assistance in achieving this would be highly appreciated! :)