Estoy tratando de aprender Angular pero me quedé con el problema de enrutamiento. Intenté mirar otras preguntas pero no pude encontrar una respuesta.

Esta es mi página de índice

 <!DOCTYPE html>
 <html data-ng-app = 'myFirstApp'>
 <head>
      <title>View</title>
 </head>

 <body>
 <div>
     <div ng-view></div>
 </div>
 <script src="Scripts/angular.min.js"></script>
 <script src="Scripts/angular-route.min.js"></script>

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

     demoApp.config(['$routeProvider', function($routeProvider){
        $routeProvider
            .when('/view1', {
                templateUrl: 'demoPartials/view1.html',
                controller: 'SimpleController'
            })
            .when('/view2', {
                templateUrl: 'demoPartials/view2.html',
                controller: 'SimpleController'
            })
            .otherwise({redirectTo: '/view1'});
     }]);

     demoApp.controller('SimpleController', function($scope){
        $scope.customers = [
            {name:'A F', city:'M'},
            {name:'D D', city:'B'},
            {name:'S J', city:'I'}
        ];
        $scope.addCustomer = function(){
            $scope.cutomers.push(
                {
                    name: $scope.newCustomer.name,
                    city: $scope.newCustomer.city
                }
            );
        };
     });
 </script>
 </body>
 </html>

El problema del enrutamiento es que cada vez que hago clic en el enlace view2 no se dirige a la página View2.html. ¿Cómo debo arreglarlo?

La página View1

<div class="container">
    <h2>View 1</h2>
    Name:
    <br>
    <input type="text" data-ng-model="filter.name">
    <br>
    <ul>
        <li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">
            {{ cust.name }} - {{ cust.city }}
        </li>
    </ul>
    <br>
    Customer Name: <br>
    <input type="text" data-ng-model="newCustomer.name">
    <br>
    Customer City: <br>
    <input type="text" data-ng-model="newCustomer.city">
    <br>
    <button data-ng-click="addCustomer()">Add Cutomer</button>
    <br>
    <a href="#/view2.html">View 2</a>
</div>

Y ver la página 2

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

Verifique las imágenes una vez.

Vista normal de la página: https://s15.postimg.org/3jrg76nsb/image.png

Después de hacer clic en view2: https://s7.postimg.org/7xazbqqij/image.png

-1
Abhishek D 2 abr. 2017 a las 10:25

2 respuestas

La mejor respuesta

Su view2 dentro de view1.html debe ser el nombre de la ruta

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

DEMO

2
Sajeetharan 2 abr. 2017 a las 07:30

Actualice href al nombre de la ruta

<a href="#/view2">View 2</a>
1
Matej Marconak 2 abr. 2017 a las 07:28