Develop Reference

AngularJS html5mode URL not working

I have a simple AngularJS application with no code related to nodeJS in it. I'm facing problem in removing # from url. I've used ui-routes for routing.
'use strict';
var app = angular.module('myapp', ['ui-router']).
config(['$stateProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider.
state('home', {
url: '/',
templateUrl: 'views/index.html'
})
.state('where-am-i', {
url: '/where-am-i',
templateUrl: 'views/where_am_i.html',
controller: 'mainCtrl'
})
.state('audience', {
url: '/audience',
templateUrl: 'views/audience.html',
controller: 'mainCtrl'
});
}]);
Also added base tag to the head section of my index.html.
<base href='/' />
Also tried require no base but still not able to get it working.
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Adding base tag shows 404 for all the assets I've included in index.html file.
Need a quick and simple solution for this.
Thank you in advance!

add a line after $locationProvider.html5Mode(true); as below:
$locationProvider.hashPrefix('');
hope it works.

AngularJS Routing Not Working As Expected

I'm new to AngularJS and very lost at this point. I am trying to learn from this code:
http://plnkr.co/edit/dd8Nk9PDFotCQu4yrnDg?p=preview
script.js:
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
My index.html file includes
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
I have it set up on a local environment. I can load the main page but the routing only changes the URL, nothing else. Any ideas what could be causing this?

When you say only Url is called and page is not rendered means, ngroute works fine. One thing you need to make sure is that all html files reside under pages directory.
Also there should be <ng-view> tag inside index.html page
The best example is the plunker you are referring to.

I found the solution to my problem. I had to add
app.use(express.static(__dirname ));
To my node server script. I don't understand why this was needed, though.

$routeProvider.when(..) not catching all URLs

setup: jade, angular, express, node.
In my routeProvider of angular, I am having some issues. I am requesting a url with a parameter which it is not catching.
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
//... omitted some url/pages here
//start of SPA
.when('/dashboard/', {
templateUrl: 'partials/index',
controller: 'dashIndexCtrl'
})
.when('/dashboard/class/:id',{
templateUrl: 'partials/class',
controller: 'classCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
When I call localhost/dashboard/class/TEST
I get redirected to root.
I declare my routes on the server side as follows:
app.get('/dashboard', routes.dashboard);
app.get('/dashboard/partials/:name', routes.partials);
app.get('/api/class/:id', api.classGet);
My controller name matches up with the routeProvider. In which case the controller code goes as follows:
app.controller('classCtrl', function($scope, $http, $routeParams){
$http.get('/api/class/' + $routeParams.id)
.success(function(dataJson){
console.log(dataJson);
});
});
Why is routeProvider missing this url? I have set breakpoints within my controller so I am certain it is not being called. Also my partials/class.jade is not being called. Let me know if you need anymore code or directory information. Thanks in advance.
After further investigation:
If I go: localhost/dashboard/partials/class it will load that jade file. So it is definitely the controller.
Directory structure, I believe this is my issue now....
+---\
| +---\views
| +---index.jade
| +---dashboard.jade
| +---\partials
| +---index.jade
| +---class.jade

Take a look into console and observe that AngularJS tries to load templates from /partials/index then from /dashboard/partials/index
Solution
set templateUrl path as /dashboard/partials/index in config section.
Reason: angular-route.js
templateUrl = $sce.getTrustedResourceUrl(templateUrl);
if (angular.isDefined(templateUrl)) {
next.loadedTemplateUrl = templateUrl;
template = $http.get(templateUrl, {cache: $templateCache}).
then(function(response) { return response.data; });
}
There is no concatenation templateUrl with route path – just load tempalteUrl from Angular root of application.

Problems injecting kinvey into angular application

I am having some trouble injecting kinvey into my angular application. I have been getting the following error with the code below: Uncaught Error: [$injector:unpr]
var app = angular.module('FantasySeasons', ['snap', 'ngRoute', 'ngResource', 'ngTouch',
'angular-carousel', 'FSControllers', 'FSPartials', 'kinvey']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl : 'partials/home.html',
controller : 'HomeCtrl'
}).otherwise({
redirectTo : '/'
});
}]);
app.run(function($kinvey){
var promise = $kinvey.init({
appKey: 'your app key',
appSecret: 'your app secret'
});
});

As the creator of the Kinvey Angular library, I don’t see anything wrong with declaring the Kinvey dependency.
Since the error message is not specific to any module, I can only guess at this point. One thing to note is the ngRoute module is no longer part of the AngularJS core (since 1.2.0). To use it, you need to include it separately, see docs. Make sure this is the case. Otherwise, you run into that error.

Cordova + AngularJs routing not working

We are using Cordova/Phonegap with AngularJs and trying to use routing; the routing isn't working, it's not changing view, and is coming up with the below error in the console:
Failed to load webpage with error: The requested URL was not found on this server.
Our routing controller is:
var app = angular
.module('myApp', [])
.config(function ($routeProvider, $compileProvider) {
$routeProvider.when('/', {
templateUrl: 'index.html'
}).when('/HomeScreen/:id', {
templateUrl: 'app/views/homeScreen.html'
}).otherwise({
redirectTo: '/'
});
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
When we change .otherwise({ redirectTo: '/HomeScreen/1'}) it works but then the anchors in index.html with the same href (/HomeScreen/1) don't work.
We have tried Html5 mode and hashbang mode with neither working.
We are using angularjs version 1.0.7.

Most likely the issue is that the #/ is getting some of the browsers confused. This might help:
$locationProvider.html5Mode(true);
This will use push state to do the navigation instead.