Why does my AngularJS app not work when I add routing?
Question
I'm new to AngularJS, I actually started today and I wanted to create a sample site for a company using AngularJS. My plan was to create a view for the products and a view for the about page.
This is my index.html code:
<!doctype html>
<html ng-app="myApp" ng-controller="myCtrl">
<head>
<title>{{ title }}</title>
<script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script src="js/app.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
</head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand"> {{ title }}</a>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#/products">Products</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</nav>
<div ng-view></div>
</body>
</html>
And this is what I have in my app.js file:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.title = "My company site";
});
app.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/products', {
templateUrl: 'partials/home.html',
controller: 'productsController'
}).
when('/about', {
templateUrl: 'partials/about.html',
controller: 'myCtrl'
}).
otherwise({
redirectTo: '/products'
});
}]);
app.controller('productsController', function($scope){
$scope.message = 'This will show my products page';
});
app.controller('aboutController', function($scope){
$scope.message = 'This will show my about page';
});
Whenever I click on a link on my navbar the view for the clicked link doesn't get rendered. Also the title of the site is displayed like that {{ title }} on the browser. These problems started when I added the code for the routing. If I remove the code from the routing the title displays correctly. Also whenver I have the routing code on the site I get this error in my browser. Uncaught Error: [$injector:modulerr] and it gives me a link to this page . I've visited the site and after checking everything the module seems to be loading fine only when I don't have the code for the routing in the app.js. So what am I doing wrong here? I'm looking at this for about an hour and I can't figure it out.
4 answers
solution1
2 2016-03-14 15:28:42
You're trying to use ngRoute , which is a separate module and needs to be installed and included separately. The error page links to another page , which specifically tells you that $routeProvider is unknown in your current project. See the ngRoute page for installation instructions: https://docs.angularjs.org/api/ngRoute .
Most specifically:
Then load the module in your application by adding it as a dependent module:
angular.module('app', ['ngRoute']);
solution2
1 ACCPTED 2016-03-14 15:34:06
var app = angular.module('myApp', ['ngRoute']);
Add the dependency. Worked for me.
solution3
0 2016-03-14 15:29:20
You are not loading ngRoute in your app. To load it you should do something like this :
var app = angular.module('myApp', ['ngRoute']);
solution4
0 2016-03-14 15:29:37
Change var app = angular.module('myApp', []); to var app = angular.module('myApp', ['ngRoute']); you're missing the module injection.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.