We Keep Coding

AngularJS: POST method with basic auth ( username and password) and content type in headers

I am trying to make a POST request in AngularJS to a URL which has a basic authorization with username and password and i am getting a error 403 forbidden status code.
My question is where do the username and password go in the $http request ??
And how are written in ?? I mean regular "username:password" or Base64 encoded username and password.
My Controller Code is Below:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider,$httpProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html'
})
.when('/login', {
templateUrl: 'partials/login.html'
})
.when('/register', {
templateUrl: 'partials/register.html'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('globalController', function($scope, $http){
$scope.formemail={};
$scope.user=username;
$scope.password=password;
$scope.validateemail = function(){
$http({
method: 'POST',
url: 'https://supportURL/'+$scope.formemail.validation+'/',
data: {user:$scope.user, password:$scope.password}
})
.then(function successCallback(response) {
$scope.validateddata = response.data;
});
}});
My view code is below:
<div class="centerclass">
<form ng-submit="validateemail()">
E-mail:
<input type="E-mail" ng-model="formemail.validation" placeholder="enter email id"><br><br>
<button type="submit" class="btn btn-primary">Validate</button>
</form><br><br>
</div>
<div class="centerclass">
<h1>RESULT:</h1><br>
<h2>{{validateddata}}</h2>
</div>

ui-sref not respond anything

I'm using the ui-sref for making a link, but it's not respond anything
Here's the code for the ui-sref
<a class="col col-40" ng-repeat="table in tables" style="background:{{table.warna}}" ui-sref="app.go({tableID:table.fstRoomNo})">{{table.fstRoomName}}<br/>{{table.fsiStatus}}</a>
and here the app.js config section
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "views/auth/login.html",
controller: 'LoginCtrl'
})
.state('app', {
url: "/app",
abstract: true,
templateUrl: "views/app/side-menu.html",
controller: 'AppCtrl'
})
.state('app.home', {
url: "/home",
templateUrl: "views/app/home.html",
controller: 'HomeCtrl'
})
.state('app.go', {
url: "/go/:tableID",
views: {
'menuContent': {
controller: 'GoCtrl'
}
},
resolve: {
detail_data: function(TabelService, $ionicLoading, $stateParams) {
$ionicLoading.show({
template: 'Loading table status ...'
});
//alert($stateParams.tableID);
var tableID = $stateParams.tableID;
return TabelService.getDetailTable(tableID);
}
}
});
$urlRouterProvider.otherwise('/login');
})

Posting an answer after the comment above solved the issue.
Regarding the issue with the routing, it is probably because of the spelling error below.
resolve: {
detail_data: function(TabelService, $ionicLoading, $stateParams) {
$ionicLoading.show({
template: 'Loading table status ...'
});
//alert($stateParams.tableID);
var tableID = $stateParams.tableID;
return TabelService.getDetailTable(tableID);
}
}
Where TabelService should be spelled as TableService

How to do login page first in angularjs

I new with angularjs and I'm trying use this generator-angular-fullstack,
I want the page login first and not the main, I play with the code and my solution is to add 'authenticate: true' in MainCtrl
angular.module('myapp')
.config(function ($stateProvider) {
$stateProvider
.state('main', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl',
authenticate: true
});
});
and comment the line 'event.preventDefault();' in app.js in the run function
.run(function ($rootScope, $location, Auth) {
// Redirect to login if route requires auth and you're not logged in
$rootScope.$on('$stateChangeStart', function (event, next) {
Auth.isLoggedInAsync(function(loggedIn) {
if (next.authenticate && !loggedIn) {
//event.preventDefault();
$location.path('/login');
}
});
});
But I'm not sure is this changes are good or there are other best solutions.

to do this, your code will be like this
in main.js
angular.module('myapp')
.config(function ($stateProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
});
});
in account.js
angular.module('myapp')
.config(function ($stateProvider) {
$stateProvider
.state('login', {
url: '/',
templateUrl: 'app/account/login/login.html',
controller: 'LoginCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'app/account/signup/signup.html',
controller: 'SignupCtrl'
})
.state('settings', {
url: '/settings',
templateUrl: 'app/account/settings/settings.html',
controller: 'SettingsCtrl',
authenticate: true
});
});
in login.controller.js
angular.module('myapp')
.controller('LoginCtrl', function ($scope, Auth, $location, $window) {
$scope.user = {};
$scope.errors = {};
$scope.login = function(form) {
$scope.submitted = true;
if(form.$valid) {
Auth.login({
email: $scope.user.email,
password: $scope.user.password
})
.then( function() {
// Logged in, redirect to home
$location.path('/main');
})
.catch( function(err) {
$scope.errors.other = err.message;
});
}
};
$scope.loginOauth = function(provider) {
$window.location.href = '/auth/' + provider;
};
});

Can not redirect to proper path using angular.js ui-router

i have one issue regarding redirecting path in angular.js.I am explaining my code below.
profileController.js:
if($('#addProfileData')[0].defaultValue=='Update'){
var updatedata={'colg_name':$scope.colgname,'address':$scope.address,'cont_no':$scope.contno,'profile_id':id};
console.log('userupdate',userdata);
$http({
method: 'POST',
url: "php/profile/updateProfileData.php",
data: updatedata,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
alert(response.data);
$location.path('.profile');
},function errorCallback(response) {
alert(response.data);
});
}
}
here i am setting path to profile page inside success callback function.But it is redirecting to the root page after update the data.
loginRoute.js:
var Admin=angular.module('Channabasavashwara',['ui.router']);
Admin.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('/', {
url: '/',
templateUrl: 'dashboardview/login.html',
controller: 'loginController'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboardview/dashboard.html',
controller: 'dashboardController'
})
.state('dashboard.profile', {
url: '/profile?p_i',
templateUrl: 'dashboardview/profile.html',
controller: 'profileController'
})
.state('dashboard.dept', {
url: '/dept?d_i',
templateUrl: 'dashboardview/dept.html',
controller: 'deptController'
})
.state('dashboard.princpal', {
url: '/princpal?pr_i',
templateUrl: 'dashboardview/princpal.html',
controller: 'princpalController'
})
.state('dashboard.dept_head', {
url: '/dept_head?dh_i',
templateUrl: 'dashboardview/depthead.html',
controller: 'deptheadController'
})
})
Here after update data successfully it is redirecting to login.html page.I need after updating the data the page should redirect to profile.html page.Please help me.

Try replacing the line of code with $location.path('dashboard.profile');
That would do the need for you

You can use $state instead of $location as follows:
$state.go('dashboard.profile')
Also, don't forget to inject the $state service in your controller.
If you want to use $location.path you need to use the url instead of state.

Angularjs getting clean url returns url undefined error

I am trying to get clean urls using $locationProvider.html5Mode(true) gives
TypeError: Cannot read property 'replace' of undefined.
The application uses $stateProvider for routing.
I also have the base url defined in <head>
<base href="/">
From anglularjs lib:
function trimEmptyHash(url) {
return url.replace(/(#.+)|#$/, '$1');
}
url passed to this function is empty. Anyone knows a workaround.
This is my app config:
wgApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!')
// Now set up the states
$stateProvider
.state('main', {
url: "/main",
cache: false,
templateUrl: "/web-master/main.html"
})
.state('login', {
url: "/login",
templateUrl: "/web-master/main.html"
})
$urlRouterProvider.otherwise("/login");
})