CODEWITHSUNDEEP
angularjsangular-routing
Abhishek Kumar
Abhishek Kumar

Reputation: 338

$routeProvider is not working

I'm using angularJs and new to it. I'm facing problem in $routeProvider.

Thanks in advance if someone may help me :)

I'm not getting any error in console, but ngView is also not updating

index.html

<!DOCTYPE html>
<html lang="en">
<head data-ng-app="myApp">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Project</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

<!-- Custom CSS -->
<link href="css/main.css" rel="stylesheet" type="text/css">

<!-- AngularJS script -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/route.min.js"></script>
<script src="js/jquery.min.js"></script>


<div id="wrapper">
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation"
        style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">Demo Work</a>
        </div>
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li>
                        <a href="#">Dashboard</a>
                    </li>
                    <li>
                        <a href="#">Charts</a>
                            <ul class="nav nav-second-level">
                                <li><a href="#">Flot Charts</a></li>
                                <li><a href="#">Morris.js Charts</a></li>
                            </ul>
                    </li>
                    <li>
                        <a href="#tables">Tables</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Page Content -->
    <div id="page-wrapper">
        <div data-ng-view>
        </div>
    </div>
    <!-- /#page-wrapper -->
</div>
</body>
</html>

dashboard.html

<div>
  <h1>Contact Page</h1>
  <p>{{ message }}</p>
</div>

tables.html It has also some code same as dashboard.html

app.js

var demoProject = angular.module('myApp',['ngRoute']);
demoProject.config(function($routeProvider) {
    $routeProvider
    .when('/',{
        templateUrl : 'page/dashboard.html',
        controller  : 'contactController'
    })
    .when('/tables',{
        templateUrl: 'page/tables.html',
        controller:  'tablesController'
    });
});

demoProject.controller('contactController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

demoProject.controller('tablesController',function($scope){
    console.log("Tables controller");
});

Upvotes: 0

Views: 101

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

You need to load the app.js after loading angular route

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>

Upvotes: 1

Related Questions