Started learning backbone.js and require.js.
Not sure how to structure files for web app with user authentication.
Seems it should flow like this:
On app init, query server to check auth session state;
Q#1: where should I be writing this 'after init' session code - in /js/app.js?
Q#2: should I be using jQuery ajax for this, or is there better backbone.js methods (I've seen references to get(), fetch(), toJSON() in examples)?
If success, store auth data in a model (user_id, username, auth_token).
Q#3: how/where do I init this model so that I can access that data throughout modules? ie. I will have a view to display template for 'isLoggedIn.html' that will read "Hello %username%! Logout". I want to access 'username' field from this model. Currently, I see only how to create a new model by referencing it in the view's define[], so I don't know how to access the model that was created during init.
Will use jQuery $.cookies to save and get this auth data, so if user leaves page and returns, I can query server to check session instead of requiring user to login again.
Q#4: how do I include jquery.cookies.js plugin into this requirejs app, so that I can later use $.cookies as usual? Am I supposed to add this plugin to the define[] list? Do I have to add it to the /js/jquery/loader.js file?
Thank you for your assistance.
Edit: I used the files from modular-backbone example to create my web app. So when I am talking about /js/app.js and js/router.js, that's the files I refer to.
I'm in the same situation as well.
I found this post and it seems like the best option to do something before every request is to use this solution.
Before accessing and URL except /login, I'm going to authenticate by cookie or run the login view.
About the way to include other folders (jQuery cookie)- just use the require.js mechanism:
In your main file 'require.config' -> 'paths' add the plugin location (jqueryCokkie:)
In your view under 'define' add the path name ('jqueryCookie') and pass it to the finction
The .js file should be in the following structure (I tried to paste the code example here, but got problems...).
Related
I've angular app with lots of states and modules etc. Now, I want to send a link to the user. When user'll hit this url, I want to redirect him to a new tab rendering only that particular state (specified in URL) i-e I don't want anything else to be visible to the user. Or you can say, I want to open a popup window rendering that particular state's html in popup window . This is the approach that comes to my mind to sort it out.
Ps. There are Rest APIs at the backend which I am calling through angular resource service to bind data with the model of the views
Option
I've rest APIs on backend, So, I was thinking to developing s separate Nodejs application, And I will send nodejs application url to the user and in the default/home route I'll call backend API and, the returned resultset will be rendered in html file within nodeJs application and this way, I'll render the corresponding data to user's browser window.
This is the flow for that
I don't know if that is right or clever approach. Please suggest me what will be the best approach to sort it out.
Thanks in advance.
This is what my app looks like
Everything in the left side-nav is a module and clicking on this I am routing to a different state. I am using angular-material and lots of other dependencies in this project.
And this is what I want.
I'll refer a link to the user for example www.myapp.com/specificpage.html. And hitting this url, a new tab/popup will be opened rendering state defined in the same app but with some non-editable url. And it should like.
There are multiple ways to achieve this and each approach has advantage and disadvantage. You have to choose depending on requirement and architecture. Details are below-
Create a separate app - You can do it through separate code base or use the module based build process and include this module only for new app.
Divide application is two part, public pages and private pages - Include this page and required APIs for this page in the public modules for your app.
Send token in the link - If you want to make secure page, send short lived token in the eMail and validate token on the server before displaying page to the user.
I need idea on how to create a app structure of two separate Angularjs App folder.
Let's say:
In my XAMPP/htdocs, I have a separate folder of Angularjs App folder. The A app folder and the B app folder need to integrate(I don't know if it is the right term) to each other.
Example, there's a SignIn in A app folder, when the credentials is valid, it will redirect to B app folder, when Signout in B app folder, user will be redirected to A app folder.. something like that..
My question is, How I can connect that two (A and B app folder)?
I hoped I discussed it well enough to understand. Thanks.
You can use services to achieve this objective.
As you have two different apps and you need to create a bridge between them, a good way is to create services that can be injected where you need them.
A AngularJs service is created inside an AngularJs App, by declaring it using your angular module like this:
angular.module("YourAngularModuleName").factory("MyCustomService",
[
"injectedDependency",
function(injectedDependency)
{
var serviceInstance={};
serviceInstance.operationYouNeed = function(){
//do your stuff.
return;
};
return serviceInstance;
}
]);
This service above is a example structure of a service called "MyCustomService" that has a method called "operationYouNeed".
On your AngularJs App controller, you can inject your MyCustomService and call operationYouNeed as you may need it.
Considering the scenario you exposed, I don't know the way you are keeping the logged user context, but you can evaluate the user action on the service method and then call a $location.path("your app2 root url") in order to redirect the user or, if is the case, call a $window.location.href = "your app2 root url" in order to cause a page reload.
In applications that I write, I use to implement a token based authentication and store the temporary toke as a private cookie, so if I had your app scenario, on App2 I would inject $cookies on my Service and use it to retrieve the temporary cookie in order to check session validation and also decide if I need to redirect my user or not.
Another kind of concept you can implement here is to use a third AngularJs app in which you declare your common service, so you don't need to create any dangerous circular reference between your two apps.
I don't know the deepnes of your AngularJs knowledge but you allways need to declare a module dependency whe you does something like this, by including it on your AngularJs app module, like so:
angular.module("YourAngularModuleName",["anotherDepencyModule", "another", ...]);
Hope it helps.
Cheers.
We have a multi-tenant Angular JS single page application. The routing for the application uses a customer identifier as part of the URL - #/home/<KEY> or #/search/<KEY>/<search term> for instance. In theory the first page served could be of any type. Each page calls an API using the customer key and other values picked up from the URL to get data for the page. So far so good.
We have some parameters - a logo, copyright statement, default language (for internationalization) - that can be loaded using a separate API call that also uses the customer KEY. These parameters need to be available as strings in partials, to drive the internationalization and perhaps in controllers.
The question is where to call the API to get these parameters and how to set them / make them available for the rest of the app. I have looked at a bunch of questions in this general area but can't find a concrete suggestion. Should we use a config in app.js? Call another script from index.html?
Appreciate people's advice.
The right place would be to make an API call immediately after authentication to get the various Customer specific configuration data like the Customer settings for logo, language and then put them in the session storage of the browser.
I have done an implementation using Microsoft ADAL js as per the documentation given here. https://github.com/AzureAD/azure-activedirectory-library-for-js/blob/dev/README.md.
You can do this Api call in the login success event handler or similar ones in angular.
Example:
$scope.$on("adal:loginSuccess", function () {
$scope.testMessage = "loginSuccess";
});
HTH
I am very new to BackboneJS. I am creating a simple CRUD application using BackboneJS.
I have seen an example on the web (http://backbonetutorials.com/videos/beginner/). I can see a GET request on load of application i.e. http://backbonejs-beginner.herokuapp.com/users to get all the users in JSON format.
I just wanted to know what is this url (http://backbonejs-beginner.herokuapp.com/users).
Can someone help me to understand where and how data is getting saved?
What do I need to do, if I want to do the same thing on my localhost?
Do I need to write any server side code in order for this to work?
The url in the example is (one of) the API endpoints that the demo application interacts with in order to function. Backbone.JS will allow you to fetch and save data in many different ways (by writing a connector yourself) but the default means of getting and setting Model data for backbone is through AJAX calls to a RESTful API.
So lets take a look at this code snippet:
MyModel = Backbone.Model.extend({});
MyModelCollection = Backbone.Collection.extend({
model: MyModel,
url: '/myserver/api'
});
Note the "url" configuration option on the Collection. That is the URL that Backbone will make calls to (GET,POST and others) in order to get and set data for the application. That URL should be provided by you in most cases - especially if you are the one building the application.
So in short...yes, you will need to write some server side code for your CRUD application to work. I would suggest watching the REST tutorial I linked above and then consulting these articles which provide a bit more detail about how Backbone models are supposed to work.
What is a Model
Collection URL option
Model URL option
Backbone Model - Save
The server side code is needed.
But if you just want some data not matter they are real or fake. What don't you just create a object with fake data and set the Model or Collection with them. This is more easier than setting up a backend.
Is there a blog, project, gists or seed out there using angularjs and requirejs that provides authentication not based on routes? I'm working on building a site that will show the user the same rendered view, but different data fed from the server based upon their authentication. I have session handling already written into it, but I need angular to check the server for the session on the initial render for changing login buttons to logout and getting only the data the user wants to see that they've selected.
I attempted to use the angular run method to initially grab the session from the server, but when using requirejs, my app module doesn't exist at the time of calling the run method.
From my understanding, please correct me if I'm wrong, I should be creating an injector or using the $rootScope to carry the user information to routed controller and show the user what they is related to them. If so, then I need to have a service that is initially fired during the project instantiation to retrieve the user's session data. I'd prefer to not use the servers template rendering to put the users session data into javascript if possible.