$routeProvider in AngularJs is not Working

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

  •  11-06-2023
  •  | 
  •  

Question

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

Thanks in advance if someone may help me :)

when i see in firebug it show reference not set for $routeProvider.

here is my code..

main.html.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp"><!--you can use  data-ng-app directive also-->
<head>
<title>Using Directive With DataBinding</title>
<script src="Scripts/angular.min.js"></script>

<script>
    //var demoApp = angular.module('demoApp', ['helperModule']);
    var demoApp = angular.module('demoApp', []);

    demoApp.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                controller: 'SimpleController',
                templateUrl: 'View1.html'
            })
            .when('/view2', {
                controller: 'SimpleController',
                templateUrl: 'View2.html'
            })
            .otherwise({ redirectTo: '/' });
    });
    var controllers = {};
    controllers.SimpleController = function ($scope) { // here $scope is dependency injection
        $scope.customers = [
            { name: 'Sombir', city: 'Rohtak' },
            { name: 'Surender', city: 'Hissar' },
            { name: 'Virender', city: 'Panipat' },
            { name: 'Kapil', city: 'Jhajjar' }
        ];
        $scope.addCustomer = function() {
            $scope.customers.push(
            {
                name: $scope.newCustomer.name,
                city: $scope.newCustomer.city   
            });
        };
    };
    demoApp.controller(controllers);
</script>
</head>
<body>
<div>
    <div data-ng-view=""><!--PlaceHolder for views--></div>
</div>    
</body>
</html>


View1.html
-----------------

<div class="container">
    Name:
    <input type="text" ng-model="filter.name" /><!--you can use data-ng-model directive also-->

    <h3>Adding A simple Controller --View1</h3>
    <ul>
        <li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}}---{{cust.city}}</li>
    </ul>
    <br/>
    Customer Name:
    <input type="text" ng-model="newCustomer.name"/>
    Customer City:
    <input type="text" ng-model="newCustomer.city" />
    <br/>
    <button ng-click="addCustomer()">Add Customer</button>
    <a href="#/View2">View2</a>
</div>
Was it helpful?

Solution

You forgot to inject 'ngRoute' in your module 'demoApp' in your script tag

  var demoApp = angular.module('demoApp', ['ngRoute']);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top