CODEWITHSUNDEEP
javascriptangularjs
roonroon
roonroon

Reputation: 399

$routeProvider not working properly in AngularJS (crashing the website)

I was following some random YT tutorial on using Angular's $routeProvider and the result - contrary to the video - is not working for me. Instead, what I get is crashed website and this error logged in Chrome's console: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=site&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A41%3A249) By following the trail, I found that there's something wrong with `$routeProvider', but beats me if I know what. Here's my code:

var site = angular.module('site', []).
config(function($routeProvider){
    $routeProvider.
        when('/home', {template:'/pages/home.html'}).
        when('/', {template:'/pages/home.html'}).           
        when('/in-play', {template:'/pages/in-play.html'}).
        when('/popular', {template:'/pages/popular.html'}).
        otherwise({redirectTo:'/home', tempalte:'/pages/home.html'});
});

function MainCtrl($scope, $location) {
    $scope.setRoute = function(route) {
        $location.path(route);
    };
};

And here are all the HTMLs (I'm working with ng-include also):

<!DOCTYPE html>
<html ng-app="site">
<head>
    <link rel="stylesheet" href="css/style.css">    
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">      </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>    
    <script src="scripts/app.js"></script>

    <title>Pre-Demo</title> 
</head>
<body  ng-controller="mainStaysCtrl">   
    <header class="header" ng-include="'pages/header.html'"></header>
    <nav class="nav" ng-include="'pages/nav.html'"></nav>
    <div class="main">
        <div class="left-col">
            <div class="quick links" ng-include="'pages/quick_links.html'">  </div>
            <div class="quick-inplay links" ng-include="'pages/quick_inplay_links.html'"></div>
            <div class="winner links" ng-include="'pages/winner_links.html'"></div>
        </div>
        <div class="center-col" ng-controller="mainCtrl">
            <div class="wraper" ng-view ng-controller="jsonCtrl"></div>                     
        </div>
        <div class="right-col">
            <div class="expert-mixer" ng-include="'pages/mixer.html'"></div>
            <div ng-include="'pages/twitter.html'"></div>
        </div>
    </div>  
</body>
</html>

//included page that has the call for $routeProvider

<div class="events">
    <div class="bullet">
        <div class="bullet-padding">
            <div ng-click="setRoute('in-play')" class="bullet-link">In-Play Links</div>
        </div>  
    </div>
</div>

Could someone please tell me what's wrong?

EDIT

After Antiga's answer I got it to load the page. Everything besides the content that is to be loaded with ng-view and for which $routeProvider was set up in the first place. Here's the updated code:

var site = angular.module('site', ['ngRoute']).
    config(function($routeProvider){
        $routeProvider.
            when('/home', {templateUrl:'/pages/home.html'}).
            when('/', {templateUrl:'/pages/home.html'}).            
            when('/in-play', {templateUrl:'/pages/in-play.html'}).
            when('/popular', {templateUrl:'/pages/popular.html'}).
            otherwise({redirectTo:'/home', tempalteUrl:'/pages/home.html'});
    });

site.controller('mainStaysCtrl', function($scope) {
    $scope.setRoute = function(route) {
        $location.path(route);
    };
});

and HTML

<body  ng-controller="mainStaysCtrl">   
    <header class="header" ng-include="'pages/header.html'"></header>
    <nav class="nav" ng-include="'pages/nav.html'"></nav>
    <div class="main">
        <div class="left-col">
            <div class="quick links" ng-include="'pages/quick_links.html'"></div>
            <div class="quick-inplay links" ng-include="'pages/quick_inplay_links.html'"></div>
            <div class="winner links" ng-include="'pages/winner_links.html'"></div>
        </div>
        <div class="center-col">
            <div class="wraper" ng-view ></div>
            </div>
        <div class="right-col">
            <div class="expert-mixer" ng-include="'pages/mixer.html'"></div>
            <div ng-include="'pages/twitter.html'"></div>
        </div>
    </div>

Upvotes: 0

Views: 483

Answers (2)

roonroon
roonroon

Reputation: 399

Okay, I got it working beyond Antiga's help.

There was few (yet minor) problems. I had to extend templateUrl path to include project folder.

when('/home', {templateUrl: '/ProjectName/pages/home.html', controller: 'mainStaysCtrl'}).

Other thing is that I simply forgot to include $location in controller.

site.controller('mainStaysCtrl', function($scope, $location) {
    $scope.setRoute = function(route) {
        $location.path(route);
    };
});

Upvotes: 0

Antiga
Antiga

Reputation: 2274

You are not including the routing module.

Read up on this here so that you actually understand it first: https://docs.angularjs.org/api/ngRoute

Add this after you include angular.min.js:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

And then include the dependency in your main app module:

var site = angular.module('site', ['ngRoute']).

Upvotes: 1

Related Questions