We Keep Coding

AngularJS Force Back Button Route

My back button is sending me to the first page/state of my app (cadastreSe). How can I force it to go back to previous page/state ('menu.temporada2016') with my button id="temporada2016-button3" active. Is it possible with angularjs?
I hat to enable it with $scope.$on('$ionicView.beforeEnter'...
states:
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('menu.temporada2016', {
cache: false,
url: '/page1',
views: {
'side-menu21': {
templateUrl: 'templates/temporada2016.html',
controller: 'temporada2016Ctrl',
params: { dataToTemp: false }
}
}
})
.state('menu.fotos', {
url: '/page2',
views: {
'side-menu21': {
templateUrl: 'templates/fotos.html',
controller: 'fotosCtrl'
}
}
})
.state('menu.configuraEs', {
url: '/page3',
views: {
'side-menu21': {
templateUrl: 'templates/configuraEs.html',
controller: 'configuraEsCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu.html',
abstract:true
})
.state('detalhes', {
cache: false,
url: '/page4',
params: {
dataToDetails: false
},
templateUrl: 'templates/detalhes.html',
controller: 'detalhesCtrl'
})
.state('cadastreSe', {
url: '/page5',
templateUrl: 'templates/cadastreSe.html',
controller: 'cadastreSeCtrl'
})
.state('home', {
url: '/page6',
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
})
.state('suporte', {
url: '/page7',
templateUrl: 'templates/suporte.html',
controller: 'suporteCtrl'
})
.state('fotos2', {
url: '/page8',
templateUrl: 'templates/fotos2.html',
controller: 'fotos2Ctrl',
params: {
dataToFotos: false
}
})
$urlRouterProvider.otherwise('/page5')
});
controller:
.controller('fotos2Ctrl', ['$scope', '$state', '$ionicModal', '$ionicSlideBoxDelegate', '$ionicScrollDelegate', function ($scope, $state, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate) {
$scope.$on('$ionicView.beforeEnter', function(event, viewData){
viewData.enableBack = true;
});
$scope.$on('$routeChangeSuccess', function(event, current, previous){
});
if(!$state.params.dataToFotos) {
console.log($state.params.dataToFotos);
}else{
console.log($state.params.dataToFotos);
$scope.images = $state.params.dataToFotos.album;
}
$scope.zoomMin = 1;
// image gallery
$scope.showImages = function(index) {
$scope.activeSlide = index;
$scope.showModal('templates/popover.html');
}
$scope.showModal = function(templateUrl) {
$ionicModal.fromTemplateUrl(templateUrl, {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
});
}
// Close the modal
$scope.closeModal = function() {
$scope.modal.hide();
$scope.modal.remove()
};
$scope.updateSlideStatus = function(slide) {
var zoomFactor = $ionicScrollDelegate.$getByHandle('scrollHandle' + slide).getScrollPosition().zoom;
if (zoomFactor == $scope.zoomMin) {
$ionicSlideBoxDelegate.enableSlide(true);
} else {
$ionicSlideBoxDelegate.enableSlide(false);
}
};
}])
fotos2.html
<ion-view title="Fotos ..." id="page8" style="background-color:#FFFFFF;">
<ion-content padding="true" class="has-header">
<!--<div class="row responsive-md">
<div class="col col-25" ng-repeat="image in images">
<img ng-src="http://localhost/dashboard/{{image.FILE}}" width="100%" />
</div>
</div>-->
<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
<div class="col col-25" ng-if="$index < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index].FILE}}" width="100%" ng-click="showImages($index)" />
</div>
<div class="col col-25" ng-if="$index + 1 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 1].FILE}}" width="100%" ng-click="showImages($index+1)" />
</div>
<div class="col col-25" ng-if="$index + 2 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 2].FILE}}" width="100%" ng-click="showImages($index+2)" />
</div>
<div class="col col-25" ng-if="$index + 3 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 3].FILE}}" width="100%" ng-click="showImages($index+3)" />
</div>
</div>
</ion-content>
</ion-view>
temporada2016.html
<ion-view title="Temporada 2016" id="page1" style="background-color:#FFFFFF;">
<ion-content padding="true" class="has-header">
<div id="temporada2016-button-bar1" class="button-bar">
<button id="temporada2016-button2" style="color:#008BBB;" class="button button-light button-block button-outline" ng-class="{active_news_btn: active_news_btn}" ng-click="activate_news()">Notícias</button>
<button id="temporada2016-button3" style="color:#008BBB;" class="button button-light button-block button-outline" ng-class="{active_albums_btn: active_albums_btn}" ng-click="activate_albums()">Fotos</button>
</div>
<form id="temporada2016-form8" class="list" ng-show="search_news">
<label class="item item-input" name="search_news">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Pesquisar Notícia" ng-model="searchNews">
</label>
</form>
<div class="item item-body list-container" id="temporada2016-list-item-container4" ng-model="item_id" ng-repeat="x in items | filter:searchNews" item="x" href="#/x/{{x.ID}}" ng-click="open_item(x)" ng-show="news_list">
<div id="temporada2016-markdown7" style="margin-top:0px;color:#666666;">
<h2 style="color:#008BBB;">{{ x.TITLE }}</h2>
</div>
</div>
<!--<ion-list class="widget uib_w_1 d-margins" data-uib="ionic/list" data-ver="0">
<ion-item class="item widget uib_w_2" data-uib="ionic/list_item" data-ver="0" ng-repeat="x in items">{{ x.TITLE }}</ion-item>
</ion-list>-->
<ion-list id="fotos-list4" ng-show="albums_list">
<ion-item class="item-icon-left item-icon-right calm" id="fotos-list-item4" ng-model="album_name" ng-repeat="item in albums" item="item" href="#/item/{{item.FOLDER}}" ng-click="open_album(item)">
<i class="icon ion-images"></i>
{{item.FOLDER}}
<i class="icon ion-ios-arrow-forward"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
index.html
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>

You can overwrite the header of the specific page by adding a new one to the template of the specific view. it should be even outside and above of the tag. simply have it mirror your normal header. then implement a back-button which looks the exact same, but have it trigger an ng-click event which you can then use to route the user to that specific view you want him to go back to, either by using $state.go() or by using the $ionicHistory dependancy to navigate back through the navigation stack.

User Authentication Using AngularJS

I found the article from angularcode
and this link is helpful.
But I have some problem with my webpage structure that doesn't want to have the div tag for containing data-ng-view attribute. How do I get data, but no this div tag?
This is some code from the tutorial:
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: '/login.php',
controller: 'authCtrl'
})
.when('/logout', {
title: 'Logout',
templateUrl: '/login.php',
controller: 'logoutCtrl'
})
.when('/signup', {
title: 'Signup',
templateUrl: 'partials/signup.html',
controller: 'authCtrl'
})
.when('/dashboard', {
title: 'Dashboard',
templateUrl: '/dashboard.php',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: '/login.php',
controller: 'authCtrl',
role: '0'
})
.otherwise({
redirectTo: '/login'
});
}])
.run(function ($rootScope, $location, Data) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$rootScope.authenticated = false;
Data.get('session').then(function (results) {
if (results.uid) {
$rootScope.authenticated = true;
$rootScope.uid = results.uid;
$rootScope.name = results.name;
$rootScope.email = results.email;
} else {
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signup' || nextUrl == '/login') {
} else {
$location.path("/login");
}
}
});
});
});
I want to separate the structure for each page. What's any method to link to other page instead show like templateURL on data-ng-view but the function of user authentication session still work?
UPDATE
This is my code from my project
Note that I have try templateURL both .html and .php are the same result.
index.php
<div ng-app="myApp" data-ng-view="" id="ng-view"></div>
<toaster-container toaster-options="{'time-out': 3000}"></toaster-container>
<!-- authentification script -->
<script src="/pooh/dist/js/angular.min.js"></script>
<script src="/pooh/dist/js/angular-route.min.js"></script>
<script src="/pooh/dist/js/angular-animate.min.js"></script>
<script src="/pooh/dist/js/toaster.js"></script>
<script src="/pooh/app/app.js"></script>
<script src="/pooh/app/data.js"></script>
<script src="/pooh/app/directives.js"></script>
<script src="/pooh/app/authCtrl.js"></script>
app.js
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: '/pooh/login.php',
controller: 'authCtrl'
})
.when('/logout', {
title: 'Logout',
templateUrl: '/pooh/login.php',
controller: 'logoutCtrl'
})
.when('/signup', {
title: 'Signup',
templateUrl: 'partials/signup.html',
controller: 'authCtrl'
})
.when('/dashboard', {
title: 'Dashboard',
templateUrl: '/pooh/dashboard.php',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: '/pooh/login.php',
controller: 'authCtrl',
role: '0'
})
.otherwise({
redirectTo: '/login'
});
}])
.run(function ($rootScope, $location, Data) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$rootScope.authenticated = false;
Data.get('session').then(function (results) {
if (results.uid) {
$rootScope.authenticated = true;
$rootScope.uid = results.uid;
$rootScope.name = results.name;
$rootScope.email = results.email;
} else {
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signup' || nextUrl == '/login') {
} else {
$location.path("/login");
}
}
});
});
});
login.php
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/head.php');?>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<b>Pooh</b>Furniture
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>
<form method="post">
<div class="form-group has-feedback">
<input ng-model="login.email" class="form-control" placeholder="Email">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input ng-model="login.password" type="password" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label>
<input type="checkbox"> Remember Me
</label>
</div>
</div>
<!-- /.col -->
<div class="col-xs-4">
<button ng-click="doLogin(login)" data-ng-disabled="loginForm.$invalid" type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
<a class="hidden" href="#">I forgot my password</a><br>
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<!-- jQuery 2.1.4 -->
<script src="/pooh/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/pooh/bootstrap/js/bootstrap.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="/pooh/plugins/iCheck/icheck.min.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});
</script>
</body>
</html>
dashboard.php
<?php
//check if already logged in move to home page
//if logged in redirect to members page
//if( $user->is_logged_in() ){ header('Location: login.php'); }
?>
<?php $page = 'summary'; ?>
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/header.php');?>
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/sidebar.php');?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Overall information</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Level</li>
<li class="active">Here</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Your Page Content Here -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/footer.php');?>
some of code from header.php
to show that the body tag has class attribute
<body class="hold-transition fixed skin-blue sidebar-mini">

