Question

我无法使angularjs视图有效。他们在AngularJS: ngView有一个工作演示，但他们提供的jsfiddle不起作用。我想尝试一下但是我什么也没得到。建议？任何链接到一个真正有效的例子？

这是我的代码:(实际上是他们的代码）

的index.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>
</body>
</html>

的script.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;
}

我错过了什么......？

Answer 1

如果用绝对链接替换链接，jsFiddle会起作用 - 这是小提琴中的一个错误。

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/

AngularJS中的视图 - 如何使它们工作？

1 个答案: