I am working on a project where I am using Angularjs (1.x) as web framework. In that app, I needed routing, so I am using angular-ui-router. I configured the routes in my app and its working fine, but exclamation(!) in routes is not clear to me and why these exclamation comes to routes.
Also, I saw demo example code provided by angular ui router . In Hello World tutorial, I observed that routes are with hash(#) but not with exclamation(!) eg: https://some_url/#/home
but in Hello Solar System tutorial routes are with hash(#) and exclamation(!) eg. https://some_url/#!/hello.
Config for angular ui router in both tutorials are in same way. Thats why I am not able to understand what exactly is making the difference in both of them. So, I need help to understand this.
Any useful suggestion will be appreciated.
Thanks!
To let everyone know the answer for this question, adding what I understood from comments.
This change can be observed in angular version > 1.6.x. In previous version it was like just # (hash bang) only.
To get url like # way only, you can simply write in this way,
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
This change was introduced in version 1.6.0, which you can see https://github.com/angular/angular.js/blob/master/CHANGELOG.md#location-due-to.
Also, adding here what is written there:
The hash-prefix for $location hash-bang URLs has changed from the empty string "" to the bang "!". If your application does not use HTML5 mode or is being run on browsers that do not support HTML5 mode, and you have not specified your own hash-prefix then client side URLs will now contain a "!" prefix. For example, rather than mydomain.com/#/a/b/c will become mydomain.com/#!/a/b/c.
Related
I'm a newbie in js, I follow this example to study how to route UI in SPA with angularjs.
When I download and run this example, the URL is
"http://localhost:8080/#/home"
but when I start to create my sample myself, the URL always is
"http://localhost:8080/#!/home"
I don't know the meaning of "!" symbol in the URL. My sample still work but the "!" inside the URL make me confuse, I wonder that "something was missing, isn't it?"
Please teach me or give me some keywords to understand the problem deeper.
Thanks
It is called Fragment_identifier
The $location service is designed to support hash prefixed URLs
for cases where the browser does not support HTML5 push-state navigation.
The Google Ajax Crawling Scheme expects that local paths within a SPA start
with a hash-bang (e.g. somedomain.com/base/path/#!/client/side/path).
The $locationProvide allows the application developer to configure the
hashPrefix, and it is normal to set this to a bang '!', but the default
has always been the empty string ''.
This has caused some confusion where a user is not aware of this feature
and wonders why adding a hash value to the location (e.g. $location.hash('xxx'))
results in a double hash: ##xxx.
This commit changes the default value of the prefix to '!', which is more
natural and expected.
See https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
Referred from
and please visit here : URL hash-bang (#!/) prefix instead of simple hash (#/) in Angular 1.6
I am currently working on a project using Django and Angular. I am trying to implement Django's Password-Reset app, which seems pretty easy to set up. I followed the instructions and I ran into a peculiar issue that is caused by Angular's routing. I am trying to link to a FormView using
Forgot password?
But it seems that Angular's routing keeps picking up the literal translation of the link
http://127.0.0.1:8000/%7B%%20url%20'password_reset_recover'%20%%7D
This of course causes a routing error to pop up.
Is there anyway I can link to this view without Angular interfering?
Looks like the problem is that Django is not parsing your URL tag in the template. Might want to look into that rather than into Angular
Could you check the a tag in your Developer tools and see what it says? Chances are that it says exactly what the URL is pointing to.i.e. /%7B%%20url%20'password_reset_recover'%20%%7D
Have you added password_reset_recover in your root urls.py?
I'm working on a big project. This project already has complicated structure. Most pages are generated on server-side with Twig.
Now we move the project to AngularJS.
It is not possible to use angular-way routing on whole project just now. But somewhere, it is necessary.
And here comes our trouble.
If I add 'ng-app' in html tag, for example, on some pages angular add hash in url.
And what is strange for me, that it's not everywhere.
On start page (project/profile9868766), url is clear as it is. But on some other (project/community/list), angular does something like that: project/community/list/#list .
And it is extremely undesirable.
There are no any angular routes, configured in $route service yet.
Please, help me to find out what causes that behavior, and what should i do to make all the things to go right way.
I want to add ng-app in html tag and not get any troubles with existing code, that may use hashes. And I want to use angular directives, controllers and other stuff, including $location service to set and track hashes on some pages. And later move everything to Angular and only after that start using Angular routes.
Thanks!
PS: English is not my native language, sorry about some weird constructions and mistakes. ))
Make sure to turn on html5mode
http://docs.angularjs.org/guide/dev_guide.services.$location
But the hash is inevitable on non-html5 browser.
The latest version of angular (v1.0.7) seems to have fixed this issue.
I know one can host a Jekyl based static site/blog via Github pages. Can one do the same with a static site/blog based on AngularJS?
You can but you can't use html5 mode (removes the # from urls). If you use html5 mode, you have to redirect all requests to the root url since its a single page app. Since you can't use server side code on GitHub pages, you can't do this. So, if you don't mind the # in the url, go for it. If you want to use html5 mode, you need to look for hosting elsewhere.
From the Angular docs...
"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)"
EDIT:
You can make use of some clever hacks to make this work if you really want to. The hacks are outlined in detail here. In summary, you rename your index.html to 404.html and github will serve it at all routes
I would say yes considering all the angular UI github pages are in fact angular apps with demos:
http://angular-ui.github.io/
http://angular-ui.github.io/bootstrap/
etc
There is one conflict between Jekyll and Angular to be aware of.
Liquid, which is included in Jekyll also uses {{ }} for evaluating expressions. To change the expressions that angular interprets (so it doesn't conflict with Liquid) use:
var myapp;
myApp = angular.module('myApp', []);
myApp.config([
'$interpolateProvider', function($interpolateProvider) {
return $interpolateProvider.startSymbol('{(').endSymbol(')}');
}
]);
Check out this blog post
Yes, you can. I recently played around with AngularJS/Typescript and github pages and was able to deploy the site.
Since AngularJS is just javascript, you can actually use any decent webserver, e.g. github pages.
Here is the demo.
You can find source code here. This repository contains typescript source code which you have to compile in order to get the appropriate javascript file. Then you basically put this include this file into your index.html and you are done.
I've been trying to get various routes bookmarkable within my app, and this is possible if I don't have pushState enabled. A user can enter mysite.com/#/view/30 and the proper view renders.
However, if I were to enable pushState and go to mysite.com/view/30 I receive a parse error (navigating there via the root page works fine).
I'm currently utilizing the Backbone.js Boilerplate using Require.js, and the parse error is appearing in my config.js file. I'm fairly certain the issue isn't with Require but I'm not completely sure. Frankly, I don't necessarily know what code to paste here either because I believe I'm more lacking a fundamental understanding a difference between hashbangs vs. pushState.
I've read up on the HTML5 feature, however the answer to my specific question still eludes me.
The page with your Backbone router on does not exist at the path you are pointing to in your pushState. The pushState is purely to change the URL representation. You'd have to do some server config changes to route all of your requests back to a main index file.