trouble with angularjs ui-sref

I'm using tabset view in one of my pages.I have divided each tab into each html pages..and I'm loading them as templates using ui-sref.
<div class="white-bg animated fadeIn">
<div class="row s-t-xs">
<div class="col-xs-10">
<div class="tabs-container">
<tabset class="tabs-left">
<tab id="tab1" heading="Job Preferences" ui-sref="user.education.jobs">
<div ng-include="'views/user/jobstab.html'"></div>
</tab>
<tab id="tab2" heading="Experience / Project Summary" ui-sref="user.education.experience">
<div ng-include="'views/user/experience.html'"></div>
</tab>
<tab id="tab3" heading="Educations / Certifications / Awards" ui-sref="user.education.certificate">
<div ng-include="'views/user/certificate.html'"></div>
</tab>
</tabset>
</div>
</div>
</div>
It is working. I can load the three templates clicking on the tabs in home page.
but I have a button in each html page which on clicked should activate the state of the next tab...
<div class="form-group">
<div class="col-md-10 col-sm-offset-9">
<button class="btn btn-primary" type="submit" ui-sref="user.education.experience">Save & Next</button>
</div>
</div>
i.e if i click the above button it should activate the 'experience' tab.
I can see that the url in the address bar is changing when i click the button but not the view.
here's my stateprovider
$stateProvider
.state('index', {
abstract: true,
url: "/index",
templateUrl: "views/common/content_user_navigation.html",
})
.state('landing', {
url: "/landing",
templateUrl: "views/landing.html",
data: { pageTitle: 'Awarded Me Home', specialClass: 'landing-page' }
})
.state('login', {
url: "/login",
templateUrl: "views/user/login.html",
data: { pageTitle: 'Login' }
})
.state('user.profile', {
url: "/profile",
templateUrl: "views/user/user_profile.html",
})
.state('user.education', {
url: "/education",
templateUrl: "views/user/education1.html",
})
.state('user.education.jobs', {
url: "/jobs",
templateUrl: "views/user/jobstab.html",
data: { pageTitle: 'Job Preferences' },
})
.state('user.education.experience', {
url: "/experience",
templateUrl: "views/user/experience.html",
data: { pageTitle: 'Experience' },
})
.state('user.education.certificate', {
url: "/certificate",
templateUrl: "views/user/certificate.html",
data: { pageTitle: 'Education' },
})
Any idea about the problem?

