ngRoute - 不显示模板答案

【问题标题】：ngRoute - not displaying templatengRoute - 不显示模板
【发布时间】：2017-02-22 06:43:16
【问题描述】：

我正在使用 ngRoute 来显示 2 个不同的模板，我正在正确获取一个模板，即 view1.html，但是当我单击我的链接（View2）时，我没有在第二个模板（即 view2.html）中获得我的控制器列表.

<html>
   <head>
   <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
   <script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js" type="text/javascript"></script>
   <script src="https://code.angularjs.org/1.5.0-rc.2/angular-messages.min.js"></script>
   <script src="https://code.angularjs.org/1.5.0-rc.2/angular-resource.min.js"></script>
   <script src="https://code.angularjs.org/1.5.0-rc.2/angular-route.min.js"></script>
</head>

 <body>
        <!-- Placeholder for the views -->
    <div data-ng-app="demoApp">
      <ng-view></ng-view>   
    </div> 

    <script>
         var demoApp = angular.module("demoApp", ["ngRoute"]);
         demoApp.config(function($routeProvider){
             $routeProvider
                .when('/view1',
                      {    
                        controller: 'simpleController',
                        templateUrl: 'view1.html'
                      })
                .when('/view2',
                      {    
                        controller: 'simpleController',
                        templateUrl: 'view2.html'
                      })
                .otherwise ({ redirectTo: '/view1'});                     
         });
         demoApp.controller('simpleController', function($scope) {
           $scope.customers =[
               {name:'Shahzad',city:'shahjahanpur'},  
               {name:'Irshad', city:'Lucknow'}, 
               {name:'Shamshad', city:'rampur'}
           ];
            $scope.addCustomer = function(){
                $scope.customers.push(
                    { name: $scope.newCustomer.name, 
                      city: $scope.newCustomer.city
                    });
            }; 
        });        
      </script>
</body> 
</html>

**View1.html**

<div>
    <h2>View 1</h2>
        Name : 
        <br />
        <input type="text" data-ng-model="filter.names" />
        <ul>
          <li data-ng-repeat="cust in customers | filter:filter.names | filter:city | orderBy:'city'"> {{ cust.name | lowercase}} - {{ cust.city | uppercase }}</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 Customer</button>   
    <br /><br />
    <a href="#/view2" > View2</a>
</div>  

**View2.html**

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

【问题讨论】：

试试这个

标签： angularjs

【解决方案1】：

默认情况下，AngularJS 会路由带有标签的 URL。

这是 Angular 中 # url 的问题。

改变，

<a href="#/view2" > View2</a>

到，

<a href="#!/view2" > View2</a>

HERE IS A WORKING DEMO OF YOUR CODE

【讨论】：

@user2147423，请查看我的回答。