ngRoute not working. is there something i am doing wrong

问题

Below is the code i am trying to execute but it is not routing to View1. in View1 i am just looping through each element of Simplecontroller.

Please help.

<!DOCTYPE html>
<html data-ng-app="App">
<head>
    <title>a</title>        
</head>
<body>            
   <script src="Scripts/angular.min.js" type="text/javascript"></script>          
   <script src="Scripts/angular-route.min.js" type="text/javascript"></script>        
   <script  type="text/javascript">

            var App = angular.module('App', ['ngRoute']);
            App.config(function ($routeProvider) {                
                $routeProvider
                    .when('/', { templateUrl: 'Partials/View1.htm',     controller:'SimpleController' })
                    .when('/partial2', { templateUrl: 'Partials/View2.htm', controller: 'SimpleController' })
                    .otherwise({ redirectTo: '/AJTest' });
            });

            App.controller('SimpleController', function ($scope) {
                $scope.customers =
                                [
                                    { name: 'a', city: 'a' },
                                    { name: 'b', city: 'b' },
                                    { name: 'c', city: 'c' },
                                    { name: 'd', city: 'd' }
                                ];
            $scope.addCustomer = function () {
                $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
            }
        });

    </script> 
    <div data-ng-controller="SimpleController">
        Name :<br /> 
        <input type="text" data-ng-model="name" />  {{ name }}    
        <ul>
            <li data-ng-repeat="cust in customers | filter:name | orderBy:city">{{ cust.name  + ' ' + cust.city}} </li>
        </ul>
    </div>                                
</body>
</html>

thanks in advance.

回答1:

All in all the "code" you posted doesn't make sense, first of all if you wish to use ngRoute and populate views with templates, you need a ng-view somewhere, secondly the code executes SimpleController which generates the expected output in the main application, not in a view... Anyways... Here is a Plunker that does what I think your trying to do:

http://plnkr.co/edit/oVSHzzjG3SrvpNsDkvDS?p=preview

Application:

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

App.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'view1.html',
      controller: 'View1Controller'
    })
    .when('/partial2', {
      templateUrl: 'view2.html',
      controller: 'View2Controller'
    })
    .otherwise({
      redirectTo: '/404'
    });
});

App.controller('View1Controller', function($scope) {
  $scope.customers = [{
    name: 'a',
    city: 'a'
  }, {
    name: 'b',
    city: 'b'
  }, {
    name: 'c',
    city: 'c'
  }, {
    name: 'd',
    city: 'd'
  }];
  $scope.addCustomer = function() {
    $scope.customers.push({
      name: $scope.newCustomer.name,
      city: $scope.newCustomer.city
    });
  }
});

App.controller('View2Controller', function($scope) {
  $scope.hello = "BOOOO!";
});

Main Page:

<!DOCTYPE html>
<html ng-app="App">
<body>


  <a href="#/">VIEW 1</a> - <a href="#/partial2">VIEW 2</a>


  <div ng-view></div>

  <script src="https://code.angularjs.org/1.2.16/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.2.16/angular-route.min.js"></script>
  <script src="script.js" ></script>
</body>

</html>

View1:

HELLO FROM VIEW 1:

<br />
<br />Running through items in the view::
<br />Name :
<br />
<input type="text" data-ng-model="name" />{{ name }}
<ul>
  <li data-ng-repeat="cust in customers | filter:name | orderBy:city">{{ cust.name + ' ' + cust.city}}</li>
</ul>

来源：https://stackoverflow.com/questions/23075319/ngroute-not-working-is-there-something-i-am-doing-wrong

标签

javascript

angularjs-routing