Why my router UI in angular.js is not working as expected?

my problem is that the routing is not working as expected, here is my code :
$urlRouterProvider.
otherwise('/list');
$stateProvider.
state('home', {
abstract: true,
views: {
'header': {
templateUrl: 'partials/header.html',
controller: 'HeaderController'
},
'breadcrumb': {
templateUrl: 'partials/breadcrumb.html',
controller: function($scope) {
$scope.breadcrumb = ['Home', 'Library', 'Data'];
}
},
'sidebar': {
templateUrl: 'partials/sidebar.html'
}
}
}).
state('home.list', {
url: '/list',
views: {
'main#': {
templateUrl: 'partials/list.html',
controller: 'ListController'
}
}
}).
state('home.details', {
url: '/details/:id',
views: {
'main#': {
templateUrl: 'partials/details.html',
controller: 'DetailsController'
}
}
});
in my index i have this :
<div class="container">
<div class="row">
<!-- SideBar -->
<div ui-view="sidebar" class="col-xs-3 sidebar"></div>
<!-- /.SideBar -->
<div class="col-xs-8">
<!-- Breadcrumb -->
<div ui-view="breadcrumb" class="pull-right"></div>
<!-- /.Breadcrumb -->
<!-- Main Content -->
<div ui-view="main"></div>
<!-- /.Main Content -->
</div>
</div>
</div>
the problem is that the first time i enter the app (the otherwise works fine) but when trying to click on a hyperlink with details/id i get this error : Error: Could not resolve 'details' from state 'home.list', i'm a little bit confused right now !!!

