We Keep Coding

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';
}
});
}]);

AngularJS TypeError: undefined is not a function on ng-view directive

I'm trying to wire up a simple AngularJS app and I cannot get past a undefined is not a function error on my view directive. The weird thing is that the first view actually loads up and is rendered to the directive but I am unable to navigate to my 2nd view. The controllers definitely aren't running. I'm not sure what's going on here. Any ideas?
Angular version: 1.2.26 (same error with 1.2.20)
Error
App Code
var app = angular.module('myApp', ['ngRoute', 'ngResource']);
app.controller('Home', ['$scope', function ($scope) {
console.log('Home controller hit.');
}]);
app.controller('About', ['$scope', function ($scope) {
console.log('About controller hit.');
}]);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', { templateUrl: 'SiteAssets/views/home.html', controller: 'Home' })
.when('/home', { templateUrl: 'SiteAssets/views/home.html', controller: 'Home' })
.when('/about', { templateUrl: 'SiteAssets/views/about.html', controller: 'About' })
.otherwise({ redirectTo: '/' });
});

You need to inject $document into your controllers like this:
app.controller('About', ['$scope','$document', function ($scope, $document) {
$document.title = 'About Us';
console.log('About controller hit.');
}]);
It might be the $document that is throwing the error, as angular does not know what it is without the injection. However, the error for this issue would be an Error: Unknown provider:

This issue was caused by an error in a script within my Home View. I'm still having an issue with my second view loading up. Thanks to all who helped me on this issue.

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

Angular - routing why do I getting my controller 2 times called

I am using routing in angular app. while the page loads, I am getting the controller function triggers 2 times..
How to avoid that or is it have any useful meaning to call 2 times?
any one help me and explain the mistake what i do?
here is my html: //i use jade!
header
h1 Header
div.content(ng-controller="HomeController")
div(ng-view)
footer
h5 Footer
here is my js:
var locations = angular.module('location', ['ngRoute']);
locations.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/inbox/:name', {
controller: 'InboxController',
templateUrl: 'views/inbox.html'
})
.otherwise({redirectTo: '/'});
}]);
locations.controller('HomeController', ['$scope', function($scope){
console.log('hi'); // i am getting 2 times consoled! -why?
}]);

Because you have div.content(ng-controller="HomeController") in your template. You don't need to explicitly define ng-controller directive to your header template because It has already been associated using $routeProvider

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">