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.

stackoverflow.com/questions/24565999/… This should help you... — H. Senkaya
– H. Senkaya, Commented Mar 14, 2016 at 15:28

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 14, 2016 at 15:28

deceze♦

525k89 gold badges806 silver badges954 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ONE_FE · Accepted Answer · 2016-03-14 15:34:06Z

1

var app = angular.module('myApp', ['ngRoute']);

Add the dependency. Worked for me.

answered Mar 14, 2016 at 15:34

ONE_FE

1,0163 gold badges21 silver badges44 bronze badges

2 Comments

captain Over a year ago

Worked fine. I think the tutorials that I've been following didn't add this dependency. I could be wrong though.

ONE_FE Over a year ago

Try this youtube channel. link

Mathieu de Lorimier · Accepted Answer · 2016-03-14 15:29:20Z

0

You are not loading ngRoute in your app. To load it you should do something like this :

var app = angular.module('myApp', ['ngRoute']);

answered Mar 14, 2016 at 15:29

Mathieu de Lorimier

1,0153 gold badges20 silver badges33 bronze badges

Comments

nipeco · Accepted Answer · 2016-03-14 15:29:37Z

0

Change var app = angular.module('myApp', []); to var app = angular.module('myApp', ['ngRoute']); you're missing the module injection.

answered Mar 14, 2016 at 15:29

nipeco

7602 gold badges9 silver badges25 bronze badges

Collectives™ on Stack Overflow

Why does my AngularJS app not work when I add routing?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related