I have a route in app.js like
.when('/provider/:id/app/:aName', {
templateUrl: 'templates/provider/form.html',
controller: 'YourController'
});
in html:
<a class="btn btn-warning" ng-href="#/provider/{{id}}/app/{{appName}}">Edit</a>
However my appName will contain slashes, such as abc/test
so with inputs id = 1 and appName = abc/test, href will become
<a class="btn btn-warning" ng-href="#/provider/1/app/abc/test">Edit</a>
This is causing a problem, because my code presumes that the slash in the application name represents a different section of the website, the above href fails. So the URL will fail.
How to manage the app name with slash in url that is abc/test. Any help on this will be really helpful.
I have looked into this post stackoverflow, but unable to implement the same in my code. If I replace / with %2F then the app name changes. How to encode URL without affecting the actual app name
Related
In my Angular 5 Application I am doing something like this at
this.returnUrl = this.route.snapshot.queryParams['returnUrl']
I am using this when a user accesses a route but it's not logged in. He is redirected to the login page and after login he should be going back to this return url.
The problem is that http://localhost:4200/schedule?selectedDate=2018-01-29 when accessing this route, the return url becomes:
http://localhost:4200/login?returnUrl=%2Fschedule%3FselectedDate%3D2018-01-29 and after the successful login, the application tries to go to the http://localhost:4200/%2Fschedule%3FselectedDate%3D2018-01-29 URL but that throws a 404 error since it does not recognize the path.
Any idea how can I stop Angular changing my url to this format ? I was assuming that it would pick up the correct URL.
I managed to somehow fix this by instead of using
this.router.navigate(this.returnUrl)
I used
this.router.navigateByUrl(this.returnUrl);
i think You can simply add the url like this <button class="btn btn-md btn-danger pull-right" routerLink="../../">cancel</button>
or else call click event
Use this.
this.returnUrl = decodeURIComponent(this.route.snapshot.queryParams['returnUrl']);
I am making an application with Angular JS as frond end and Laravel as back end.
I having a list of master data table view and a delete and edit options.
<a class="resedit btn btn-sm btn-default" href="{{URL::route('edit_repair_category',[[category.id]])}}/"><i class="icon-note"></i></a>
<a title="Delete" ng-click="deleteRow($event,category.id,'{{URL::route('delete_repair_category')}}',currentPage)" class=" btn btn-sm btn-delete"><i class="glyphicon glyphicon-trash"></i></a>
Above I am generating URL of Edit page with Laravel URL Generator, But I want to pass the ID of the master data to fetch the data from controller.
I am using [[ ]] for Angular JS bindings.
URL::route('edit_repair_category',[[category.id]])
Now I got the exception Use of undefined constant category - assumed 'category'
Routes.
Route::get('edit-repair-category/{id}', ['as' => 'edit_repair_category', 'uses' => 'RepairCategoryController#editRepairCategory']);
Is there any possibilities ?
The reason you're getting this error is because you're mixing javascript and PHP.
The PHP portion of you code is going to be processed on the server and then passed to the browser where the javascript is then going to be processed, so as far as PHP is concerned you are trying to use a constant.
Since category.id is just going on the end of the url you should be able to do something like:
<a class="resedit btn btn-sm btn-default" href="{{ URL::route('edit_repair_category', null) }}/#{{category.id}}"><i class="icon-note"></i></a>
null is being used here to prevent an error being thrown.
The # before {{category.id}} just tells blade to treat this like a normal string and not to do anything with it (the # symbol will be remove by blade).
Hope this helps!
I am learning angular js , and I found this in some tutorial while explaining routing.
module.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/users/', {templateUrl: 'template.tpl.html', controller: myCtrl}).
when('/users/:userId', {templateUrl: 'template.tpl.html', controller: myCtrl})
}]);
What is this :userId in the link ? what i know is suppose we have a folder template in that if we have anotherfile user we will put the link as "template/user" , I also know this userID will be used in routerParams as a parameter for route's controller but what exactly is the meaning of : in the link above ?
This represent a parameter
In this case the parameter is userID thus those urls
domain.com/users/0
domain.com/users/1
domain.com/users/2
will call the same route with userID 0, 1 and 2
:userId repesents the dynamic part of url. The value can be anything.
It is generally used for id as you can see. Used for creating dynamic routes.
Other frameworks like nodejs, in php also uses this technique.
It is RouteParamater
let user have name and id
For example you have list of names of users in one page and when you click
a user it takes to another page which shows users detail.So to let the detail page know about the clicked user you must send some identification maybe in this case userid.
Example
{{user.name}}
And access it via routparams
//Inject routeparams
var userId = routeparams.userId //user Id is defined in your route configuration
I'm working on the routing of my angular application, but I can't seem to find the following:
example.com/#parameter
In this url the #parameter should stay #parameter and get the param data. Now it removes the # and goes to example.com/parameter
If I go to example.com/#parameter it should do the same as it would if I go to example.com/parameter
I have the following in my app.js
url: "/:bandName"
and send this data to my controller with $stateParams
Is there any way to keep the hashtag in the url ?
-- edit
so here is some code that works on enter with /#parameter
$urlRouterProvider.when(':#bandName', '/:bandName')
.otherwise('/');
$stateProvider.state('appband', {
url: "/:bandName",
templateUrl: "main.php",
controller: 'mainController'
})
$locationProvider.html5Mode(true);
With this if I go to example.com/#randomBandName I get redirected to example.com/randomBandNameand I get randomBandName as parameter in my controller
So what I need is on enter that example.com/#randomBandName stays example.com/#randomBandName and that I still get randomBandName in my controller.
But when I remove $urlRouterProvider.when(':#bandName', '/:bandName') I just get an empty page.
There are a few things that look suspect with this:
trailing slash
Are you using HTML5 mode for your URLs? I'd suggest using this URL setup url: "/parameter" if you indeed see param as more of a resource.
You might also read this - https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-make-a-trailing-slash-optional-for-all-routes
query param
If you are intending param to be a query parameter then you need this..
url: "/?parameter"
more on that here - https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters
Anyone can help me on how to remove or replace existing link in JS templating. I use backbone.js for this.
Here is my code:
<script id="option-show-template" type="text/template">
<address>
<abbr title="Website">Web :</abbr> <%= (website)? '' + website + '' : '' %></address>
</script>
Output:
Web: www.test.com
The Problem is even though it will output the correct data but the href attr is not totally display the correct one. My localhost/testserver includes in the href attrib.
Web: www.test.com
What I want is to remove the default base url. Must be output like this way:
Web: www.test.com
Add http://
Try This
<abbr title="Website">Web :</abbr> <%= (website)? '' + website + '' : '' %></address>
What is wrong here??
The problem with your implementation is, when you set href attribute without any protocol(http, https, ftp etc) the browser treat the link as relative path. so when you are viewing the page on http://localhost/testserver/ the url for your page become localhost/testserver/www.test.com
How to fix??
In short, to fix the problem you need to add http:// before your url if there is not any. You can do it in many ways, like :
Update your template as Nitish Kumar suggested.
replacing all url prepend with http:// using jquery
.... or many other ways!!!
The option 1 or 2 is easy enough to implement and would solve your problem, if your are sure your URLs will be always like your example. But will fail for following use cases:
If your url already got a protocol(i.e. http://google.com). Then your URL will become http://http://google.com
If your url is really a relative url(i.e. my/relative/url). Then it should be stay as it is but you will get invalid url without a domain - http://my/relative/url
The ultimate solution!!
So you can use following function to fix your URLS
//Check if it is a valid URL with FQDN
function isValidUrl(url) {
return url.match(/((ftp|http|https):\/\/)?[\w\-]+\.[\w\-]+/);
}
//Check if the url already contain a protocol or not
function hasProtocol(url){
return url.match(/(ftp|http|https):\/\//);
}
//Fix your URL only if needed!!
function setHttp(link) {
return (!isValidUrl(link) || hasProtocol(link)) ? link : 'http://' + link;
}
You can use this function in several way to fix your problem. a sample implementation you can find here
Happy coding!!
The href must start with the protocol if you are using an absolute path. Without the protocol, the browser is going to interpret it as a relative path, leading you to get something like localhost/testserver/www.test.com.
I believe the only real solution to this is going to be to add the protocol to your href.
Are you copying the URL out? www.test.com isn't a valid fully qualified URL. You'll want to prepend http:// to your URL. The only other way that could be entering into things is if the 'website' variable contains that information, which I don't quite get from your question.
Your question is phrased a bit oddly and the example you provide isn't quite sufficient to suggest more at this point (although I will say that I generally discourage ternary operations inside of template echos like you've got).
replacing url prepending with http://. This should get your problem solved