1

我无法使 angularjs 视图工作。他们在AngularJS 上有一个工作演示： ngView，但他们提供的 jsfiddle 不起作用。我试着玩一下它，但我仍然一无所获。建议？任何链接到一个真正有效的例子？

这是我的代码：（实际上是他们的）

索引.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>angular</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body>

<div ng-app="ngView">
  <div ng-controller="MainCntl">
    Choose:
    <a href="Book/Moby">Moby</a> |
    <a href="Book/Moby/ch/1">Moby: Ch1</a> |
    <a href="Book/Gatsby">Gatsby</a> |
    <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
    <a href="Book/Scarlet">Scarlet Letter</a><br/>

    <div ng-view></div>
    <hr />

    <pre>$location.path() = {{$location.path()}}</pre>
    <pre>$route.current.template = {{$route.current.template}}</pre>
    <pre>$route.current.params = {{$route.current.params}}</pre>
    <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
    <pre>$routeParams = {{$routeParams}}</pre>
  </div>

  <!-- book.html -->
  <script type="text/ng-template" id="book.html">
    controller: {{name}}<br />
    Book Id: {{params.bookId}}<br />
  </script>

  <!-- chapter.html -->
  <script type="text/ng-template" id="chapter.html">
    controller: {{name}}<br />
    Book Id: {{params.bookId}}<br />
    Chapter Id: {{params.chapterId}}
  </script>
</div>​
​&lt;/body>
</html>

脚本.js

angular.module('ngView', [], function($routeProvider, $locationProvider) {
  console.log($routeProvider, $locationProvider);
  $routeProvider.when('/Book/:bookId', {
    templateUrl: 'book.html',
    controller: BookCntl
  }).when('/Book/:bookId/ch/:chapterId', {
    templateUrl: 'chapter.html',
    controller: ChapterCntl
  });

  // configure html5 to get links working on jsfiddle
  $locationProvider.html5Mode(true);
});

function MainCntl($scope, $route, $routeParams, $location) {
  $scope.$route = $route;
  $scope.$location = $location;
  $scope.$routeParams = $routeParams;
}

function BookCntl($scope, $routeParams) {
  console.log($scope, $routeParams);
  $scope.name = "BookCntl";
  $scope.params = $routeParams;
}

function ChapterCntl($scope, $routeParams) {
  console.log($scope, $routeParams);
  $scope.name = "ChapterCntl";
  $scope.params = $routeParams;
}

我错过了什么……？

4

1 回答 1

3

如果你用绝对链接替换链接，jsFiddle 就可以工作——这是 Fiddle 中的一个错误。

Choose:
<a href="Book/Moby">Moby</a> |
<a href="Book/Moby/ch/1">Moby: Ch1</a> |
<a href="Book/Gatsby">Gatsby</a> |
<a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
<a href="Book/Scarlet">Scarlet Letter</a><br/>

至

Choose:
<a href="/Book/Moby">Moby</a> |
<a href="/Book/Moby/ch/1">Moby: Ch1</a> |
<a href="/Book/Gatsby">Gatsby</a> |
<a href="/Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
<a href="/Book/Scarlet">Scarlet Letter</a><br/>

这是一个工作小提琴：http: //jsfiddle.net/ZFHha/1/

于 2012-11-10T04:39:24.143 回答