I have a basic CRUD application written using the MEAN stack. In this I have an 'issues' model of which a number of properties are stored, including an external url which a user inputs.
I am trying to display this url so when the user clicks on it they are redirected to an external page (i.e. new tab in the browser). I am using Angular for this part.
With my current code I am always opening a new tab with the following url (http://localhost:3000/www.google.com). Taking the Google homepage as an external url example stored in the database.
My current code looks something like this.
view-issue.client.view.html
<a ng-href="{{ trustUrl(issue.sourceUrl) }}">Click me!</a>
issues.client.controller.js
$scope.trustUrl = function(url) {
return $sce.trustAsResourceUrl(url);
};
I have also tried this solution already posted with the same result (Linking to external URL with different domain from within an angularJS partial).
Thank you for any help you can provide!
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 am using Dan Wahlin's AngularJS tutorial as a seed project for angular.
The code can be found here:
https://github.com/DanWahlin/CustomerManager
I am having trouble making it function for two different languages.
For example. When the route is : /en/customers or /customers only, I want to show customers.html view which is in /Views/ folder, If the route is /fr/customers I want to load the customers.html ng-view which is in /Views/fr directory.
The problem is routes are registered in app.config. Once the routes are registered how can I change them to work for other languages?
Once the site is loaded and home page is displayed to the user, I have a link which says change language. Once the link is clicked I want all the routes to now have /fr/routeName instead of /routeName. How can I do that.
How am I going to remember the language and reroute all the routes to /fr/routeName instead of just the default /routeName.
I tried using $location.search('lang','fr') to append a querystring value once the user click change language button. But each time a link is clicked the querystring gets vanished. Also even if I have the query string, How am I going to tell Angular that from now on, use /View/fr as the base directory for Views instead of /Views only because the queryString contains lang=fr.
Earlier when I used to make MVVM applications using Kendo's MVVM framework , I used to put fr views in /views/fr folder with same name and english views in /Views directory. Then I checked in Viewmodel that if the querystring contains fr, I compiled fr template from /View/fr folder otherwise I loaded template from /Views folder.
*This is the app.js file which contains app.config:
app.js
*Here is the routeResolver service which has the base directory for views hardcoded:
routeResolver.js
In short:
1) How can I store user's selected language after he clicks a link or button, Is querystring the way to go? Or can I set the default route to point to /fr from a controller for every request from then onwards?
2) How can I tell angular to route to /Views/fr instead of /Views to get the fr View if the queryString contains lang=fr.
I am new to angular and very confused with services,factories,providers etc. Services are not available in config, We have to use Providers, While I dont have Providers in run blocks, instead we have to use Services. Its going to take time before I get a hold of it. I would appreciate any help. You can refer to the git hub project of Dan Wahlin and please tell me how can I change it to respond for other language also. Currently the View directory is hardcoded to var viewsDirectory = '/app/customersApp/views/', in routeResolver.js. How can I make it to /views/fr on user click once the app has loaded and user selects French language as default.
I have an angularJs application, which uses $routeProvider to handle internal routing. The back end uses Rest controllers within a Spring Boot application. The application is based on this: https://spring.io/guides/tutorials/spring-security-and-angular-js/
What I want to do is send an email with an embedded link similar to "http://localhost:8080/link/key1234". The user should be able to click this, and go to specific content as indicated by the key1234 variable.
I have seen a similar item (Refreshing page gives "Page not found") which suggests using .htaccess to handle this, but I do not currently have a .htaccess file.
I also have html5mode on [$locationProvider.html5Mode(true);]
Another suggestion (Spring Boot with AngularJS html5Mode) is to intercept the request and redirect to the home page. Whilst this prevents the application from failing, I need the user to go to a specific page, not the Home page.
I have managed to get quite confused about the interactions of my different components. Can you point me in the right direction to enable a specific link to be provided ?
UPDATE
I think that the .htaccess file is a red herring.
The spring.io tutorial includes the following code:
#RequestMapping(value = "/{[path:[^\\.]*}")
public String redirect() {
return "forward:/";
}
And this segment performs a redirect for some of the pages.
However, my tests (until recently) had been using "http://localhost:8080/public/about" which is not getting picked up by the RequestMapping snippet above.
If I use a single level url (e.g. "http://localhost:8080/test") then my existing code works fine.
It looks like there is a flaw in this regex.
When a request like http://localhost:8080/link/key1234 hits your server, you would need to forward the request to home page. Then, the client should get the response of the home page, while the URL will still be http://localhost:8080/link/key1234. html5mode will then come to play, changing the view at the client side.
I think the best way to do it might be to use urlrewrite filter, which should forward all requests except those starting with, say /api/**, to the home page.
I apologize this question turned out a bit long, but I have worked on this for some time and really needed to explain all the story.
Background: App based on MEAN stack, trying to authorize Facebook logins using Passport.js.
Following Passport.js guide I implemented something similar to:
// HTML
Add a Facebook login
// send to facebook to do the authentication
app.get('/connect/facebook',isLoggedIn, passport.authorize('facebook',
{ scope : 'email' })
);
// handle the callback after facebook has authorized the user
app.get('/connect/facebook/callback',
passport.authorize('facebook', {
successRedirect : '/profile',
failureRedirect : '/profile'
}));
Notice the target=_self in the html in order to skip Angular routing.
Clearly, authorization works fine. However, redirection does not work, as the routing is handled by Angular. After authorization I never land on /profile (but on the default Angular route).
Therefore, I tried with a custom callback as suggested by Passport.js here, with the hope of passing json data to Angular, and let Angular do the routing. I ended up doing something like:
// In the controller
$http.get("/connect/facebook").success(function(data){
// here I wait for json data from the server and do the routing
});
// I call this route from Angular
app.get('/connect/facebook',isLoggedIn,passport.authorize('facebook',
{ scope : 'email' })
);
// But Facebook lands here!
app.get('/connect/facebook/callback',function(req, res, next) {
passport.authorize('facebook', function(err, user, info) {
res.json({something:smtg});
...
Clearly custom callbacks work for local-login, as Passport.js explains. But here do you see the problem? I call /connect/facebook from Angular, but I should receive some json from /connect/facebook/callback.
I am about to give up Passport, but before this, do you see any solution which would allow landing on /profile after FB authorization, perhaps with a custom message? Many thanks for reading through.
EDIT:
The same question had been reported as an issue on the Passport-Facebook GitHub account. Some additional attempts have been posted there, but not quite the fix yet.
This is a bit more in depth than can be described in one answer, but I'll try to start pointing you in the right direction.
Essentially, Angular.js routes are not really HTML routes at all, but an internal route structure that happens to use the URL for use of the end user. Remember that Angular.js is a client script, and that a full page reload is not desired, as this will reload the entire script. Therefore, /# is used to trick the browser into jumping to a specific bit of code within the already loaded script. (as opposed to the traditional anchor location in the HTML document). Unfortunately (or fortunately), HTML 5 mode allows you to hide the /# part of the url, so instead of seeing http://somesite.com/#/someroute you just see http://somesite.com/someroute. Rest assured, however, that the /# is still there. Angular.js uses the HTML5 pushState (AKA HistoryAPI) to perform the magic replacement.
Given this, if you have called a server route, you are outside the Angular.js script, and any call to load the angular script again will start from the very beginning. You can't actually call your Angular.js route from the server without a full reload. Therefore, you are really doing a double route redirect here. Your server should be calling it's default route for angular, appending /#/someroute to the call. The angular.js page will load, parse off the /#, and redirect to the correct angular route. Keep in mind, however, that if there was any dependency on already loaded objects, those are no longer in memory. Therefore, any route accessed this way should operate as if it is an entry point to your application.
Effectively, you should try using successRedirect : '#/profile', keeping in mind that the profile route in angular should be treated as an app entry point.
Hopefully this gets you started.
If #Claies's way is not working, is it possible you have not get rid of the #= fragment from the facebook callback.
Have a read of this post
I have a javascript app running in a home page component. It calls into a web service, which in turn calls the salesforce API. I would like to use the API_Session_ID variable to save re-logging in. How do I expose this to the javascript running in my home page component? Ideally I would like to use apex to render a small piece of script, initialising a javascript variable with the API_Session_ID variable, onto all pages, but I can't see how to do this.
Note - I can't use VF as the app is running in a home page component. The normal solution for that (run as VF in an iframe) is not available to me as I need to access the javascript objects in the main page, which I can't do from an iframe.
Ok so I figured this out. There's a value 'sid' in the session cookie, and that's what one needs with a bit of tweaking. Easy when you know how! Here's the link:
http://forums.sforce.com/t5/forums/forumtopicprintpage/board-id/general_development/message-id/7209/print-single-message/false/page/1
It's a bit out of date. I pass the cookie sid value, and window.location.host to my php web service. The php to make these values work is:
$sidparts = explode("!", $feed->sid['value']);
$location = "https://".parse_url($feed->server['value'],
PHP_URL_HOST)."/services/Soap/u/20.0/".$sidparts[0];
$sessionId = "{$feed->sid['value']}";
I've tried to do the same thing a few times as well. Unfortunately, I haven't had success without VisualForce.
I did find a discussion thread on the topic a few days ago, though.
http://boards.developerforce.com/t5/AJAX-Toolkit-S-Controls/Detect-current-user-with-AJAX-toolkit/m-p/277241#M8485
Also, it sounds like you know this, but to get the Session ID using VisualForce:
<script type="text/javascript">
var __sfdcSessionId = '{!GETSESSIONID()}';
</script>