Develop Reference

Angular URL's not working but ui-sref does

So this may be a dumb mistake but I have an angularJs application and I have ui-router changing the states. I am able to navigate to the different pages by ui-sref and $state.go() but for some reason if I type the url directly into the browser I get back the error cannot GET .... I have no clue why, but here is the config code and a state setup:
App Config:
.config(function ( $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/');
});
Items Page component/controller/state config:
(function(){
'use strict';
angular.module('app')
.component("itemPage",{
templateUrl: 'app/itemPage/itemPage.html',
controller: itemPageCtrl
})
.config(['$stateProvider',function ($stateProvider) {
$stateProvider
.state('item', {
url: '/item',
template: '<item-page></item-page>'
});
}]);
function itemPageCtrl(){
var ctrl = this;
}
})();
Just to reiterate, if I am the main page of my site and I click a button I can get to items page with ui-sref or $state.go() but if I try to put the url directly in localhost:9000/item or if I am already on the page and click refresh it gives the cannot GET /item message.
Any help will be greatly appreciated and I can give more code if needed.
Thank you.

You should make a config on your server to redirect all requests to the entry point file (usually your index.html), using a .htaccess file for example in Apache.
This question was already made sometimes;
Reloading the page gives wrong GET request with AngularJS HTML5 mode
Configuring on an Apache server: htaccess redirect for Angular routes
Configuring on a Node server: Node.js catch-all route with redirect always renders index page with Angular regardless of url

$state.go changing url having /#q=hello to /#/q=hello

I am working on a chrome extension which injects some content script in google.com.au. That content script then loads up an angular ui router based app having a small interface. I am using $state without url. So only templateUrl and controller. The problem is when I use $state.go('home') to go to home page of my small app, $state.go in internally changes the location or url from for e.g.
(1) :- https://www.google.com.au/#q=hello
to
(2) :- https://www.google.com.au/#/q=hello
(there is an extra / after q)
the second url is invalid one which redirect me back to google.com.au.
Also, its worth mentioning that - the same app worked fine when I injected it in a linked search results page whose url didn't have any # in it.
Also, I have tried variations like $state.go and $state.transitionTo with third parameter of {location:false ....}. but it stills changes the urls like above.
I am stuck and not able to go ahead with logic ahead.
here is screencast of the problem.
http://screencast.com/t/ZrBtlkU3z
Any help will be highly appreciated.
Thanks in advance.
Update
Here is an example chrome extension containing the mentioned problem.
https://Vikasg7#bitbucket.org/Vikasg7/example-app.git
Please load this as unpacked extension and try to go to
https://www.google.com.au/#q=hello
before and after loading the extension to see the problem I have mentioned above.
Hope this helps you experts resolving the issue.

I think this is the intended behaviour of ui-router. You might need to use native javascript for this one (window.location.href = 'XXX') or maybe $location to set the hashbang exactly like you want.

Ok, After so much of research and hit and trial.
here is the code that won't change the url when changing states.
I had to use html5Mode. More detailed info and usage can be found here.
https://docs.angularjs.org/guide/$location#html-link-rewriting
stackoverflow post
AngularJS 1.1.5 - automatically adding hash tag to URLs
angular
.module("app", ["ui.router", "app.services", "app.directives", "app.controllers"])
.config(["$stateProvider", "$locationProvider", function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false,
rewriteLinks: true
}).hashPrefix("!")
}])
hope this helps, someone out there!

Angular (ui-router) Routing not fully working? Can't directly access to url w/o going through base url

Hello to everyone thanks in advance for your help,
I am having tough time trying to figure out why my routing is not fully working. I am going to explain.
I do have a nav bar with dropdown options which leads to the routes I've defined on my angular app config stage.
HTML
<head>
...
<base href="/">
...
</head>
...
(inside navbar)
<ul class="dropdown-menu">
<li><a ui-sref="Check">Check</a></li>
</ul>
...
JS (config)
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
controller: 'HomeCtrl',
templateUrl: 'app/components/home/home.html'
});
// SERVICE VIEWS =================================
$stateProvider
.state('Check', {
url: '/Check',
templateUrl: 'app/components/Check/Check.html',
controller: 'CheckCtrl'
});
$urlRouterProvider.otherwise('/');
}]);
Everything runs great when I do access through the home (through index.html -> click on the navbar and access Check) It loads the template properly.
But when I am trying to access directly to that view nothing gets loaded at all. Blank screen.
To sum up:
Action:
Access localhost:8080 -> All runs OK
Access localhost:8080/Check directly -> Not a single thing is loaded.
No idead what I am missing here.
Thanks for your time and support.

