I am trying to beautify an angular site. The trailing hashtag is a pain and it is conflicting with how Spiders crawl the site. So basically domain.com/about is shown domain.com/#/about, but when spiders hit the non-hashtag version they get a 404. Long story short, I want the hashtag gone lol
I followed this SO Question and it got me pretty far by using the code below.
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
I was able to get rid of the hashtag. But only on the home page. Any other page got even weirder.
Now the domain.com/#/about actually looks like domain.com/#%2Fabout.
Can anyone tell me how can simply get rid of the hashtag?
May be you have an anchor tag like this:
<a ng-href="#/about">About</a>
Replace #/ with /. So modified anchor tag should look like this:
<a ng-href="/about">About</a>
Hope this solve your problem. If it does not solve your problem, please add detail code. Without detail information, it is difficult to answer question.
Related
So in my angular view I have this:
<div id="submenu" ng-include="'/submenu.html'" ></div>
But when I visit the page, the HTML part is:
<!-- ngInclude : '/submenu.html' -->
I put this line of code in other pages and it renders correctly. Only on one page it gets commented out.
What should I do, how can I fix this? I never saw this bug before.
Thanks
edit
I just checked and the code does not even perform a GET for this particular html file.
edit
I just remove the complex parts out of the age and now is just
<div id="submenu" ng-include="'submenu.html'" ></div>
<div id="anothersubmenu" ng-include="'anothersubmenu.html'" ></div>
and no one of these files render, they both get commented out. My controller looks normal. I view this on Chrome 49.0.2623.87 m. All the included files have the same id , everywhere I include them. All the files are in the same folder.
I dont know is there a limit on the ng-include?
Thanks
I had the same scenario but I created the ngInclude element using
angular.compile and I also got
<!-- ngInclude : '/file.html' -->
and I did not see any requests going out from my browser to get the file
Finally I resolved the issue using the
scope.$apply()
The digest cycle had to happen before the actual including can take place.
hope it helps :)
I am using AngularJS to develop an Chinese website. I used ui-router to manage the URL links, and the params for the URL is in Chinese.
Here is the code, schoolName is an variable in controller, and the value is Chinese characters:
<a ui-sref="showSchools({name:schoolName})" > 查找</a>
The problem is it will generate URL like:
http://localhost:8080/#/showSchools?name=%E7%A6%8F%E5%BB%BA%E7%9C%81%E9%97%BD%E4%BE
But i want the link to be like:
http://localhost:8080/#/showSchools?name=第一中学
I tried encode param into utf8 with encodeUri filter: https://github.com/rubenv/angular-encode-uri, but it does not work.
Is there anybody know how to show Chinese characters in the URL?
This might be too late but I thought it might help.
I too had this same issue while trying to display chinese characters in the url while testing a angular app (with ui-router) with localhost.
The urls used to appear as below:
http://localhost:56066/#/map/%E6%B1%9F%E8%8B%8F
But as soon as I added the below line to clean up the url:
$locationProvider.hashPrefix('!').html5Mode(true);
The urls now appear as below (which is what I hoped they would look like):
http://localhost:56066/map/黑龙江
I haven't yet figured out why cleaning up the url helped!
I am using angularjs from 2 months but never comes to problem like this, so thought of sharing with you people and getting some good suggestion on that. Here I am trying to apply ul/nav-group element dynamic values. Everything is working fine means, if I see developer tools on browser it gets value and everything, but not the +/- sign. I search on google its saying that it loads after DOM creation so it is not showing that. But no buddy tells the solution for that.
Consider my code:
<nav:group ng-repeat="parentChild in parentChildList" title="{{parentChild.filterText}}">
<nav:item data-view="/ui/icons/fa" ng-repeat="childs in parentChild.childList" data-icon="fa fa-lg fa-fw fa-plane" title="{{childs.filterText}}" />
</nav:group>
The value for particular fields are straight forward means its simple list.How the directive can solve this problem.
Appreciate any suggestions . Thanks.
Add an ng-cloak directive on the body tag of your app to prevent loading the element until angular has finished loading.
Your body tag would look like this:
<body ng-cloak>
...
</body>
You could also fix this by using promises in your services, that is definitely the best practice regardless, but ng-cloak is a quick and easy fix.
Hope that helps! If ng-cloak doesnt work for you post snippets of your controller and service and I will help you add promises.
Good Luck!
-Justin
Is it possible to set ng-href to go to the current page?
eg:
<a ng-href="https://www.facebook.com/sharer/sharer.php?u={{ window.location.href }}">facebook</a>
When the above runs, I keep getting:
<a ng-href="https://www.facebook.com/sharer/sharer.php?u=" href="https://www.facebook.com/sharer/sharer.php?u=">facebook</a>
How are you setting value to window.location.href ? This sure doesn't look like native JS.
Here's a fiddle to help you out.
ng-href is part of AngularJS and there are a few ways to point to the same page. The method I use do not include the domain so the Angular Router will direct it as needed, like the following.
ng-href="/mySubDomain"
The Docs go into detail about this and give a nice code sample that shows you what you should expect from the route change.
https://docs.angularjs.org/api/ng/directive/ngHref
I have a page /hello where i have a link:
<a href="{{#url 'goodbye' }}{{/url}}">
that will redirect to /goodbye. But i want it to use an anchor too, something like /goodbye#message
I have tried doing:
<a href="{{#url 'goodbye' }}{{/url}}#message">
but when I click on it, it will redirect the page to /goodbye. It seems like Chaplin is deleting the anchor.
EDIT:
For the templates I'm using handlebars (with the chapling boilerplate), the {{#url}} helper generates correctly the link ( cf view-helper.js ). In the rendered page i see:
<a href="/goodbye#message">
but when i click on it, it just redirects me to /goodbye
Any idea?
Found a solution, I needed to stop the routing on the link. I just added the class noscript on the tag
<a href="{{#url 'goodbye' }}{{/url}}#message" class="noscript">
I couln't find a different way to do it. Hope this helps someone else
cf : skipRounting on Chaplin.Layout