You need to use home.details in ui-sref instead of just details.
I have an example working in this Plunkr.

<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in persons">
<!-- <td><a ui-sref="details({id: persons.indexOf(person)})">{{person.name}}</a></td> -->
<td><a ui-sref="home.details({id: persons.indexOf(person)})">{{person.name}}</a></td>
<td>{{person.address}}</td>
</tr>
</tbody>
</table>

Angular JS routing issue when using Service

I have a situation, I want to redirect user to next page if login is successful.
Else it should stay on login page.
Here is my code where I have set the routing and routeChangeStart listener.
function () {
"use strict";
angular.module("app", ["ngRoute", "ngAnimate", "ui.bootstrap", "easypiechart", "mgo-angular-wizard", "textAngular", "ui.tree", "ngMap", "app.ui.ctrls", "app.ui.directives", "app.ui.services", "app.controllers", "app.directives", "app.form.validation", "app.ui.form.ctrls", "app.ui.form.directives", "app.tables", "app.map", "app.task", "app.localization", "app.chart.ctrls", "app.chart.directives", "app.tekcapital.authModule"]).config(["$routeProvider", function ($routeProvider) {
return $routeProvider.when("/", {
templateUrl: "web-view/dashboard.html"
}).when("/dashboard", {
templateUrl: "web-view/dashboard.html"
}).when("/pages/features", {
templateUrl: "web-view/pages/features.html"
}).when("/pages/login", {
templateUrl: "web-view/pages/login.html"
}).when("/pages/login_fail", {
templateUrl: "web-view/pages/login_fail.html"
}).when("/pages/create_idn_1", {
templateUrl: "web-view/pages/create_idn_1.html"
}).when("/pages/create_idn_2", {
templateUrl: "web-view/pages/create_idn_2.html"
}).when("/pages/create_idn_3", {
templateUrl: "web-view/pages/create_idn_3.html"
}).when("/pages/create_idn_4", {
templateUrl: "web-view/pages/create_idn_4.html"
}).when("/pages/create_idn_5", {
templateUrl: "web-view/pages/create_idn_5.html"
}).when("/pages/create_idn_6", {
templateUrl: "web-view/pages/create_idn_6.html"
}).when("/pages/create_idn_7", {
templateUrl: "web-view/pages/create_idn_7.html"
}).when("/pages/signin", {
templateUrl: "web-view/pages/signin.html"
}).when("/pages/signup", {
templateUrl: "web-view/pages/signup.html"
}).when("/pages/lock-screen", {
templateUrl: "web-view/pages/lock-screen.html"
}).when("/pages/profile", {
templateUrl: "web-view/pages/profile.html"
}).when("/404", {
templateUrl: "web-view/pages/404.html"
}).when("/pages/500", {
templateUrl: "web-view/pages/500.html"
}).when("/pages/blank", {
templateUrl: "web-view/pages/blank.html"
}).when("/pages/invoice", {
templateUrl: "web-view/pages/invoice.html"
}).when("/pages/services", {
templateUrl: "web-view/pages/services.html"
}).when("/pages/about", {
templateUrl: "web-view/pages/about.html"
}).when("/pages/contact", {
templateUrl: "web-view/pages/contact.html"
}).when("/tasks", {
templateUrl: "web-view/tasks/tasks.html"
}).otherwise({
redirectTo: "/404"
})
}]).run(function($rootScope,$location,UserService){
$rootScope.$on("$routeChangeStart", function(event,next, current){
if(UserService.isLogged == null || !UserService.isLogged){
if(next.templateUrl === "web-view/pages/login.html"){
}else{
$location.path("/pages/login");
}
}
});
});
}.call(this)
Below is my login page
<div class="page page-general" ng-controller="AuthController">
<div class="signin-header">
<div class="container text-center">
<section class="logo">
<span class="logo-icon "><img src="images/assets/logo_RS.png" width="262" height="48" alt="tekcapital" /></span>
</section>
</div>
</div>
<div class="signup-body">
<div class="container">
<div class="form-container">
<section class="row signin-social text-center bg-info" style="padding: 12px 0">
Sign In To Tekcapital IDN
</section>
<span class="line-thru"></span>
<form class="form-horizontal" name="loginForm" novalidate>
<fieldset>
<div class="form-group">
<div class="input-group input-group-lg" style="width:100%;">
<input type="username" class="form-control" placeholder="username" ng-model="loginForm.userName" required>
</div>
</div>
<div class="form-group">
<div class="input-group input-group-lg" style="width:100%;">
<input type="password" class="form-control" placeholder="password" ng-model="loginForm.password" required>
</div>
</div>
<div>{{loginForm.$valid}}</div>
<div class="form-group">
Login
</div>
</div>
</div>
</div>
</div>
And here is my code for service and controller
function () {
"use strict";
angular.module("app.tekcapital.authModule", []).factory("UserService", [function () {
var sdo = {
isLogged: false,
username: ''
};
return sdo;
}]).controller("AuthController", ["$scope", "$http", "UserService", function ($scope, $http, UserService) {
$scope.validUser = "";
$scope.loginForm = {};
$scope.getData = function () {
$http.post("http://localhost:8191/authenticate",{"userName":$scope.loginForm.userName,"password":$scope.loginForm.password})
.success(function(dataFromServer, status, header, config){
console.log("data from server " + dataFromServer);
console.log("User Service " + UserService.isLogged)
if(dataFromServer == "true"){
UserService.isLogged = true;
UserService.username = "Test User Name";
}else{
UserService.isLogged = false;
UserService.username = "";
}
console.log("User Service 2 " + UserService.isLogged)
});
};
}])
}.call(this);
Now the issue is that when I validate for the first time it stays on the login page. And on second successful attempt it redirects to another page.
In case of wrong credentials it is working fine. It stays on login page.
And even when I use $location.path('after/login/page') it moves me to that login page.
But when I open a new tab with "localhost:8191/#/pages/success/ it again takes me to login page.
If I have logged in once then it should not take me to login page.
Need help in this regard.
Regards