Can you put your server.js file ?
I think you lack some line which should look like this :
app.use("/app", express.static(__dirname + "/app"));

From the frequently asked questions on their wiki:
How to: Configure your server to work with html5Mode
When I add $locationProvider.html5Mode(true), my site will not allow pasting of urls. How do I configure my server to work when html5Mode is true?
When you have html5Mode enabled, the # character will no longer be used in your urls. The # symbol is useful because it requires no server side configuration. Without #, the url looks much nicer, but it also requires server side rewrites.
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
How to do that depends on the type of server you are running, it's all explained in the article linked above.

Angular redirect/break page after manual refresh

I made simple angular application with simple routing.
angular.module("mainApp", ["ngRoute"]);
angular.module("mainApp")
.config(function ($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: "views/main.html",
controller: "MainController"
})
.otherwise({ redirectTo: "/main" });
});
Start "mongoose-free-6.1" server, and first time when I open my page everything works fine. My main page path is:
http://192.168.0.16:8080/EventManagementMobile/EventManagementMobile/#/main
After first manual refresh on the page I get route:
http://192.168.0.16:8080/main#/main
Page is broken and in console I get error:
GET http://192.168.0.16:8080/views/main.html 404 (Not Found)(anonymous function)
Error: [$compile:tpload] http://errors.angularjs.org/1.5.2/$compile/tpload?p0=views%2Fmain.html&p1=404&p2=Not%20Found
at Error (native)
The same happens when I start it from VS2015 in IISExpress. First route work fine:
I probably do not understand how routing works. What happens here ?

This problem was caused by synfusion library loaded on page together with angular. Answer from synfusion support team:
The script file ej.mobile.all.min.js is a collection of Essential
Studio JavaScript Mobile components. In that, AppView acts as a base
container and master page for the Mobile application. We have handled
the history navigation internally for Single Page Applications, which
interfere for Angular routing. Hence for Angular routing, we need to
prevent the initialization of AppView. Refer to the following code
example.
[html]
<script>
App.preventAppviewInit = true
</script>
The above mentioned script have to be referred next to
ej.mobile.all.min.js script reference.
Link to the original question and answer:
http://www.syncfusion.com/forums/123560/loading-syncfusion-scripts-on-page-break-angular-routing

Cannot route to a url with a different protocol with angularjs

I am trying to open an application client side and I have developed this entire application using only angularjs as a front end. It seems to be hijacking the routing and disallowing this.
In old javascript I used to be able to do
var wnd = window.open("dynamicsnav://arbitraryLinkDetails", "_blank");
wnd.close(); // this opens the protocol to start the application client
// side and closes the extra browser window
to open the Nav application client side and the details of what to open in place of arbitraryLinkDetails.
Now when I do this inside of my angular app it appends localhost to the url(really it is the base domain it attaches) like this
"http://localhost/"dynamicsnav://arbitraryLinkDetails""
which does not work.
Things I have tried
appending "//" to the url to break out of the angularjs routing, this tacks on a %22 to the beginning and removed the : for the protocol like "%22dynamicsnav//arbitraryLinkDetails"
I have tried modifying the routing so
var redirectFunction(){
return theUrl; //this gets the full url of dynamicsnav://arbitraryLinkDetails
}
$routeProvider
.when('/NavUrl', {redirectTo: redirectFunction})
and that again appended base url to it.
This is a requirement for my current project and I simply cannot figure out a way to open this like I used to with angularjs.
I verified the url's I am testing with work in another application not using angular. Thanks for any help!

The AngularJS $routeProvider service manage routes that deep link controllers with views, wich is not your case, why don't you try this :
var redirectFunction(){
window.open("dynamicsnav://arbitraryLinkDetails", "_blank");
}
$routeProvider
.when('/NavUrl', {redirectTo: redirectFunction})