CODEWITHSUNDEEP
angularjsroutesroute-provider
Julien Moreau
Julien Moreau

Reputation: 147

Angular routeProvider

I just followed a tutorial about angular on youtube but i'm not able to execute the code due to an routeProvider problem. I tried to include the good link for angular-route.js but it's still doesn't work...

I show you the code:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title>Tuto Angular</title>
</head>
<body>
    <div>
        <div ng-view=""></div>
    </div>

    <script src="angular.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
    <script type="text/javascript">

        var demoApp = angular.module('demoApp', ['ng-route']);

        demoApp.config(function ($routeProvider){
            $routeProvider
                .when('/',
                {
                    controller: 'SimpleController',
                    templateUrl: 'Partials/View1.html'
                })
                .when('/view2',{
                    controller: 'SimpleController',
                    templateUrl: 'Partials/View2.html'
                })
                .otherwise({ redirectTo: '/' });
        });

        demoApp.controller('SimpleController', function ($scope){
            $scope.customers = [
                {name:'John Smith', city:'Phoenix'}, 
                {name:'John Doe', city:'New York'}, 
                {name:'Jane Doe', city:'Chicago'}
            ];

            $scope.addCustomer = function (){
                $scope.customers.push(
                    { 
                        name: $scope.newCustomer.name,
                        city: $scope.newCustomer.city
                    });
            };
        });

    </script>
</body>

When i look into the console it returns me that:

Uncaught Error: [$injector:modulerr]

If you have any idea you're welcome !

Upvotes: 2

Views: 866

Answers (4)

user5728791
user5728791

Reputation:

You have only included it inside the function. You have to inject the serivce into the config method and make sure the ng-route is included in the app references

Upvotes: 0

Nikhil Kumar K
Nikhil Kumar K

Reputation: 1127

In Angular we need to use camelCase for Dependency injection and Directive definition in java Scripts files and snake-case in the HTML pages where directive is used

Lets take if you have directive myFirstDirective in Directive defination you will use

demoApp.directive(myFirstDirective, function () {
return{}
});

In the HTMl you will use 

<my-first-directive></my-first-directive>

Upvotes: 0

Raghavendra
Raghavendra

Reputation: 5387

When injecting a dependency into our app module,use camelCase and not snake-case

Here, use ngRoute and not ng-route

See: https://stackoverflow.com/a/11934258/1177295

Upvotes: 1

ryeballar
ryeballar

Reputation: 30118

change:

var demoApp = angular.module('demoApp', ['ng-route']);

to

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

Upvotes: 6

Related Questions