This is not my actual use case, but I am trying to understand the concept of how to load a view based on the information another view has using appgyver supersonic framework.
I have 3 pages, Login.html, MainPage.html, and Load.html. Each of them have their own controller. When the app opens it first goes to the login page. The login page sends the username and password to my server which then returns success or not. When there is success, the app goes to the main page. I would like for the load.html to understand a login has happened and start loading the view with the users appropriate content. This is so when the user goes from the main page to the load page all the information is already loaded. I am trying to understand the concept of how to accomplish this with supersonic.
You can use publish / subscribe methods between controllers.
Check out this doc for some good examples.
Basically, you want to publish a message with some data when the user is logged in. Your controller for after log in will be able to listen or subscribe to that message. When it receives the message it will be able to run any code you tell it in the callback.
One controller will publish:
// gather some user data with successful login like var id = result.user.id
supersonic.data.channel('loginSuccess').publish({ userid: id });
Another controller will listen:
supersonic.data.channel('loginSuccess').subscribe( function(data) {
$scope.id = data.userid;
// load some data based on user id
});
You can preload the views as well. This may help speed things up. If you don't, you may see a spinner in between view pushes. In structure.coffee in the config folder:
preloads: [
{
id: "viewIdYouSet"
location: "nameOfModule#view"
}
]
When the login finishes, you can find the preloaded view and push it to the stack:
supersonic.ui.views.find("viewIdYouSet").then( function(startedView) {
supersonic.ui.layers.push(startedView);
});
Hope this helps.
Related
I have the main.cfc file where I am setting the view based on the user that is logged in. I have admin view and I have user view.
Admin view is decided based on the ids i add to the list.
I want to give option for admin to change to see view like a specific user.
I have ng-click="switchView"
This calls a function in the AngularJS
$scope.switchView = function(){
// I want to cfset session.remoteuser = userid
// and redirect to main page to change the view
}
Is this possible? How can i achieve it?
I have a simple requirement where out of multiple pages, I have one Settings page in Ionic app, where I am allowing the user to toggle one data(say, language) that is maintained in LocalStorage in the app(via a factory).
This 'language' is used in all views(controllers).
I have Back button on the view but when user changes 'language' through Settings page(I update LocalStorage) and want to go back through IonicHistory back button to the preview view, change does not show up after going back.
"Previous view" uses LocalStorage.Language to fetch data
Back button uses following code:
$scope.goBack = function() {
window.history.back();
}
Can anybody help here or any workaround for this is possible.
Ionic caches views in the current navigation history. In order to update the view everytime you come to a view, you should use $ionicView lifecycle callbacks like .enter, .beforeEnter etc. The code written as part of these callbacks are executed everytime even if the view was cached:
$scope.$on('$ionicView.enter', function() {
// Get your settings data here to reflect it on page everytime
})
For details refer: http://ionicframework.com/docs/api/directive/ionView/
I'm using angular-seed template (AngularJS) and I have routeProvider setup and such, now I want to execute a function (which resides in a factory), but only the very first time when the page gets loaded. I found many solutions for this, but I don't want to execute the code each time the users switches between tabs (via routeProvider of course, page doesn't get reloaded) - the code must be executed only when the whole page gets (re)loaded.
How should I approach this? I tried to call the function from run and then broadcast the event when page gets loaded, but there are no event listeners - I guess that is because the run part gets executed before the controllers are setup, so there are no listeners attached at the time when the event gets broadcast.
So, any suggestions how to approach this?
UPDATE
Use case:
when user types the url in the page, the page gets loaded
when pages gets loaded, a $http.get request is performed, which gets a random content
this content can be changed only by clicking a button, to explicitly request a change of content.
if users clicks to a different page e.g. view2 (routeProvider) and then back to the view1, the content must not change
when users refreshes the page (F5), the content changes again (or as already stated, by a click of a button)
Use the run method:
app.run(function(yourService){
yourService.cacheRandomContent();
});
It runs only once after the app is bootstrapped and services are created.
To access the data in controller, just inject the same service:
app.controller('someCtrl',function($scope, yourService){
yourService.getCachedRandomContent().then(function(resp){
$scope.data = resp.data;
});
});
Your service would be something like:
app.service('yourService',function($http){
var promise;
return {
cacheRandomContent: function(){
promise = $http.get();
},
getCachedRandomContent : function(){
return promise;
}
}
});
I'm looking for some inspiration (help), in order to do a good login system for my application based my needs, so the scenario goes like this:
I have a backend application which when logged, created a session and the only thing I can see it set on my browser is a PHPSESSID cookie.
So, I have my application done and define like this.
var app = angular.module('myApp', []);
As far as I know, I would have to do something like, check the login controller, if successful, create the line of code I copied and change the view, else, do not created.
So, I thought in creating a controller for this, however, should I create another app only for this? so my ng-app would have 2 applications?, or no matter is logged or not, instantiate the app and hide the home buttons as long as the login is not successful?
I'm kind of lost in here, I would appreciate any help that points me on the right direction.
There are many approach to achieve it. I am only talking the approach that I usually used. Let's say, in the pictures below, user able to view the blog without login. After user is login, the black navigation bar on the top will appear. How to achieve it by using AngularJS?
In the article.html
<div ny-app='myapp' ng-controller='mycontroller'>
<user-navbar ng-if="user" user-data='user'><user-navbar>
<article-content></article-content>
</div>
<script src="angularjs....."></script>
<script>
angular.module('myapp',[]).controller('mycontroller',['$scope','$http',
function($scope,$http){
$http.get('/getuserdata.php').success(function(user){
// you will get user data only when session is valid.
$scope.user = user;
});
}
]);
</script>
In getuserdata.php
<?php
if(!empty($_SESSION['user'])){
echo json_encode($_SESSION['user']);
}
echo null;
?>
The code above shows that when user is login and session is set in user key. $_SESSION['user'] will contain the information of your user and you just response it to frontend AngularJS by echo.
Then, $http will receive the user data that requested and assign to $scope.user and navigation bar will shows if $scope.user is not null. You don't have to due with PHPSESSID. PHP session will handle everything for you if you coding correctly.
I'm trying to trigger some events at initialize in my views. They work if I back and forth in the browser or if I load a second view, but not at first loading, i.e. when the user lands in the view.
My setup is as follows:
I create an event aggregator at router.js like:
socketEvents: _.extend({}, Backbone.Events)
Then I pass the aggregator to each view like:
index: function() {
this.changeView(new IndexView({socketEvents:this.socketEvents}));
},
Then in index.js I do something like so:
initialize: function(options) {
this.socketEvents = options.socketEvents;
this.socketEvents.trigger('one:event');
},
As I said, if I refresh the page doesnt work, if I move to another view and hit back in the browser, the event is triggered.
Why is this happenning? How can I solve this?
Thanks
Editing after first comment:
There are not errors I can/know how to track. At initialize() Either it just does seamlessly the whole transaction: trigger and listenTo, or it completely ignores it at initialize(). Order of execution is as follows: I boot the application with require, from there it loads a class with the router and socket.io client. Then it iniatilizes the socket.io client and uses the router event aggregator. Then it checks if the user is logged, if it is, it triggers an router.event saying the user is logged in. At the socket.io client, there is an event.Dispatcher binding the logged in to initiating the socket. Finally the user is redirector to a index view. Then it happens as I described above.