AngularJS路由页面未显示

时间:2016-01-05 22:39:55

标签: javascript html angularjs routes

这么快的问题我一直在看这段代码但是找不到原因,只是给了我页面上的输出

Partials/View1.html

我不想在这里遇到一些小问题时发布这个问题但是这一段时间以来我一直困惑不已,我在控制台上没有错误。我运行了来自http://plnkr.co/edit/sN9TagVBOdX3mkrxaTiu?p=preview的代码,在另一篇文章中提到它并且工作正常,但我没有从中获得正确的输出。以下是index.html(主页)

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
</head> 
<body>
    <div ng-view></div>


        <script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
    <script src="scripts.js"></script>
</body>

我的脚本看起来像:

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

            demoApp.config(function($routeProvider) {
            $routeProvider
                .when('/',
                      {
                        controller: 'SimpleController',
                        template: 'Partials/View1.html'
                      })
                .when('/partial2',
                     {
                        controller: 'SimpleController',
                        template: 'Partials/View2.html'
                    })
                .otherwise({ redirectTo: '/'});
         } );

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

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

            });
        }
    });

而且我没有从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">
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>

1 个答案:

答案 0 :(得分:2)

你应该使用templateUrl而不是template:

.when('/partial2',
   {
     controller: 'SimpleController',
     templateUrl: 'Partials/View2.html'
   })

https://docs.angularjs.org/api/ngRoute/provider/$routeProvider