Angular-Route is not working.

Question

i am learning angularJS.i was trying implement code from a tutorial video to display a view on a html page using Route,but apparently i am stucked,although im doing exact same as the tutor is showing in the tutorial but i have no clue why it is not working ,i have searched on the internet but invain,please anyone pointout my mistake.here is my code

Index.html

<html ng-app="App">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">

</head>
<body>
  <div ng-view></div>
     <script src="js/angular.js"></script>
     <script src="js/angularRoute.js"></script>
     <script src="App/Myapp.js"></script>
     <script src="App/CustomerController.js"></script>

</body>
</html>

App/MyApp.js

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

App.config(function($routeprovider)
          {
   $routeprovider
       .when('/',{
       controller:'CustomerController',
       templateUrl:'App/views/customers.html'
   })
   .otherwise({ redirectTo:'/'});

});

views/customers.html

  <div class="heading">
        <h1>Customers List</h1>
    </div>
    <div class="filterBox">
    Filter:<input type="text" ng-model="CustomerFilter.name"/>
    </div>
    <table>
        <th ng-click="sorter='CustomerID';reverse=!reverse">ID</th>
        <th ng-click="sorter='name';reverse=!reverse">Name</th>
        <th ng-click="sorter='city';reverse=!reverse">City</th>
        <th ng-click="sorter='total_orders';reverse=!reverse">Total          Orders</th>
         <th ng-click="sorter='date';reverse=!reverse">Date of last  Order</th>
    <tr ng-repeat="cust in customers   |filter:CustomerFilter|orderBy:sorter:reverse">
        <td>{{ cust.CustomerID }}</td>
        <td>{{ cust.name|uppercase }}</td>
        <td>{{ cust.city |lowercase}}</td>
        <td>{{ cust.total_orders|currency:'Rs' }}</td>
        <td>{{ cust.date|date:'longDate' }}</td>
        </tr>
    </table>
    <span> Total Customers:{{customers.length}}</span>

I have Controller named CustomerController which i have not pasted here because beacuase it will be too large to fit.

Bilal Alam · Accepted Answer · 2017-01-13 12:25:43Z

1

typo, dont forget to write the p in capital

$routeProvider

answered Jan 13, 2017 at 12:25

Bilal Alam

90412 silver badges27 bronze badges

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

Comments

Dave Alger · Accepted Answer · 2016-07-03 00:33:41Z

0

I'd suspect it's a URL error. Just because if your app.js is inside the App folder then you don't need to have "App" in your URLs unless you have an app/app/views folder layout.

In app.js your templateurl should just be 'views/customers.html'

You can also check your index.html. Do you have your controllers in app? Or within a scripts folder or somethign similar?

answered Jul 3, 2016 at 0:33

Dave Alger

3691 gold badge7 silver badges24 bronze badges

2 Comments

Bilal Alam Over a year ago

i have eidited my url several times but invain,my controller is in the same file where MyApp.js is

Dave Alger Over a year ago

Yeah, my projects are set up differently, lead me down the wrong path. By the way, presuming your typo was on '$routeprovider' then that should have produced an error message in your browsers console (Like "Unknown provider: $routeprovider") which would have sped up your bug hunt. Post an answer to your own question, rather than leaving it unanswered.

Wcan · Accepted Answer · 2016-07-03 01:22:51Z

0

1: Ok, the problem is u don't have controller in ur customer.html page u need to tell ur partial view about the controller. U can simply wrap ur entire page between div tag with controller like below.

<div controller="CustomerController>
// ur data of customer.html page goes here
</div>

2: Its better to declare your config like this there won't be any problem in your app when you minify it.

App.config(['$routeProvider', function($routeProvider)
{
     // routerProvider goes here
}]);

edited Jul 3, 2016 at 1:22

answered Jul 3, 2016 at 1:08

Wcan

8882 gold badges12 silver badges34 bronze badges

4 Comments

Bilal Alam Over a year ago

if we have to refer controller in the view then why we refer the controller in the route first place?

Wcan Over a year ago

please tell me what exactly is the error you are getting in console ??

Wcan Over a year ago

please show me where is your controller ? i mean show me the code

Bilal Alam Over a year ago

nevermind i have finally figured out the problem it was just a typo,my bad .

Collectives™ on Stack Overflow

Angular-Route is not working.

3 Answers 3

Comments

2 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

4 Comments

Related