Develop Reference

AngularUI Router - Unable to access States via URL

So having an issue with AngularUI Router. The problem I'm having is it's unable to access any states via entering the URL or refreshing while on a state other than home. The returned error is Cannot GET /state-name however the ui-sref="state-name" works perfectly fine.
Not using a Node server or Express routing, just Angular and running web server using Gulp-Connect.
Technology:
AngularJS 1.5.3
Angular UI 0.2.18
Gulp 3.9.1
Routes.js
angular.module('myApp').config(function(
$httpProvider,
$stateProvider,
$locationProvider,
$urlRouterProvider
){
$locationProvider.html5Mode({enabled: true, requireBase: false});
$stateProvider
.state('home',{
url:'/',
templateUrl: 'path/to/home.tmpl.html'
})
.state('state-name',{
url:'/state-name',
templateUrl: 'path/to/state-name.tmpl.html'
});
$urlRouterProvider.otherwise('/');
});
Is there something I'm missing to allow for refreshing on a state or navigating via URL?

You should have a state called state-name to be able to access it. From your state providers, I can't see any state with this name state-name. Currently your available states are home and route_1.
To access 'state-name', you need to add this state:
.state('state-name',{
url:'/state-name',
templateUrl: 'path/to/state-name.tmpl.html'
})

For accessing the URL directly, using the state's name, you need to use the bang notation. For example:
For home: http://localhost/#!home
For state-name: http://localhost/#!state-name
Of course, substitute http://localhost by your host + context + whatever you need.

Redirect to route not working in Angular

I'm having a problem redirecting to a route which may be a result of a lack of understanding about how it's supposed to work.
Here is my routeProvider:
app.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
$routeProvider.
when('/', {
templateUrl: '/Content/templates/landingPage.html',
controller: 'HomeController'
})
...
A user in my app can log in at any time and when they do I want to redirect them to my home route. Eg:
function loginSuccessful() {
$location.path('/');
}
I'm trying to test this on a registration confirmation page I have which is on the following URL:
http://localhost:55841/account/register?token=da924359-130a-4a5c-9b8e-4f44267b4d6e#/
When loginSuccessful() is called, rather than redirect, it simply appends #/ to the URL. I'm expecting it to redirect to the app root (http://localhost:55841/).
Thanks in advance.

AngularJs, Phonegap, Router and uiRouter

This is driving me crazy.
I have a HREF within one of my pages
Click me ## ;)
Which works fine on chrome but not within PhoneGap on android.
I have searched around and cannot find a solution any where.
State provider config for EventAdd shown below.
app.config(function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/home");
//
// Now set up the states
$stateProvider
.state('EventAdd', {
url: "/EventAdd",
templateUrl: "views/eventAdd.html",
controller: 'EventaddCtrl'
});
});
It displays no errors and just doesn't navigate off the screen.
any tips?

Try <a ui-sref="EventAdd">Click me ## ;)</a> instead. Without a Plunker, i'm not sure what the issue is.
Update:
Another alternative.
View:
<a ng-click="goToEventAdd()">Click me ## ;)</a>
Controller:
$scope.goToEventAdd = function(){
//Don't forget to inject the $state service
$state.go("EventAdd");
}

How to use url parameters in angularjs, ui-router and $stateParams

I have followed the instructions from https://github.com/angular-ui/ui-router/wiki/URL-Routing
but cannot get this to work properly.
I have the following:
var application = angular.module('application', ['ui.router']);
application.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/test");
$stateProvider
.state('index', {
url: "/test/:param",
templateUrl: "App/Test.html",
controller: function ($scope, $stateParams) {
alert($stateParams.param);
}
});
$locationProvider.html5Mode(true);
});
Without the /:param this works as you would expect - i.e. the ui-view is correctly populated with Test.html. However, whenever I put the /:param in I get an error. The error is:
GET http://localhost:3880/test/App/Test.html 404 (Not Found)
App is the route of my angular stuff and Test.html should have a path of
http://localhost:3880/App/Test.html
which it does if not trying /:param. However, when trying /:param you can see that there is an extra /test/ in the path before /App.
Please someone help, as I would like to consume the parameter in the controller once it is correct.

You URL for this route should be like this : http://localhost:3880/test/app Where app is param.

Use absolute path for templateUrl. relative url wont work.
templateUrl: "/path/to/App/Test.html",

AngularJS locationProvider Routing

I'm very new to Angular and I'm currently building a few test/dummy apps to get my head around the way it works and become more-familiar with SPA's in Angular. However, I've stumbled into an issue when I start adding routes to my application and loading the content via ng-view
$locationProvider doesn't seem to be working correctly because if I go to localhost/sdfsdf then I get cannot GET /sdfsdf when in reality the page should be redirecting to /cocktails.
routes.js
var cocktailApp = angular.module('cocktailApp', ['ngRoute', 'cocktailControllers']);
cocktailApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/cocktails', {
templateUrl: '/partials/cocktail-list.html',
controller: 'cocktailsController'
})
.otherwise({
redirectTo: '/cocktails'
});
$locationProvider.html5mode(true);
}]);

Angular only recognizes anchor URL syntax for URLs pasted directly on the browser. So you have to you try http://localhost/#/sdfsdf instead to make your routing work. Please note that anchor syntax /# was added in previous URL.