We Keep Coding

html5mode doesn't remove hashbangs

I have a gulp connect server running and want to remove hashbangs from the routeProvider I am using in my AngularJS project.
I have this in my app.js:
//Setting HTML5 Location Mode
companiesApp.config(['$locationProvider',
function ($locationProvider) {
$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true);
}
]);
I know that if I remove the hashPrefix it will work still with http://www.example.com/#example-uri but how do I get rid of that entirely. isn't html5Mode(true) supposed to do that?

Yes, $locationProvider.html5Mode(true); should do that.
But to be able to access pages directly from the browser, you should configure your server to redirect the request to the index page, then call the partial internally. Check this document on angular-ui documentation for how to configure the document to do so.

Try this if may be useful in your scenario
Add only has prefix like $locationProvider.hashPrefix('') to remove Bang prefix...
var app = angular.module('app', []);
app.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider)
{
$routeProvider.when('/', {
templateUrl: "app1.html",
controller: "App1Ctrl"
})
.when('/Program1', {
templateUrl: "app2.html",
controller: "App2Ctrl"
});
$locationProvider.hashPrefix("");
}
]);
first add $routeProvider in dependency and then add in last of hashPrefix is null
to remove tha bang prefix.

Angular dynamic controller / templateUrl

I am trying to build my first angular app and looking to setup dynamic routing so that I can build out the app without having to continuously add to the $routeProvider config. I haven't quite found the simplest / cleanest approach yet, any guidance is much appreciated. Below was my first approach.
angular.module('app', ['ngRoute']).config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider){
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider
.when('/', {
redirectTo: '/home',
})
.when('/:section', {
controller: function(r){
return r.section+'Ctrl';
},
templateUrl: function(r){
return 'app/views/pages/'+r.section+'.html';
}
});
}]);

How can I load module on demand?

I know I can load modules (dependencies) in AngulrJS when bootstrap the app like this:
var app = angular.module('myApp', [
'ngSanitize',
'ionic',
]);
I want to load some modules on the given controller, not global.
For example I have two controllers:
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'partials/index',
controller: IndexCtrl
})
.state('addPost', {
url: '/addPost',
templateUrl: 'partials/addPost',
controller: AddPostCtrl
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
});
I want to load ui.tinymce module in AddPostCtrl controller only, so I can use tinymce editor on addPost page. But I don't want to load ui.tinymce when I visit index page.
Is there any way to do it?

You nee to use AngularAMD, it lets you create angular objects on demand:
http://marcoslin.github.io/angularAMD/#/modules
http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs

AngularJS app URL

I am using ngRoute in my AngularJS app to build up different app routes, below is part of my app.js. Now the problem I am facing is that the URL is shown as ( localhost/myapp/index.html#/home ) while my client needs is at localhost/myapp#/home so I was wondering how I can get the index.html out of the equation or at least make it as localhost/myapp/index#/home without the .html? Thanks
var myApp = angular.module('myApp', ['ngRoute','ngSanitize']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home',
{ templateUrl: 'templates/home.html',
controller: 'homeController'
});
$routeProvider.when('/about',
{templateUrl: 'templates/aboutus.html',
controller: 'aboutUsController'
});
$routeProvider.otherwise({redirectTo: '/home'}); }]);

You should be able to do this with a combination of $locationProvider.html5Mode(true) and <html><head><base href="/myApp">

Can't fix the hashtag in my angularjs app path

I know you guys are going to say "It's duplicated" but it doesn't work for me.
I'm doing exactly the same thing and here's what happens.
This is my config code:
portfolioApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
controller: 'portfolioController',
templateUrl: 'partials/home.htm'
})
.otherwise({redirectTo: '/home'});
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
});
The URL without the locationProvider and setting path to "/" instead of "/home" would be:
http://localhost:8080/portfolio/#/
Okey, i would like to remove the hashtag and the "portfolio" path so that way it would be:
http://localhost:8080/home
With the config i've posted, it does it (the first time i refresh). But what happens? happens that if I refresh the page again with the new path... i get a 404 Tomcat Error.
In the first refresh when i write localhost:8080/portfolio and the path gets converted into "/home", I get in the console an error saying that the "partials/home.htm" can't be found 404.
So either way, it can't read my partial, and then when I refresh everything is broken.
How can I solve this? what am I doing wrong?

Make sure your including these to scripts in the header of your HTML document Where you are implementing your module. The two provided below are for implementing the most current version of angular as well as the most current version of the angular route script:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-route.js"></script>
Make sure your injecting ngRoute into your module, here's an example of mine:
angular.module('controller', ['ngRoute','ngResource', 'ngCookies', 'ngSanitize'])
Here is an example of my config block, make sure you inject both routeProvider and locationProvider:
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: '../partials/member.php',
controller: 'Member',
access: 'member'
})
.when('/leaderboard', {
templateUrl: '../partials/leaderboard.html',
controller: 'Leaderboard',
access: 'member'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}])
If your doing all of this and it still doesn't work post a plunker of your code. Thanks.