I don't get any errors but I cannot get my routing to work. Any help would be greatly appreciated. Thanks.
main.html
<!DOCTYPE html>
<html ng-app = 'ContactsApp'>
<!--ng app is bootstrapping application and it is called contactsapp like in the anuglar app.js file---->
<head>
<title>Contacts</title>
<base href = '/'>
<link rel = 'stylesheet' href = "src/bootstrap.min.css">
<!---base elemnt with a href attr of root
...angular will use the base element and the href tells it what to use when it goes to get our front end resources so it will start with the root ---->
</head>
<body>
<div class = 'container'>
<div class = "page-header">
<h1>Contacts{{message}}</h1>
</div>
<!---row and colsm12 are twitter bootstrap classes the ng view is anuglar it is saying that this will be the view div on the page so the contents of this page will change as our route changes---->
<div class = 'row'>
<div class = 'col-sm-12' ng-view></div>
</div>
<script src = 'lib/jquery/dist/jquery.min.js'></script>
<script src = 'lib/bootstrap/dist/js/bootstrap.min.js'></script>
<script src = 'lib/node_modules/angular/angular.js'></script>
<script src = 'lib/node_modules/angular-route/angular-route.min.js'> </script>
<script src = 'lib/angular-resource/angular-resource.min.js'></script>
<script src = 'src/app.js'></script>
<script src = 'src/controllers.js'></script>
<script src = 'src/factories.js'></script>
</body>
</html>
app.js
angular.module('ContactsApp',['ngRoute'])
.config(function($routeProvider, $locationProvider)
{
$routeProvider
.when('/contacts'), {
controller: 'ListController',
templateUrl: 'views/list.html'
};
});
controller.js
angular.module('ContactsApp', [])
.controller('ListController', function($scope){
$scope.contacts = [];
});
Johny T Koshy
3,9222 gold badges26 silver badges43 bronze badges
asked Nov 1, 2014 at 14:59
user4204751
1 Answer 1
I see 2 problems in your code.
The first problem is that you define the module with the name ContactsApp twice.
Give the module that has the controller a different name, and declare it as a dependency in your main module.
Like this:
app.js
angular.module('ContactsApp',['ngRoute','listControllers'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/contacts'), {
controller: 'ListController',
templateUrl: 'views/list.html'
};
});
controller.js
angular.module('listControllers', [])
.controller('ListController', function($scope){
$scope.contacts = [];
});
The second problem is a typo in your main.html:
<script src = 'lib/node_modules/angular-route/angular-route.min.js'script>
Should be:
<script src = 'lib/node_modules/angular-route/angular-route.min.js'></script>
answered Nov 1, 2014 at 15:03
wvdz
16.2k4 gold badges60 silver badges97 bronze badges
Sign up to request clarification or add additional context in comments.
1 Comment
wvdz
Glad I could help. Don't forget to mark this as the accepted answer if this answers your question.
default
angular-route.min.jsscript tag is not closed properly.