We Keep Coding

Angular Route not working - some thing wrong with template url

I'm starting with AngularJS, but Router not working on my site.
This is some config relate to my route:
Firstly, app.js:
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider,
$routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/'});
}]);
Secondly, view1.js
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: '/views/view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [function() {
}]);
angular.js, app.js and view1.js are added to the index.html
ng-view is used to show the content in view1.html
this is my folder tree:
Project
** admin
****** app.js
****** index.html
****** views
********** view1
*************** view1.html
*************** view1.js
Could you give me some advise to make it working??
Thanks for watching my question!

I would suggest moving your configuration all to one config. Also there is no need to reference myApp in your module instantiation. Another thing is make sure you have angularjs route file in your index.html. The following will work.
Try this:
var app = angular.module('myApp', ['ngRoute']).
app.config(function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.when('/view1', {
templateUrl: '/views/view1/view1.html',
controller: 'View1Ctrl'
})
.otherwise({redirectTo: '/'});
});

routeParams doesnt inject into my controller?

I was looking at some how-tos on doing angular-routing and to pass parameters into a controller. This is what i did:
.controller("myController", ["$scope", "$routeParams", function($scope, $routeParams, Units, Tests){
//Units and Tests are both factories i created to reference within this function.
var id = $routeParams.id;
console.log(id);
}]);
When I did this, it failed to inject "$routeParams" into my application.
I looked at the angular.js file, and it looks like i am running: #license AngularJS v1.5.3
Is this way of doing it no longer the correct way? I tried to update it to:
.controller("myController", ["$scope", "ngRoute", function($scope, ngRoute, Units, Tests){
// ...
}]);
but that seemed to also not inject correctly.
Is there something I am missing?
Currently I am developing with the Ionic Framework, which is leveraging the AngularJS tools.

When dealing with ionic, as stated within the question, you connect to the $stateProvider so when you are creating a state such as:
$stateProvider
.state("unit", {
url: "/unit/:id",
templateUrl: "templates/unit.html",
controller: "UnitController"
})
you would then in your controller do:
.controller("myController", ["$scope",
"$stateParams",
function($scope, $stateParams, Units, Tests){
var id = $stateParams.id;
console.log(id);
}]);
This is the way to do it in Ionic, since it is leveraging a $stateProvider over a $routeProvider

If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.
The ngRoute module routes your application to different pages without reloading the entire application.
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/red", {
templateUrl : "red.html"
})
.when("/green", {
templateUrl : "green.html"
})
.when("/blue", {
templateUrl : "blue.html"
});
});
Your application needs a container to put the content provided by the routing.
This container is the ng-view directive.
like this
<div ng-view></div>
You can also define controllers for each view
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/london", {
templateUrl : "test.html",
controller : "myController"
})
});

AngularJS router doesn't actually route much

So I'm fresh into AngularJS, trying to build my first application. And I'm stuck at routing. The first line works, which is just to load a view when the site is entered, but the next one is just telling me "Object not found".
Now I'm a true noob. I'm just running this on a plain MAMP stack.
This is the code I've written in JS:
angular.module("Portfolio", ['ngRoute', 'ngProgress']);
angular.module("Portfolio").config(function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/assets/pages/home.php',
controller: 'MainController'
}).when('/test', {
templateUrl: "assets/pages/test.php",
controller: 'MainController'
});
$locationProvider.html5Mode(true);
});
I'm certain that there's no mistake in HTML, since the rest of the code works just fine.
So what did I do wrong here? Thanks.

angular.module("Portfolio", ['ngRoute', 'ngProgress']);
angular.module("Portfolio").config(function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/assets/pages/home.php',
controller: 'MainController'
}).when('/test', {
templateUrl: "/assets/pages/test.php",/* your previous template url is not correct.*/
controller: 'MainController'
});
$locationProvider.html5Mode(true);
});

insert / in this routing
templateUrl: "/assets/pages/test.php",

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.