Question

app.js //这是我的app.js文件我已经包含了另一个包含HeaderCtrlModule的文件

var app = angular.module("BooKart",["ngRoute","HeaderCtrlModule"]);

app.config(function($routeProvider){
$routeProvider
.when("/books",{
 templateUrl: "views/book-list.html",
 controller: "BookListCtrl"
 })
 .when("/kart",{
 templateUrl: "views/kart-list.html"
 })
 .otherwise({
  redirectTo: "/books"
 })
 });

kart-list.html //这会加载卡丁车视图

<div>
This is Kart view.
</div>

book-list.html //这会加载书单视图

<div id="bookListWrapper">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search here...">
</div>
</form>
<br/>
<ul class="list-unstyled">
<li class="book" ng-repeat="book in books"
style="background: white url('imgs/{{book.imgUrl}}') no-repeat">
<div class="book-details clearfix">
<h3>{{book.name}}</h3>
<p>{{book.price}}</p>
<ul class="list-unstyled list-inline">
<li>Rating: {{book.rating}}</li>
<li>Binding: {{book.binding}}</li>
<li>Publisher: {{book.publisher}}</li>
<li>Released: {{book.releaseDate}}</li>
</ul>
<p>{{book.details}}</p>
<button class="btn btn-info pull-right" ng-click="addToKart(book)">Add to 
Kart</button>
</div>
</li>
</ul>
</div>

的index.html

<!doctype html>

<html lang="en" ng-app="BooKart">

<head>
  <meta charset="utf-8">
  <title>Welcome to BooKart</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular.js"></script>
  <script src="lib/angular-route.min.js"></script>
  <script src="js/controllers/app.js"></script>

  <script src="js/controllers/HeaderCtrl.js"></script>
  </head>
  <body>

  <div id="header-wrapper" ng-controller="HeaderCtrl">
      <span class="logo pull-left">{{appDetails.title}}</span>
      <span class="tagline pull-left">{{appDetails.tagline}}</span>
  <div class="nav-wrapper 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>

HeaderCtrl.js

angular.module("HeaderCtrlModule",[])

.controller("HeaderCtrl",["$scope",function($scope)
{

$scope.appDetails = {};
$scope.appDetails.title = "BooKart";
$scope.appDetails.tagline = "We have 1 Million Books for you";

}])

.controller("BookListCtrl",["$scope","$http",function($scope,$http){
{

$scope.books = [
    {
        imgUrl: "adultery.jpeg",
        name: "Adultery",
        price: 205,
        rating: 4,
        binding: "Paperback",
        publisher: "Random House India",
        releaseDate: "12-08-2014",
        details: "Linda, in her thirties, begins to question the routine and 
predictability of her days. In everybodys eyes, she has a perfect life-happy 
marriage, children and a career. Yet what she feels is an eno... <a 
href='#'>View More<a>"
    },
    {
        imgUrl: "geronimo.jpeg",
        name: "Geronimo Stilton Spacemice#2 : You're Mine, Captain!",
        price: 168,
        rating: 5,
        binding: "Paperback",
        publisher: "Scholastic",
        releaseDate: "01-07-2014",
        details: "Geronimo Stilton meets outer space in this cosmically fun 
 spin-off series!Meet Geronimo StiltonixHe is a spacemouse - the Geronimo 
 Stilton of a parallel universe! He is captain of the spaceship Mou... View 
 More"
    },
    {
        imgUrl: "life-or-death.jpeg",
        name: "Life or Death",
        price: 339,
        rating: 4,
        binding: "Paperback",
        publisher: "Hachette India",
        releaseDate: "01-04-2014",
        details: "Why would a man escape from prison the day before he's due 
   to be released? Audie Palmer has spent a decade in prison for an armed 
  robbery in which four people died, including two of his gang. Five... View 
More"
    },
    {
        imgUrl: "playing.jpeg",
        name: "Playing It My Way : My Autobiography",
        price: 599,
        rating: 5,
        binding: "Hardcover",
        publisher: "Hodder & Stoughton",
        releaseDate: "01-08-2014",
        details: "I knew that if I agreed to write my story, I would have to 
be completely honest, as thats the way I have always played the game and 
that would mean talking about a number of things I have not addr... View 
More"
    },
    {
        imgUrl: "the-fault.jpeg",
        name: "The Fault in Our Stars",
        price: 227,
        rating: 4.5,
        binding: "Paperback",
        publisher: "Penguin Books Ltd",
        releaseDate: "25-01-2013",
        details: "Despite the tumor-shrinking medical miracle that has 
 bought her a few years, Hazel has never been anything but terminal, her 
 final chapter inscribed upon diagnosis. But when a gorgeous plot twist n... 
 View More"
    },
    {
        imgUrl: "wings-of-fire.jpeg",
        name: "Wings of Fire: An Autobiography",
        price: 124,
        rating: 5,
        binding: "Paperback",
        publisher: "Universities Press",
        releaseDate: "25-08-2000",
        details: "Wings of Fire traces the life and times of India's former 
 president A.P.J. Abdul Kalam. It gives a glimpse of his childhood as well 
 as his growth as India's Missile Man. Summary of the Book Wings... View 
 More"
    }


$scope.addToKart = function(book)
{
    console.log("add to kart: ", book);
}

}]);

我认为代码看起来很好我还包括＃！/而不是＃/不确定为什么它不起作用请一些看看告诉我有什么问题。我是棱角分明的新手，控制台上没有任何错误，所以这也没有帮助。提前致谢。请帮帮我

Answer 1

如果您不使用本地服务器，则Chrome不会在现有html中加载其他html文件。但是，它可以在Firefox浏览器中使用..

尝试使用visual studio。在visual studio中创建一个项目并使用它运行。

Answer 2

您的代码中存在一些问题：

删除{功能中的额外BookListCtrl。

更正您的路线，将其更改为：href="#/kart"

请参阅此working plunker

您添加的脚本似乎没问题，只是建议您的模块名称为BooKart，而不是BookKart

ng-view无法使用我的应用

2 个答案: