Logout approach for angularjs? - angularjs

I have started learning angularjs for two days, there a lot of new concepts that are new to me, i'm building a test project to my final project testing all the new different things so far,
I'm stuck in the logout, i have implement the ng-if directive in the login controller and it works great i have test it the success method of login request, but i want to move my logout html to the navbar which is in the index.html, so i'm not sure where to put my logic to test against the cookie ?
that's my index.html
<div ng-controller="HomeController">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Register</li>
<li>Login</li>
<li>Articles</li>
<li ng-if ="isAuth" ng-click="LogOut()">LogOut</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div data-ng-view=""></div>
HomeController
app.controller('HomeController', function ($scope, Auth) {
$scope.isAuth = Auth.IsAuth;
});
Auth service
app.service('Auth', function ($cookieStore) {
var auth = function myfunction() {
if ($cookieStore.get('token')) {
return true;
}else{
return false;
}
}
return{
isAuth : auth()
}
});

Related

Angular Routing and Bootstrap Navbar

I have problems getting the bootstrap navbar + angular routing to work. I don't understand what is going on since a very similar code on another app is working.
I have the following html in my index.html
<div ng-controller="CoreController as core">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">myApplication</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-class="core.navHome">Home <span class="sr-only">(current)</span></li>
<li ng-class="core.navStatistic">Statistic</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
my app.js:
$routeProvider.when('/', { templateUrl: 'templates/home.html', controller: 'MainController', controllerAs: 'main' });
$routeProvider.when('/statistic', { templateUrl: 'templates/statistic.html', controller: 'StatisticController', controllerAs: 'statistic' });
// Default route
$routeProvider.otherwise({ redirectTo: '/' });
When I hit the statistic link, my URL shows:
http://localhost/myApplication/#!/#statistic
and I get see the home template.
The home button then shows "http://localhost/myApplication/#!/"
Is the #! the reason for this?
Ok after some research I found out that I this code worked for angular < 1.6.
To make the above code work in 1.6 you have to get ridd of the #! by adding this to the config:
$locationProvider.hashPrefix('');
Here is the original Post.

How to separate menu into different view in AngularJS ui-router application?

I have this:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ui-sref="main">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="main.tm">Task manager</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ui-sref-active="active"><a ui-sref="main.settings">Settings</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron" ui-view>
<div class="main-viewer" ></div>
</div>
</div> <!-- /container -->
Here is how states conf:
$stateProvider.state({
name: 'main',
url: '/',
template: mainTemplate
});
$stateProvider.state({
name: 'main.tm',
url: '/tm',
controller: 'tm.list',
template: view
});
$stateProvider.state({
name: 'main.settings',
url: '/settings',
controller: 'settings.ctrl',
template: view
});
$urlRouterProvider.otherwise('/tm');
Summary:
Now I have header (menu) and content block. Dependent on what button user press in menu settings or tm module appears in content block. Both settings and tm module is in separated directories (different modules).
The problem:
Menu html and container for settings and tm block (<div ui-view></div>) are in one HTML file. I want to separate menu into different module (like settings and tm are in separated modules).
What I want:
main module will be like (view pseudocode):
<container for menu>
<container for content>
Menu will be in directory menu and there will be files menu.html and menu.ctrl.js. It will be "injected" to container "container for menu". tm and settings already in correct directories and have their own views and controllers.
Whole code is here.
PS. One of the expected results was:
<menu-component></menu-component>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron" ui-view>
<div class="main-viewer">
Welcome page
</div>
</div>
</div> <!-- /container -->
Now menu logic is in the separated controller and view is in the separated html.

How to modify HTML content based on angular controller

I am trying to build a login page and a functionality page using angularjs SPA.
I have following controller:
- LoginController
- PredictionController
And following single page:
- Home.html : Binded to LoginController
- trend.html : Binded to PredictionController
- index.html : Has no controller
I have navigation panel in index.html and I want to modify(add or remove) number of tabs based on login. I don't want to write navigation panel logic in each page as it is reusable. I am unable to figure out way to do this using additional controller because I am using ng-route which I guess won't allow me to use multiple controller for same page.
Here is my html code snippet for index.html:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">MyProject</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Trend</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div ng-app="chartApp">
<div ng-view></div>
</div>
</body>
Here is the code for controller:
var app = angular.module('chartApp', ['ngRoute']);
app.factory('UserVerified', function() {
return
{bool: false};
});
app.config(function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'pages/home.html',
controller: 'LoginController'
})
.when('/Trend', {
templateUrl: 'pages/trend.html',
controller: 'PredictionController'
})
});
app.controller('LoginController', ['$scope', '$http', 'UserVerified', function($scope, $http, UserVerified){
$scope.hasPermission = UserVerified.bool;
$scope.getAuthentication = function(){
console.log($scope.userId, $scope.pwd)
$http.get('/getAuth', {
params: { user_id: $scope.userId, pwd: $scope.pwd }
}).success(function (response){
console.log(response);
UserVerified.bool = response;
$scope.hasPermission = UserVerified.bool;
});
}
}]);
I'm not sure if the information is enough please edit or let me know if i'm missing some information.
I believe you're going to have to move your ng-app directive up to the body, and create a NavigationController which can require your UserVerified factory and help maintain the state of the navigation.
You could add the ng-controller directive to your navbar explicitly, and your router should work the same.
The HTML might look something like this.
<body ng-app="chartApp">
<nav ng-controller="NavigationController" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Only display if $scope.loggedIn -->
<a ng-show="loggedIn" class="navbar-brand" href="#/">MyProject</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Trend</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div ng-view></div>
</body>
NavigationController
app.controller('NavigationController', function($scope, UserVerified) {
$scope.$watch(function() {
return UserVerified.bool;
}, function(state, oldState) {
$scope.loggedIn = state;
});
});

Angular switching CSS class based on route?

I have the below HTML file:
<header ng-include="'app/partials/includes/header.html'"></header>
<div class="container" ng-controller="LoginCtrl">
</div>
The above is for the login page, the below is for the register:
<header ng-include="'app/partials/includes/header.html'"></header>
<div class="container" ng-controller="RegisterCtrl">
</div>
This is the header:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Curve
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Sign Up</li>
<li>Sign In</li>
</ul>
</div>
</div>
</div>
How can apply the .active class to the list element dependent upon the route?
If the route is /register, I want the active class applied, and same for login.
How can this be done in Angular?
Use ng-class on any element to conditionally apply to an element. Using the object notation the key is the class name, and the value is an expression when evaluates to true the class is added to that element's class attribute.
<div class="header" ng-controller="HeaderController">
<div ng-class="{ active: registrationOrLogin }">
</div>
And in a controller:
app.controller("HeaderController", [ "$scope", "$location", function($scope, $location) {
$scope.registrationOrLogin = $location.hash() == "/login" || $location.hash() == "/registration";
} ] );

Angular UI, Bootstrap Navbar Collapse and Javascript

I have trouble with UI-Router in many ways. I don't understand how it interacts with other frameworks.
Namely, I am trying to implement Bootstrap 3's navbar collapse module, seen below:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name test</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
This is straight from the Bootstrap website and it works fine when inside its own .html page.
The issue is when I insert it into a UI-Router view. The collapsing action no longer works -- I'm guessing because the "data-target" function is somehow unable to find its target.
How does one use Bootstrap 3 with Angular UI? The Angular UI Bootstrap package does not have a navbar module.
The answer below is good. Here is a reference URL Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning.
You should replace bootstrap native js properties with ui-bootstrap directives (note the ng-click and collapse):
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="navbarCollapsed = !navbarCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<!-- your branding here -->
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" collapse="navbarCollapsed">
<!-- your normal collapsable content here -->
</div>
</nav>
Set the initial value in your controller:
$scope.navbarCollapsed = true;
Edit:
New versions of ui-bootstrap prefix all compontents. Adjust your code accordingly eg. collapse -> uib-collapse.
My particular issue revolved around scope. I'm using ng-repeat to loop through my menu items so navbarCollapsed wasn't accessable in the ng-repeat child scope.
The resolution was to access the parent scope's variables. Simple as:
ng-click="$parent.navbarCollapsed = !$parent.navbarCollapsed"
Hope this helps anybody having the same issue.

Resources