I'd like to know the best practice, how to set up routing and templates in AngularJS to show a different front & login area to visitors, and then show a dashboard to logged in users on the same base url ('/').
The two pages are structurally completely different, and also different assets are needed.
Is it better to setup two different apps for the 2 parts of the website, but then how would I manage the session between the 2?
Or is it better to make an "empty" layout with nothing between the body tags an load the different templates into that, and make separate routing for the front part and the dasboard part?
I'm looking for kind of like the way Facebook's login is made. To stay on the root domain after logging in.
I spent my afternoon Googling and searching SO, but couldn't find any guides on this. Any ideas how you usually do this kind of separation in AngularJS would be very welcome.
Martin's answer is fine, but I'd rather solve the problem with ui-router module:
Create three states: root, dashboard and landing.
Capture URL with root state and redirect to dashboard or landing depending on authorization status.
dashboard and landing will have controller and templateUrl defined in one place together with other application states, which is nice.
Code example:
angular
.module("app", ["ui.router"])
.value("user", {
name: "Bob",
id: 1,
loggedIn: true
})
.config(function($stateProvider) {
$stateProvider
.state("root", {
url: "",
template: "<section ui-view></section>",
controller: function($state, user) {
if ($state.is("root")) $state.go(user.loggedIn ? "dashboard" : "landing");
}
})
.state("landing", {
templateUrl: "landing.html",
controller: "LandingCtrl"
})
.state("dashboard", {
templateUrl: "dashboard.html",
controller: "DashboardCtrl"
});
})
.controller("DashboardCtrl", function($scope, user, $state) {
$scope.logout = function() {
user.loggedIn = false;
$state.go("root");
}
})
.controller("LandingCtrl", function($scope, user, $state) {
$scope.login = function() {
user.loggedIn = true;
$state.go("root");
}
})
Complete example on Plunker.
You can use the same master template, include different partials depending on if the user is logged in or not.
<ng-include=" 'views/loggedout.html' " ng-if="!loggedIn"></ng-include>
<ng-include=" 'views/loggedin.html' " ng-if="loggedIn"></ng-include>
Related
I am currently using ui.router for my page routing in my Angular application but it am starting to get a bit of issues with exploiting parts of my applications to users that don't have permissions to it.
I have tried to find documentation on this with no luck so fare so hope somebody in here have an approach for this.
In my example below i show that there are three pages in my application, but not all are allowed to go to the moderators page. If they do i will of course validate the permission server side and redirect them, but i feel that showing all possible pages in my application is a bit of exploiting it, can this in some way be limited with ui.router, and not by my auto generating the router file server side, or is that just something i need to live with :)
$stateProvider
.state('default', {
url: '/',
views: {
'mainViewContainer': {
templateUrl: 'pages/default.html'
}
}
})
.state('news', {
url: '/news',
views: {
'mainViewContainer': {
templateUrl: 'pages/news.html'
}
}
})
.state('moderators', {
url: '/moderators',
views: {
'mainViewContainer': {
templateUrl: 'pages/moderators.html'
}
}
});
Try adding using resolve - a list of things that are preconditions for a state.
.state(..., {
...
resolve: {
adminPermission: (AdminService) => {
return AdminService.validate();
}
}
...
})
Then, if AdminService returns a promise that fails, the app will not enter the state (and you can catch it using a $onStateChangeError event)
Edit:
How about writing the moderator state in an if clause i.e.
If(isAdmin)
stateProvider.state(...)
Hi I have an application made in Ionic and AngularJS that have a login view and many other views that are show only after the user login (With his Fb account or as a guest).
I have some bugs relating to the change of account type (Fb, Guest) and I think all this problems can be solve destroying the state of all other controller when the user logout of his account and re-created when the user login.
How can I do that?
PostData: Everytime I login into the application a new instance of the controller are created so if I login 20 times 20 controller of the same type will be created...
I really appreciate your help. Thank you!
You can achieve this by simply cache:false in your route
.state('some_page', {
url: "/page1",
cache:false, // add this line and it'll works!!
views: {
'some-tab': {
templateUrl: "templates/page1.html",
controller: "PageCtrl"
}
}
});
I am creating a chat application in angular js. It contains two views
userList view (shows list of users)
messageActivity view (shows recent messages, kind of chat screen)
Right now, It has single static view and route.
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/user.html',
controller: 'userController'
})
.otherwise({
redirectTo: '/'
});
user.html
It shows the list of online users.
When user click on username of list, it should create the unique dynamic view of messageActivity based on userId. There can be 100 users. Creating 100 views is not possible. So, views has to be unique and dynamic. I created the basic template of messageActivity.
Is this possible in angularjs?
Pass the user ID as a route param.
.when('/user/:userId',
In your user link, use /user/{{userId}} , where userId is a unique user identifier, preferably numeric.
You can the pass the $routeParams service into your controller and get the userId
Background:
I have a multi page angularjs application. I have a service factory object that I load with values in my initial page. The values loaded to the service factory object are available in the different views or pages via their corresponding controller js. The value provided by the user is lost if the user tries to do a browser refresh by clicking F5 button.
My issue:
When the application is loaded the 'loginView' is displayed, the userId and password entered by the user is passed to the second view (summaryView.html). And i can see the userId and password displayed correct in the second page. But if i refresh my second view (summaryView.html) then I loose all the values. The application is sort of reset.
I would like to retain the user supplied data even after the browser is refreshed or reloaded.
My code:
**index.html**
<div ng-app="offlineInspectionApp">
<div ng-view></div>
</div>
<script>
var mainApp = angular.module("offlineInspectionApp", ['ngRoute']);
mainApp.factory( 'AuthService', function() {
var userCore = {userId : "anonymous" , password: "password", status :"online"};
return {userCore: function() { return userCore; }};
});
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/summary', {
templateUrl: 'summaryView.html',
controller: 'SummaryViewController'
}).
when('/login', {
templateUrl: 'loginView.html',
controller: 'LoginViewController'
});
}]);
**LoginViewController.js**
angular.module("offlineInspectionApp").controller('LoginViewController', function($scope,$http,$location, AuthService) {
$scope.authenticateUser = function() {
AuthService.userCore.userId = $scope.userId;
AuthService.userCore.password = $scope.password;
$location.path( "/summary" );
}
});
**SummaryViewController.js**
angular.module("offlineInspectionApp").controller('SummaryViewController', function($scope,$http,$location, AuthService) {
$scope.syncInspectionDetails = function(inspectionId) {
alert(AuthService.userCore.userId +' '+ AuthService.userCore.password);
};
I have two html files 'loginView.html' and 'summaryView.html'
Flow
1- when the user enter the correct username and password you store the data in angular variables. this is fine and it redirect to summary page. AuthService.userCore has the same scope over the summery page so it displays the details on first attempt.
2- when you refresh the page all the variable you declared in angularJs are cleared. So when you refresh the page you didn't get those variables.
Solution
there are two ways
1- either store the whole user data in cookie, and fetch the data from cookie on refresh.
2- one sign in complition use any access token and store it in cookie. And check for the access token and fetch the data from backend again on every refresh.
The Background:
I am using ui-router for my Angular page routing needs. It's working great so far, however I'm running into an issue. When I load a state and I resolve my user object. I use restangular to make the call to the database and it returns a promise. Everything works great. If I then log out, and log in as another user. Then navigate back to that same page it shows the previous user object.
Things that I've discovered:
The rest api call is being made every time when the state loads, and
it is the correct information.
If I place a break point inside my controller the user object that the resolve passes is the cached
information.
Theories:
The rest API end point is /users/me/, which is the same end point for
every user. We just deliver different information based off of the
JWT token we pass. Somewhere must things since it's the same call
don't bother delivering the goods it already got.
Things I've tried:
I've confirmed that the API call isn't cached, and it is delivering
the correct information to angular
I've tried grabbing the
$cacheFactory of $http and .removeAll.
Sample code:
angular.module('services.user', [ ])
.factory('User', function(Restangular) {
return Restangular.service('users');
});
angular.module('settings.profile', [
'ui.router',
'services.user'
])
.config(function($stateProvider){
$stateProvider
.state('settings.profile',{
url: '/profile',
templateUrl: 'app/settings/profile/settings.profile.html',
controller: 'SettingsProfileCtrl',
authenticate: true,
resolve: {
user: function(User) {
var user = User.one('me').get()
return user;
}
}
});
})
.controller('SettingsProfileCtrl',
function($scope, $location, user, $http, apiUrl){
$scope.user = user;
}
I had the same problem, however in my case the data requested in the resolve property wasn't coming from an API so HTTP caching definitely wasn't the problem.
I added {reload: true} for the options property in the troublesome $state.go call and this seems to have forced ui-router to refresh the resolve property. I no longer get the previous user's roles and permissions, which is nice :)
Your REST API parameter does not change i.e. it stays the same /users/me/ in all the requests. While the browser may not cache - which is why you see different correct information the cache.
You can try configuring Restangular to validate the theory by doing as below:-
RestangularProvider.setDefaultHttpFields({cache: true});
However I advise you to use URLs and REST API in the spirit of REST style i.e. use something like...
/users/me/username
where username changes based on the user OR if you have some constraints do the following
/users/me/?t=timestamp
Try adding cache: false to the state configuration object. But I also recommend adding a different parameter to the requests like userId for example.