I'm making a signup form using satellizer.
But it does not go to the right url
My console displays the following:
POST http://localhost:8000/http://104.236.150.55/auth/register 404 (Not Found)
view2.js:185 Not found
This is my config.js:
.config(['$routeProvider', '$locationProvider', '$authProvider', function($routeProvider, $locationProvider, $authProvider) {
$routeProvider
//for Landing page
.when('/view2', {
templateUrl: 'view2/view2.html',
controller: 'View2Ctrl'
})
.when('/activity', {
templateUrl: 'view2/activity.html',
controller: 'ActivityCtrl'
})
.when('/signup', {
templateUrl: 'view2/signup.html',
controller: 'UserCtrl'
});
$authProvider.signupUrl = "http://example.com/auth/register";
}])
and my controller:
.controller('UserCtrl', ['$scope', '$auth', function($scope, $auth) {
$scope.signup = function() {
var user = {
email: $scope.email,
password: $scope.password
};
$auth.signup(user)
.catch(function(response) {
console.log(response.data);
});
}
}]);
How do i access them with absolute urls?
Set in your config:
$authProvider.baseUrl = null;
Related
In my controller, I have a redirection like this, from the signin page to the index page.
var loginApp = angular.module('angularRestfulAuth', ['ngCookies', 'ngStorage',
'ngRoute',
'angular-loading-bar']);
loginApp
.controller('HomeCtrl', ['$rootScope', '$scope', '$location','$cookies','$window', 'Main', function($rootScope, $scope, $location,$cookies, $window,Main) {
$scope.signin = function() {
var formData = {
username: $scope.username,
password: $scope.password
}
Main.signin(formData, function(res) {
if (res.type == false) {
alert(res.data) ;
} else {
//location.href='/index';
$window.location.assign('/index');
}
}, function() {
$rootScope.error = 'Failed to signin';
})
};
app.js looks like,
angular.module('angularRestfulAuth', [
'ngStorage',
'ngRoute',
'angular-loading-bar'
])
.config(['$routeProvider', '$httpProvider','$cookies','$locationProvider', function ($routeProvider, $httpProvider,$cookies,$locationProvider) {
$routeProvider.
when('/index', {
templateUrl: 'app/partials/index.html',
controller: 'myController'
}).
when('/signin', {
templateUrl: 'app/partials/signin.html',
controller: 'HomeCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
If I use, location.href='/index';
then,
http://localhost:5000/index
Error:Cannot GET /index
If I use, $location.url('/index');
then ,
http://localhost:5000/#/index
But still showing the signin page, instead of index page.
I feel like this is really easy but I'm not sure why I can't figure it out.
For example if we want to restrict access to a page if a user is not logged in we can do something like:
// == LISTEN FOR ROUTE ERRORS
app.run(['$rootScope', '$location', function($rootScope, $location) {
$rootScope.$on('$routeChangeError', function(event, next, previous, error) {
if (error === 'AUTH_REQUIRED') {
$location.path('/login');
}
});
}]);
// == RETURN AUTH SERVICE
app.factory('Authentication', ['$firebaseAuth', function($firebaseAuth) {
return $firebaseAuth();
}]);
// == APP ROUTER
app.config(['$routeProvider', '$location', function($routeProvider, $location) {
$routeProvider
.when('/account', {
controller: 'userController',
templateUrl: 'views/account.html',
resolve: {
"currentAuth": ['Authentication', function(Authentication) {
return Authentication.$requireSignIn(); // if rejected throws $routeChangeError
}]
}
})
}]);
Now what if I want to add a resolve to the '/login' route so that if the user is logged in I can just force them to the account page or a success page?
.when('/login', {
controller: 'userController',
templateUrl: 'views/login.html',
resolve: {
"currentAuth": [function() {
// reject if the user is already logged in
}]
}
});
.when('/login', {
controller: 'userController',
templateUrl: 'views/login.html',
resolve: {
"currentAuth": ['$q', function($q) {
var p = $q.defer();
if (Authentication.$getAuth()) {
p.reject({code: someErrorCode, message: 'Already logged in'});
} else {
p.resolve();
}
return p.promise;
}]
}
});
You should also handle the scenario when logged in, in $routeChangeError or $stateChangeError
Right now i am making an AngularJS+UI router install application. But i have a problem, the problem is, that i want to disable access to the views, associated with the install application. I want to do it in resolve in the state config.
But the problem is i need to get the data from a RESTful API, whether the application is installed or not. I tried making the function, but it loaded the state before the $http.get request was finished.
Here was my code for the resolve function:
(function() {
var app = angular.module('states', []);
app.run(['$rootScope', '$http', function($rootScope, $http) {
$rootScope.$on('$stateChangeStart', function() {
$http.get('/api/v1/getSetupStatus').success(function(res) {
$rootScope.setupdb = res.db_setup;
$rootScope.setupuser = res.user_setup;
});
});
}]);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/404");
$stateProvider.state('db-install', {
url: "/install/db",
templateUrl: 'admin/js/partials/db-install.html',
controller: 'DBController',
resolve: {
data: function($q, $state, $timeout, $rootScope) {
var setupStatus = $rootScope.setupdb;
var deferred = $q.defer();
$timeout(function() {
if (setupStatus === true) {
$state.go('setup-done');
deferred.reject();
} else {
deferred.resolve();
}
});
return deferred.promise;
}
}
})
.state('user-registration', {
url: "/install/user-registration",
templateUrl: "admin/js/partials/user-registration.html",
controller: "RegisterController"
})
.state('setup-done', {
url: "/install/setup-done",
templateUrl: "admin/js/partials/setup-done.html"
})
.state('404', {
url: "/404",
templateUrl: "admin/js/partials/404.html"
});
}]);
})();
EDIT:
Here is what my ajax call returns:
Try this way:
$stateProvider.state('db-install', {
url: "/install/db",
templateUrl: 'admin/js/partials/db-install.html',
controller: 'DBController',
resolve: {
setupStatus: function($q, $state, $http) {
return $http.get('/api/v1/getSetupStatus').then(function(res) {
if (res.db_setup === true) {
$state.go('setup-done');
return $q.reject();
}
return res;
});
}
}
})
Then inject setupStatus in controller:
.state('setup-done', {
url: "/install/setup-done",
templateUrl: "admin/js/partials/setup-done.html",
controller: ['$scope', 'setupStatus', function ($scope, setupStatus) {
$scope.setupdb = setupStatus.db_setup;
$scope.setupuser = setupStatus.user_setup;
}]
})
I'm brand new to Angularjs and am trying to set up a new site but I'm confused as to the set up. I have a module and am using $route to successfully navigate but I'm lost as to what to do with my nav. When I load the module I want to read my database for a list of links that the user is allowed to access then spit them out in the nav. I don't want to repeat this in every view because I don't need to. So I'm trying to figure out how to run the ajax call once and then keep changing the view (I'd also like to add a class .selected to whatever view they're on). How would I go about doing that, with a directive?
(function () {
var app = angular.module('manage', ['ngRoute', 'manageControllers']);
/*
I've tried this but obviously $http isn't injected. Can I even do that?
var thisApp = this;
$http.get('/test/angular/php/angular.php', {params: {'function': 'nav'}}).then(function successCallback(response) {
});
*/
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'templates/dash.html',
controller: 'DashCtrl'
}).
when('/inventory/', {
templateUrl: 'templates/inventory.html',
controller: 'InventoryCtrl'
}).
when('/inventory/:mvKey', {
templateUrl: 'templates/inventory.html',
controller: 'InventoryCtrl'
}).
when('/inventory/:mvKey/:tab', {
templateUrl: 'templates/inventory.html',
controller: 'InventoryCtrl'
}).
/* etc...*/
}
]);
})();
EDIT:
My attempt at getting the nav to run once
controllers.js
var manageControllers = angular.module('manageControllers', []);
var thisApp = this;
nav = null;
navSelected = '/';
manageControllers.controller('NavCtrl', ['$scope', '$http', function($scope, $http) {
if (thisApp.nav === null) {
$http.get('php/angular.php', {params: {'function': 'nav'}}).then(function successCallback(response) {
console.log(response.data);
thisApp.nav = response.data;
$scope.nav = thisApp.nav;
$scope.select = thisApp.navSelected;
});
} else {
$scope.nav = thisApp.nav;
$scope.select = thisApp.navSelected;
}
}]);
manageControllers.controller('DashCtrl', ['$scope', function($scope) {
thisApp.navSelected = '/';
}]);
I would swith to UI Router (https://github.com/angular-ui/ui-router) instead of $route. It allows you being much more flexible with your routing.
A Small example:
app.config(['$stateProvider',
function($stateProvider) {
$stateProvider.
state('/', {
url: '/',
views: {
'': {
templateUrl: 'templates/dash.html',
controller: 'DashCtrl'
},
'nav#': {
templateUrl: 'path/to/nav.html',
controller: 'NavCtrl'
},
}
}).
state('/inventory/', {
url: '/',
views: {
'': {
templateUrl: 'templates/dash.html',
controller: 'DashCtrl'
},
'nav#': {
templateUrl: 'path/to/nav.html',
controller: 'NavCtrl'
},
}
}).
// ...
and in your index.html
<div ui-view="nav"></div>
<div ui-view ></div>
Take a closer look at UI Router's doc, there's much more you can do with it!
I am looking at building a clientside authentication for my angular app. The routing looks like this:
var app = angular.module('app',['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/customers', {
controller: 'CustomersController',
templateUrl: 'customers.html',
secure: true
})
.when('/login/:redirect*?', {
controller: 'LoginController',
templateUrl: 'login.html'
})
.when('/testing', {
controller: 'TestController',
templateUrl: 'testing.html' })
.otherwise({ redirectTo: '/customers' });
}]);
When I click on the login link it wont let me go to the login page?
See also this plunkr: http://plnkr.co/edit/TVSnCp8AtBKVfcYdWvN2?p=preview
Please update the app.js
(function () {
var app = angular.module('app',['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/customers', {
controller: 'CustomersController',
templateUrl: 'customers.html',
secure: false
})
.when('/login', {
controller: 'LoginController',
templateUrl: 'login.html'
})
.when('/testing', {
controller: 'TestController',
templateUrl: 'testing.html' })
.otherwise({ redirectTo: '/customers' });
}]);
app.run([ '$rootScope', '$location', 'authService',
function ( $rootScope, $location, authService) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
if (next && next.$$route && next.$$route.secure) {
if (!authService.user.isAuthenticated) {
authService.redirectToLogin();
}
}
});
}]);
}());