We are working on website where we using AngularJs. Is there any way to make AngularJs user-friendly urls and seo-friendly urls
Want
application/#user/add
to
application/User/Add
In AngularJs.
HTML 5 mode convert hash based urls into Query string based url.
like
Hashbang URL - http://foo.com/#!/bar?baz=23#baz
HTML 5 Mode - http://foo.com/bar?baz=23#baz
But I want make my url like this
http://foo.com/bar/baz/23/baz (Fully SEO Friendly url)
The default mode is called the Hashbang mode, which has the # you do not want. You can enable HTML5 mode with $locationProvider.html5Mode(true);
Read more about setting up routing in HTML5 mode here: https://docs.angularjs.org/guide/$location
https://docs.angularjs.org/api/ng/provider/$locationProvider
The best solution as far as I am looking for my angularJS website is is AngularJS SEO PreRender: Node server that uses phantomJS to render a javascript-rendered page as HTML. To be used in conjunction with prerender middleware.
https://github.com/prerender/prerender
Related
I am using Angularjs to build a web app but I am getting http://localhost:3000/#!/ instead of http://localhost:3000/ when I go to my index page.
I couldn't figure out why it's happening.
Some help would be great.
The hashBang #! is usually added by angularjs between the url and the angular routes. You can disable it in the .config() using $locationProvider and setting the html5Mode to true like so :
.config('$locationProvider', function($locationProvider){
$locationProvider.html5Mode(true);
})
Using HTML5 mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html). Requiring a <base> tag is also important for this case, as it allows AngularJS to differentiate between the part of the url that is the application base and the path that should be handled by the application. For more information, see AngularJS Developer Guide - HTML5 Mode Server Side.
I'm getting really frustrated with configuring the Routing on our app, which is using sailsJS and angularJS.
The problem is, that the browser doesn't know about angular, so any request like /login returns a 404 Error from sails. I need a solution, to keep the sails routes from the angular ones,
One solution would be to disable html5Mode, but i really don't like the look of URLs with the /#/ which is typical for angular.
I have researched a lot on this and haven't yet found a good answer or maybe a working project for this.
Is what I am trying to do even possible right now?
If you're using HTML5 mode with Angular, then you need to configure your web server (in this case SailsJS) to respond with your index.html file for requests to /login or any arbitrary routes.
If you navigate directly to http://localhost:3000/login in your web browser (assuming you're running Sails on localhost:3000), Sails needs to respond with your index.html so that your Angular app can bootstrap and then display the appropriate route. Then, subsequent links that the user clicks on in your app will be intercepted directly by the Angular router instead of Sails directly.
Angular has documentation about making HTML5 mode work correctly here.
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html). Requiring a <base> tag is also important for this case, as it allows Angular to differentiate between the part of the url that is the application base and the path that should be handeled by the application.
I'm migrating an app to AngularJS, I want to do it in a modular way, just parts by parts. For now, the URLs are not to be handled by Angular. But when I use ng-include angular automatically starts rewriting the URL, for no reason, since ng-include got nothing to do with the URL.
So I'm trying to use an Angular module in a page with the website.com/#somethingAfterTheHash URL, and when I use ng-include, the URL turns into website.com/#/somethingAfterTheHash. And the app breaks.
Is there a way to stop Angular? Or will be better off trying to stop the app from breaking?
You can configure angular not to use it like this: $locationProvider.html5Mode(true). Read more about it here. The hashtag is used for older (non-HTML5) browsers.
To configure the $location service, retrieve the $locationProvider and set the parameters as follows:
html5Mode(mode): {boolean}
true - see HTML5 mode
false - see Hashbang mode
default: false
I'm making an entire site using angular. Using routes the urls come out to www.mysite.com/#/mypage. I'd like this to change to www.mysite.com/mypage without navigating away from the page and do screenshots for google bots. How can I do this with angular?
You need to follow Google rules regarding SPA crawling.
1) Enable Angular HTML5 mode and hashbang prefix with :
$locationProvider.html5Mode(true).hashPrefix('!');
So you will have standard urls (www.mysite.com/mypage) on modern browser for your users, and hashbangs urls (www.mysite.com/#!/mypage) for old browsers and crawlers.
2) Add <meta name="fragment" content="!" /> to your head
3) For each angular pretty url ( #!/mypage/key=value) your server also need to serve ugly urls (#!/mypage?_escaped_fragment_=key=value) with an HTML snapshot. You can use PhantomJS for this.
And you are done, but for best results also implement canonical urls.
I'm having trouble with the routing, it's all works fine when I route between pages using
<a href="/someurl"> on the page.
When I input the link directly into the browser with the # like http://localhost/#/someurl it works fine also.
But if I enter it without the # like http://localhost/someurl I get Cannot GET /task/2
I'm using the HTML5 mode in angular $locationProvider.html5Mode(true); The backend is Web API build with MVC4 C# so only routing is controlled with app.js (angular)
If you want to use the $locationProvider's html5Mode, you'll have to couple it with some server tweaks so that your web server knows to serve up the same content regardless of path.
If you're using Apache for example, you can use mod_rewrite.