Develop Reference

Angular not able to get full url

requirement: need to hit the url
localhost:4200/keyone=valueone&keytwo=value2109808329csdc0qwd&keythree=xyz#pqr.com
then capture:
[keyone=valueone, keytwo=value2109808329csdc0qwd, keythree=xyz#pqr.com];
When I am hitting the url using angular 5 its changing to
localhost:4200/keyone
I am not getting the full url. Its disappearing from the = .

Added a path and attached the required info as an id.
ex.
localhost:4200/item?keyone=valueone&keytwo=value2109808329csdc0qwd&keythree=xyz#pqr.com
And got the url values in windows.location.url
/item?keyone=valueone&keytwo=value2109808329csdc0qwd&keythree=xyz#pqr.com

The url looks fine and you should get into a url routed page which is mapped to this irl. As I guess there are no routing available to the url you are providing, its redirecting to a one it found
Normally in angular we catch url params in below way
const routes: Routes = [{
path: ':keyone/:keytwo/:keythree',
component: SomeComponent,
resolve: {
resolvedData: SomeResolverService,
}
}
And then in your resolver or component you can get them by
// inject ActivatedRouteSnapshot
route: ActivatedRouteSnapshot
Then get the params
route.params.keyone, route.params.keytwo, route.params.keythree,

Mean.js Multiple Layouts, Server or Angular Layout

I've been developing a mean.js application. I have an admin theme that I'm trying to integrate with the existing application.
My question is
Can we have multiple Server Layouts, ? If the logged-in user is Regular User, use layout-1 if the user is Admin use layout-2
If we cannot have multiple server layout (I presume it isn't possible). Is there any way to detect the params or scope variable in the Angular Client App and dynamically load a partial inside the main Layout.
Let say I have an Index.html file, if the intended route is Dashboard, I just replace a section of the page view, ( Ruby on Rails Developers would know this)
UPDATE 1 :
I've created 2 files with my required Admin Index, and Layout files.
admin.index.server.view.html
and
admin.layout.server.view.html
I've also added the following code in my core.server.routes.js
module.exports = function(app) {
// Root routing
var core = require('../../app/controllers/core');
app.route('/').get(core.index);
app.route('/admin/').get(core.adminIndex);
};
I've also added the following code in my core.server.controller.js
exports.adminIndex = function(req, res) {
res.render('admin.index', {
user: req.user || null
});
};
and when I hit localhost:3000/admin/ I get Error: Cannot find module 'index'

Rename the two view files from admin.index.server.view.html and admin.layout.server.view.html to admin-index.server.view.html and admin-index.server.view.html respectively.
Also, change this line in your core.server.controller.js file;
res.render('admin.index', {
to this;
res.render('admin-index', {

How to link JS route var and Symfony 2 URLs

I would like to know what is the most flexible solution to link SF2 routes & a JS var which is containing the routes.
For static routes, I don't have any problems, but when I want to connect URL with parameters, i did not find any solution (not hard-coded).
How can I do if I edit the routing.yml file, Dynamics URL on change
I'm using var url = "domain.com/path/to/url/with/" + token + "/and/" + name for generating but it is not flexible.
I know that twig generated urls are server side etc...
Any solutions ?
Ex :
JS
var route = {
home : "{{ path("home") }}",
custom_route : "{{ path("my_custom_route") }}"
}
Routing.yml
my_custom_route:
pattern: /path/to/url/with/{token}/and/{name}
defaults: { _controller: "SupboxCloudBundle:Public:file" }

I think you could try FOSJSRoutingBundle.

Well, this sort of depends on the result you are trying to achieve. Are you doing this in some sort of JS app?
If it were me, I would render the routes, or route parameters in the DOM. I wouldn't mess with rendering anything in the JS and I would make the JS code abstract.
For instance:
<div data-custom="{{ path("my_custom_route") }}"></div>
<div data-home="{{ path('home') }}"
or
whatever
then you can grab your routes in JS when needed (from the first example):
var route = {
home: $('div[data-home]').data('home'),
custom_route: $('div[data-custom]').data('custom')
}
This is a little messy as I'm just trying to show you a concept. However your actual implementation would depend on the actual result you are trying to achieve.
If you comment a more specific intent below I will provide a better solution for you.

How do I correct [object%20Object] in URL path when using EmberJS transitionToRoute from Controller?

I'm attempting to setup an action in a template to transition users to another route based on a dynamically generated navbar, using a combination of json / and js that is executed client side. I've managed to configure my application so that I can generate regular paths that work, but I would like to use transitions to avoid additional page loads.
A gist with what is (hopefully) the necessary information is:
https://gist.github.com/rjfranco/5289201
JS:
App.Router.map ->
#route 'index', {path: "/#{short_name}"}
#route 'customList', {path: "/#{short_name}/custom-list/:list_name"}
#route 'multiLevelList', {path: "/#{short_name}/multi-level-list/:list_name/:list_level"}
App.EventController = Em.ObjectController.extend
goTo: (navbar_icon) ->
#transitionToRoute navbar_icon.route, navbar_icon.context
# Sample passed navbar_icon
navbar_icon =
img_src: '/somesource_or_another.jpg'
display_name: 'My Link Name!'
route: 'customList'
context: {list_name: 'Exhibitors'}
template:
{{#each controller.navbarIcons}}
<li><a {{action goTo this}}><img {{bindAttr src="image_src"}} width="36" height="36" />{{display_name}}</a></li>
{{/each}}
The expected page actually loads fine, but the url the application transitions to is not correct, and refreshing breaks the application.
I'm expecting a URL along the lines of: /ruhaha/custom-list/Exhibitors
and I end up with one like: /ruhaha/custom-list/[object%20Object]
Slight update:
I've found that I could abuse a couple of methods on the app to produce the results I want:
App.handleURL('/ruhaha/custom-list/Exhibitors')
App.Router.router.replaceURL('/ruhaha/custom-list/Exhibitors')
This will actually trigger the route, and replace the url effectively transitioning my application to the state I want without a page request. Although this works I'm pretty certain this is the wrong way to take care of this issue.

I ended up resolving this issue (with some help from nerdyworm on freenode) by specifying a serialize method in my route that just returned the param I was expecting:
App.CustomListRoute = Em.Route.extend
serialize: (params) ->
params

How should I handle Asp.net MVC URLs in javascript calls?

I am attempting to write a javascript heavy portion of my Asp.net MVC Web App (this portion of the website is a RIA using Extjs). However, I have come up to a standstill at the correct way to handle URLs in the javascript.
For example, right now I have an Ajax call to the List action in the ObjectsController, which resides in the Reading area. The List action takes a parameter of documentId (int). As of right now, this maps to /Reading/Objects/List since I have no changed routing yet (the site is too young at the moment to finalize routes). Normally in a view, to put this URL in a string I would do #Html.Action("List", "Objects", new { area = "Reading", documentId = 3).
However, this doesn't work when dealing with javascript, since javascript isn't parsed by a viewengine.
To get around this, I have a very small view that returns javascript constants, such as URLs, that is loaded prior to my main application's js files. The issue is that I can't call Html.Action for this action because at constant creation time I (obviously) do not know what documentId the ajax calls are going to be, and if you exclude documentId from the Html.Action call an exception occurs. The documentId could change during the normal workflow of the application.
How do I handle this? I don't want to hardcode the URL to /Reading/Objects/List because if I change my routing for this (for a more user friendly json API), or this web app isn't hosted on the root of the domain, the URL will no longer be valid.
How does everyone else handle MVC URLs in their javascript calls?

Here's a safe technique that I've been using. Even if your route changes, your JavaScript will automatically conform to the new route:
<script>
var url = '#Url.Action("List", "Objects", new { area = "Reading", documentId = "_documentId_")';
var id = 100;
var finalUrl = url.replace('_documentId_', id);
</script>
"_documentId_" is essentially a dummy placeholder. Then inside my JavaScript, I replace "_documentId_" with the proper id value once I know what it is. This way, regardless of how your route is configured, your URL will conform.
Update: Dec 20
I just saw this interesting blog post. The author built a library that allows you to build routes inside of your JavaScript file with intellisense support in VisualStudio.
http://weblogs.asp.net/zowens/archive/2010/12/20/asp-net-mvc-javascript-routing.aspx

Personally I use unobtrusive javascript and avoid mixing markup with javascript. AJAX calls are normally triggered by clicking on some buttons or links:
#Html.ActionLink("click me", "List", "Objects",
new { area = "Reading", documentId = 3 }, new { id = "foo" })
and then in a separate js file I would attach and handle the onclick event (example with jquery):
$(function() {
$('#foo').click(function() {
$('#resultDiv').load(this.href);
return false;
});
});
As you can I didn't need to use any hardcoded URL in my javascript file. URLs should always be handled by the routing engine and generated with html helpers.
If it was a <form> instead of a link I would simply handle the onsubmit event (the same way) and use the form's action attribute to get the URL.
UPDATE:
After pointing out in the comments section that the documentId is known only at client-side you could do this:
#Html.ActionLink("click me", "List", "Objects",
new { area = "Reading" }, new { id = "foo" })
And then:
$(function() {
$('#foo').click(function() {
$('#resultDiv').load(this.href, { documentId: '123' });
return false;
});
});

Turns out, this was all solved by using Url.Action() instead of Html.Action(). Url.Action() is (so far) allowing me to generate URLS without all of the parameters. I am assuming that this only works when the route does not specify the parameters in the target URL itself.