Angular Routes not giving me any output

Question

Why my routes not working well ?

I'm sure that my code is true but no thing happen when I trying to run it , why the routes not routing the files ??

this is my main file code

routes.html

<!DOCTYPE html>
<html data-ng-app="MyApp">
    <head>
        <title>Routes</title>

    </head>
    <body>

        <div >
            <!-- my views -->
            <div data-ng-view=""></div>
        </div>

        <a href="#/view1">view 1</a>
        <a href="#/view2">view 2</a>

        <!-- angular -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>

        <!-- routes -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>


        <!-- scope -->
        <script>
      var myApp = angular.module("MyApp",[]);

      // define my routes 
      myApp.config(function($routeProvider){
        $routeProvider.when('/',
            {
                templateUrl: 'view1.html',
                controller: 'SimpleController'
            });
          $routeProvider.when('/view2',
            {
                templateUrl: 'view2.html',
                controller: 'SimpleController'
            });
          $routeProvider.otherwise ({redirectTo: '/'});
      });

      // define my controller
      myApp.controller("SimpleController", function($scope)
      {
                // my array 
                $scope.customers=[
                    {name:'astm',city:'Alex'},
                    {name:'tamer',city:'Usa'},
                    {name:'ahmed',city:'Cairo'}
                ];

          // add new persons to my array
          $scope.addPerson = function(){
            $scope.customers.push(
            {
                name: $scope.newPerson.name,
                city: $scope.newPerson.city
            });
          };

      });

        </script>

    </body>
</html>

This is the first view file view1.html

<div class="container">
    <h2>View 1</h2>
    Name :
    <br>
    <input type="text" data-ng-model="filter.name">
    <br>
    <ul class="list-group">
        <li class="list-group-item" data-ng-repeat="person in customers | filter:filter.name | orderBy:'name' ">
            {{ person.name}} live in {{ person.city}}
        </li>   
    </ul>

    <br>

    <h2>Add new person</h2>

    Name :
    <br>
    <input type="text" data-ng-model="newPerson.name">

    <br>
    City :
    <br>
    <input type="text" data-ng-model="newPerson.city">

    <br>
    <button data-ng-click="addPerson()">Add person</button>

    <a href="#/view2">view 2</a>

</div>

This is the second view file view2.html

<div class="container">
    <h2>View 2</h2>
    City :
    <br>
    <input type="text" data-ng-model="city">
    <br>
    <ul class="list-group">
        <li class="list-group-item" data-ng-repeat="person in customers | filter:city | orderBy:'city' ">
            {{ person.name}} live in {{ person.city}}
        </li>   
    </ul>

    <a href="#/view1">view 1</a>

</div>

No error in the code , I also copied a lot of codes form the internet to test it and also not working !!!! — Astm, Jul 22 '15 at 12:02
what server you are running this on.. Do check the network log if any request it is making for views html. — binariedMe, Jul 22 '15 at 12:08
I'm using Mamp and when i running the code I get this issue in angular.main.js line 38 : Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=MyApp&p1=Error%3A%2…b%20(http%3A%2F%2Flocalhost%3A8888%2FAngularjs%2Fangular.min.js%3A40%3A503) — Astm, Jul 22 '15 at 12:28

score 1 · Answer 1 · answered Jul 22 '15 at 13:08

You have not added dependency of ngRoute in your app ..

 var myApp = angular.module("MyApp",['ngRoute']);

      // define my routes 
      myApp.config(function($routeProvider){
        $routeProvider.when('/',
            {
                templateUrl: 'view1.html',
                controller: 'SimpleController'
            });
          $routeProvider.when('/view2',
            {
                templateUrl: 'view2.html',
                controller: 'SimpleController'
            });
          $routeProvider.otherwise ({redirectTo: '/'});
      });

      // define my controller
      myApp.controller("SimpleController", function($scope)
      {
        // my array 
                $scope.customers=[
                    {name:'astm',city:'Alex'},
                    {name:'tamer',city:'Usa'},
                    {name:'ahmed',city:'Cairo'}
                ];

          // add new persons to my array
          $scope.addPerson = function(){
            $scope.customers.push(
            {
                name: $scope.newPerson.name,
                city: $scope.newPerson.city
            });
          };

      });

here is the working plunkr

Hello , I'm really added it in my code but forget to add it in the stackOverFlow and my code still not working :( This is not the issue and I'm still wondered why it not working ??!! — Astm, Jul 22 '15 at 18:19
Thanks Guys , I fount it work now and this is the plunker : http://plnkr.co/85ghMSjVp0wXdEkDwCzW I don't know why it was not working and why it work now , maybe my lap was want to restart it :( — Astm, Jul 22 '15 at 20:10

Angular Routes not giving me any output

1 Answers1