.config $routeprovider angularjs

https://stackoverflow.com/questions/21754619

11-10-2022
|

Question

i am using angularjs ..

mainhtml.html

<!DOCTYPE html>
<html data-ng-app="demoapp">
<head>
    <script src="scripts/angular.min.js"></script>
    <title>Angular js</title>
</head>
 <body> <div data-ng-controller="SimpleController">
     <div data-ng-view=""></div>

<div class="ng-view"></div>
    Name:<input type="text" data-ng-model="name" />{{name}}
    <br />
    <ul>
        <li data-ng-repeat="cust in customers|filter:name|orderBy:'city'">{{cust.name|uppercase}}-{{cust.city|lowercase}}</li>
    </ul>
        <script>
            var demoapp = angular.module('demoapp', []);
            demoapp.config(['$routeProvider',
          function ($routeProvider) {
         $routeProvider.
          when('/', {
            templateUrl: 'view1.html',
            controller: 'SimpleController'
        }).
        when('/partial2', {
            templateUrl: 'view2.html',
            controller: 'SimpleController'
        }).
        otherwise({
            redirectTo: '/'
        });
  }]);
demoapp.controller('SimpleController', function ($scope) {
                $scope.customers = [{ name: 'aman', city: 'boom' },
                                     { name: 'ajay', city: 'reem dee' },
                                     { name: 'hood', city: 'meen' }
                ];
            });

        </script>
    </div>
</body>
</html>

<div class="container">
    <h2>View1</h2>
Name:
    <input type="text" data-ng-model="filter.name" />
    <br />

   <ul>
       <li data-ng-repeat="cust in customers|filter :filter.name|orderby"></li>
</ul>
    <br />
    Customer name:
    <input type="text" data-ng-model="newCustomer.name"/>
    <br />
    <br />
    Customer city:
    <input type="text" data-ng-model="newCustomer.city"/>
    <br />
    <br />
    <button data-ng-click="addCustomer()">Add customer</button>
    <br />
    <a href="#/view2">View2</a>
</div>

it works well before adding config($routeprovider) function,,,, routeprovider function is destroying the program... anyhelp to work it correctly

Solution

you probably

missed to include angular-route

<script data-require="angular-route@1.2.12" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular-route.js"></script>

next step is to add dependency to ngRoute module, as below

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

enjoy to live sample : http://plnkr.co/edit/sgQGz0JHjKk4CRcoZSUf?p=preview

btw: more info here

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow