Question

我正在使用angularjs开发一个Web应用程序，并且遇到了一些ng-view问题。我已经在app.js中配置了路由，但是当我加载主页面时，部分内容不会显示在视图中。

这是我的index.html：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>


<div id="headerwrap" ng-controller="headerCtrl">
<span class="logo pull-left">{{appDetails.title}}</span>
<span class="tagline-pull">{{ appDetails.tagline}}</span>
<div class="nav-wrap pull left">
<ul class="nav nav-pills">
<li class="active"><a href="#/books">Books</a></li>
<li><a href="#/kart">Kart</a></li>
</ul>
</div>
</div>
<div ng-view></div>

</body>
</html>

这是我的app.js：

var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(function($routeProvider){
$routeProvider
    .when("/books", {
templateURL: 'book-list.html',
controller: "BookListCtrl",
})
    .when("/kart", {
    templateURL: 'kart-list.html',
})
.otherwise({
redirectTo: '/books'
})
});
myApp.controller("headerCtrl", function($scope){
$scope.appDetails = {};
$scope.appDetails.title="Book Store";
$scope.appDetails.tagline="Browse our books";
});
myApp.controller("BookListCtrl", function($scope){
$scope.books = [
{
title:"Hunger Games",
price:205,
rating:5,
col:"red"
},
{
title:"Harry Potter",
price:255,
rating:4,
col:"blue"
}
];
});

这是我的第一部分book-list.html：

<div id="booklistwrapper">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<div>
<ul class="list-unstyled">
<li class="book" style="background: {{book.col}}" ng-repeat="book in books">
<div class="book-details clearfix">
<h3>{{book.title}}</h3>
<p>{{book.price}}</p>
<ul>
<li>{{'Rating: ' + book.rating}}</li>
</ul>
</div>
</li>
</ul> 
</div>

这是我的第二部分，kart-list.html：

<div>
This is the Kart 
</div>

两者都不会加载。有谁知道这可能是由于什么？

ng视图不在Angularjs中加载部分

0 个答案: