problems with angularjs $routeProvider

StackOverflow https://stackoverflow.com/questions/20969400

  •  25-09-2022
  •  | 
  •  

Question

Hey i've started learning angularJS and i'm quite new to it so i gues my best bet is to ask someone.

So my $routeProvider is not routing me to anything really when i run it it wont load any partials.

The current code i'm using.

angular.module("list" , ['ngRoute' ])
config(function  ($routeProvider) {

    $routeprovide.
        when("/", {templateUrl:"/partials/list.html"})
    })

My index.html

 <!doctype html>
 <html ng-app="list">
 <head>
 <meta charset="UTF-8">

    <link rel="stylesheet" href="css/Style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>Angular Routing!</title>
    </head>
  <body>
    <div ng-controller="AppCtrl" class="container">
    <a href="#lijst">
        <h2>The List!</h2>
     </a>

        <div ng-view>   </div>

    </div>



<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>

Edit: I run it by using a USBWebserver app

Console Errors:

> Failed to load resource: the server responded with a status of 404 (Not Found) 
http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js

Uncaught ReferenceError: config is not defined main.js:2

Uncaught Error: Bootstrap requires jQuery bootstrap.js:7

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7/$injector/modulerr?p0=list&p1=Error%3A%20…20at%20e%20(http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular.min.js%3A29%3A115) angular.min.js:30
Was it helpful?

Solution

First of all, your angular-route.js must be included after angular itself

Second, you are using some routeprovide, and $routeProvider is injected

You should do this:

angular.module("list" , ['ngRoute' ]).
config(function  ($routeProvider) {

$routeProvider.
   when("/", {templateUrl:"/partials/list.html"})
});

You also forgot point before config method.

And this:

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>

And, it seems, your Bootstrap.js requires jQuery to be included before it.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top