Question

我正在尝试将两个不同的部分加载到我的页面中。这些路线似乎正在发挥作用。即默认情况下我被重定向到＃/ view1，这就是我想要的。但是，当Partials / View1.html未加载到页面中时，当我手动导航到＃/ view2时也是如此。似乎无法弄清楚我错过了什么。

这是index.html：

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title>Using AngularJS Directives and Data Binding</title>
</head>

<body>

    <div>
        <div ng-view>
            <!-- Placeholder for views -->
        </div>

    </div>

    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>

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

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


        demoApp.controller('SimpleController', function ($scope) {
            $scope.customers = [
                { name: 'John Smith', city: 'Phoenix' }, 
                { name: 'John Doe', city: 'New York City' }, 
                { name: 'Jane Doe', city: 'San Francisco' }
            ];

            $scope.addCustomer = function() {
                $scope.customers.push(
                {
                    name: $scope.newCustomer.name, 
                    city: $scope.newCustomer.city
                });
            };
        });

    </script>


</body>

</html>

和Partials / View1.html：

<div class="container">
    <h2>View 1</h2>

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

    <ul>
        <li ng-repeat="cust in customers | filter: filter.name | orderBy: 'city'">{{ cust.name }} - {{ cust.city }}</li>

    </ul>

    <br>
    Customer Name:  <br>
    <input type="text" ng-model="newCustomer.name">
    <br>
    Customer City:  <br>
    <input type="text" ng-model="newCustomer.city">
    <br>
    <button ng-click="addCustomer()">Add Customer</button>
    <br>
    <a href="#/view2">View 2</a>

</div>

和Partials / View2.html

<div class="container">
    <h2>View 2</h2>

    Name: 
    <br>
    <input type="text" ng-model="city">
    <br>

    <ul>
        <li ng-repeat="cust in customers | filter: name | orderBy: 'city'">{{ cust.name }} - {{ cust.city }}</li>

    </ul>
</div>

Answer 1

尝试使用模板的相对网址：templateUrl: './Partials/View2.html'

编辑（来自评论）：

XMLHttpRequests在本地运行良好 - xmlhttprequest for local files，所以最好的办法是安装一个网络服务器，通过本地http来托管内容。 apache可能是最简单/最广泛安装的，尽管你可以使用node，nginx等。

AngularJS路线 - 视图未加载

1 个答案: