CODEWITHSUNDEEP
javascriptangularjs
Ryuu
Ryuu

Reputation: 121

AngularJS : $routeProvider isn't working

I'm new at javascript and angularJS and I have a little problem configuring my $routeProvider. It does not display anything at all. Here is my code :

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

route.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/home', {templateUrl: 'partials/home.html'})
        .when('/about', {templateUrl: 'partials/about.html'})
        .otherwise({redirectTo: '/home'})
}]);
var ap = angular.module('app', ['snap']);

ap.controller('MainCtrl', function($scope) {
    $scope.opts = {
        disable: 'right'
    };
});

and the HTML :

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/angular-snap.css" />


        <script src="js/angular-1.2.4.min.js" type="text/javascript"></script>
        <script src="js/snap.js" type="text/javascript"></script>
        <script src="js/angular-snap.js" type="text/javascript"></script>
        <script src="js/app.js" type="text/javascript"></script>
    </head>

    <body ng-controller="MainCtrl">

        <nav snap-drawer class="nav">
            <a href="#home">Home</a>
            <a href="#about">About us</a>
        </nav>

        <snap-content snap-options="opts"> 

            <header class="header">
                <button snap-toggle>
                    <img src="img/icon-menu.png" width="60px" />
                </button>
                Test
            </header>

            <div ng-view>
            </div>

        </snap-content>



        <script src="cordova.js" type="text/javascript"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

The snap element for the left panel is working just fine but when I want to add the routeProvider it does not display what I have in partial/home.html (which is just a paragraph at the moment).

Upvotes: 0

Views: 355

Answers (2)

Philip Bulley
Philip Bulley

Reputation: 9414

Don't forget to inject the ngRoute module.

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

Upvotes: 1

Busata
Busata

Reputation: 1118

You need to include the ngRoute module (and the angular-route.js) in order for $routeProvider to work. This was split up a while ago:

AngularJS $routeProvider docs

Upvotes: 0

Related Questions