Question

我刚刚开始进入AngularJS并且遵循Dan Wahlin的指南AngularJS in 60 Minutes直到第79页。但是，我只会看到我的主页，默认为空白;根据指南，它没有加载我应该的view1.html。我一直试图找到问题，但找不到它。

与本指南不同，我不是通过localhost运行程序，而是通过file：///Users /.../home.html运行。

到目前为止，我在home.html中的代码：

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Lekstuga</title>
</head>


<!-- _________________________________( Home )_________________________________ -->

<body>
<div>
    <div data-ng-view></div>   //here it should load Partials/view1.html
</div>


<!-- _________________________________( Scripts )________________________________  -->

<script src="AngularJSDemos/Scripts/angular.js"></script>
<script>
var demoApp = angular.module('demoApp', []);

demoApp.config(function ($routeProvider) {
    $routeProvider
    .when('/',
    {
        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: 'Kalle Anka', city:'Duckville'}, 
    {name: 'Pelle Andersson', city: 'Pelletown'},
    {name: 'Pelle Eriksson', city:'Pelletown'}, 
    {name: 'Kajsa Larsson', city: 'Kajskroga'}
    ];
    $scope.addCustomer = function () {
        $scope.customers.push(
            { 
                name: $scope.newCustomer.name,
                city: $scope.newCustomer.city
            });
    };      
});



demoApp.controller('SimpleController', SimpleController);

</script>       


<!-- _________________________________( END )_________________________________ -->  

</body>
</html>

跟随我在View1.html中的代码：

<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 | orderBy:'city' | filter:filter.name">
    {{ cust.name }} - {{ 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 />
<a href="#/view2">View 2</a>
</div>

Answer 1

当你说：

templateUrl: 'Partials/View1.html'

Angular看起来与index.html所在的位置相同。您可能已在应用程序/视图中放置了“Partials”文件夹或类似的内容。只需提供相对于'index.html'所在文件夹的完整路径。

但总的来说 - 我可以建议您使用nginx或MAMP运行本地网络服务器，或者只使用Yeoman http://yeoman.io/。这将使您的生活更轻松。

Answer 2

版本1.2发生了变化：路由功能已被模块化。

然而，修复很简单：

在您的代码中加载新的javascript文件：<script src=".yourjs/angular-route.js"></script>您可以在此处下载http://code.angularjs.org/1.2.9/（其他版本的其他版本）
在代码中指明'ngRoute'依赖关系：var demoApp = angular.module('demoApp', ['ngRoute']);

我的SPA不使用路由加载AngularJS

2 个答案: