I am building an AngularJS app.
I will have a users view which will have a few tabs:
User Listing
Account
Contact
etc
Basically, everything under "User Listing' should be disabled until a user is selected on the user listing tab. Those tabs will then become active and will have all the details related to the selected user.
I need to pass the id of the selected user into the other tabs so that I can load the model for those users. Do I add the value onto the $scope?
For testing, I tried $scope.id = 4 in my controller for the listing tab.
Then in my view for my account tab, I tried {{ $scope.id }} but nothing was printed on the screen.
You can use to validate a variable to provide user access to routes.
$routeProvider
.when('/somepage' , {
templateUrl: "templates/template.html",
resolve: {
"check": function($location){
if('Your Condition'){
//Do something
} else {
$location.path('/'); //redirect user to home.
alert("You don't have access here");
}
}
}
})
You can use service to validate the login. And for show hide menus you can use same reference and use ng-hide or ng-show
Related
I am new to Angular JS and Django. I am working on a project in which back end is implemented using Django framework. In this project multiple API's are there.
Our front end is developed using Angular JS (Actually it is Angular JS Single page Application).I want to know that what would be the way to put a check condition that user is logged in or not before each API call.Because we want to reduce unecessary Api calling untill a user logged in.
Currently , However we have implemented authentication mechanism in our back end part but we also want to implement some mechanism in front end so that untill a user logged in ,no request will pass to server.
We want that if user is not logged in, then no api should be called(i.e controller should not be loaded). But, as soon as a user logged in, api should be called without reloading the browser.
The solution which I have tried I am providing in following section.please correct me because I know that surely I am doing something wrongly.
In rsf function , I am confused what should be written inside if statement.
Please suggest some method.
Thanks in advance.
myApp.config(function($routeProvider, $locationProvider) {
var rsf = {
// This function tells if user is logged or not
"check": function($localStorage, $location) {
if ($localStorage.user != null) {
alert("You are logged in");
} else {
throw "Not logged in";
}
}
};
$routeProvider.when('/login', {
templateUrl: 'vues/login.html',
controller: 'neutreCtrl'
}).when('/compte', {
templateUrl: 'vues/compte.html',
controller: 'compteCtrl',
resolve: rsf
}).otherwise({
redirectTo: '/login'
});
})
How to create following type of UI in angularjs
IN menu there are two button: New User and My profile.
Menu is in header.html
New user redirect to mypage.html
My profile redirect to mypage.html
Both New user and my profile have same ui, they have Name and Gender text both.
If user click on newuser then textbox should be blank and if user click on myprofile then it should show user details and hide the blank textbox.
I try to achieve this but on refresh it gives error and it takes two click while I click on my profile to show my profile details.
My understanding :
Implementation as per my understanding :
On click of New User and My Profile pass some param in the routing path that will define which action you are performing.
Html :
New User
My Profile
routing :
.state('mypage', {
url: '/mypage/:action',
templateUrl: 'mypage.html',
controller: 'myPageCtrl'
})
URL after routing :
http://www.example.com/mypage/newuser (on `New User` icon click)
http://www.example.com/mypage/myprofile (on `My Profile` icon click)
myPageCtrl Controller :
$scope.userAction = $stateParam.action; // newuser or myprofile
Now, You can put ng-if in the mypage.html based on the $scope.userAction value.
I have this list of users .. When a user clicks in one of those user in the list.. it will redirect me to my profileState with the associated UID of the user. I use state parameters to pass the UID from the userListState to the profileState..
When i type
console.log($stateParams);
it displays the UID which i passed from userListState .. but once i refresh the page.. the UID will become null.. So i would like to know how you guys make that specific data remain there after page reload.
How do you have configured your states? becuase you should do something like
.state('app.profile', {
url: '/profile/:uid',
views: {
'#app': {
templateUrl: 'app/profile/index.html',
controller: 'ProfileController as profileCtrl'
}
},
params: {
uid: null
}
})
this way when you go to your state you'll end up with
localhost/profile/234
you will refresh and uid will be there.
There are 2 common ways to store your uid:
Assign variables to $rootScope, that way its visible to all the controllers
localStorageService , this will hold the values even after user refreshes the page.
The backend has created user and needs the email to be confirmed and it has sent out an to the address (see below)
Please confirm your account by clicking
after clicking on the link the user goes to the frontend I have the following route setup using ui.router:
.state('confirmemail', {
url'/confirmemail',
templateUrl: 'client/view/confirmEmail.html' })
how do I get this to route to this state using the above link and how do I access the user and code?
thanks
You can use stateParams:
In the email:
Link
In your config:
.state('confirmemail', { url'/confirmemail/:id', ... })
In your controller:
var myId = $stateParams.id;
// Then lookup user with myId
The link the user clicks on should go to yoursite/confirmemail. Simple as that, just have them navigate to the route that matches the url in your state.
As for passing the information, I can think of a couple options. You could pass a querystring, yoursite/confirmemail?userId=123 or whatever, or you could set up your route to pass some sort of id (or whatever the information may be). Either would have basically the same result. Again, you would define this in your email link then capture it when that path is hit.
Example of passing id using angular:
.state('confirmemail', {
url: '/confirmemail/:id',
resolve: {
id: function ($stateParams) {
return $stateParams.id;
}
}
}
and set the link to yoursite/confirmemail/123 where 123 is the user id.
From there you can inject the id into a controller.
I'm writing an EShop project, and i show some products in it which customers can buy them, when the customer click on buy button, i checked whether customer was logged in or not, if not i should route the customer to specific controller for log in process, if customer was logged in i route him or her to another controller, how can i do it?
<script>
app.controller('buyTheItem',function($scope,$http){
//when customer click on buy button then:
$scope.buy = function(){
// here i check whether customer was logged in or not
if(was logged in){
// i should route to buyProductController
}
else{
// i should route to accountController for log in
}
};
});
</script>
before i use window.location but its not right way because i need angular routing, and it's not use this,, any one can tell how can i do it?
For this, I can suggest to you to use UiRouter: https://github.com/angular-ui/ui-router
When you implement uiRouter you can afterwards use service $state
and your code can look like:
if (was logged in) {
$state.go('my state for buyProductController');
} else {
$state.go('my state for accountController');
}
uiRouter has a lot of other advantages, all you can see here: https://github.com/angular-ui/ui-router/wiki