Javascript AngularJS中的视图-如何使其工作？_Javascript_Web Applications_Angularjs

Javascript AngularJS中的视图-如何使其工作？

javascript web-applications angularjs

Javascript AngularJS中的视图-如何使其工作？,javascript,web-applications,angularjs,Javascript,Web Applications,Angularjs,我无法使angularjs视图正常工作。他们有一个正在运行的演示，但是他们提供的JSFIDLE不起作用。我想玩一玩，但还是一无所获。建议？有没有链接到真正有效的示例这是我的密码：（实际上，是他们的） index.html <!doctype html> <html> <head> <meta charset="UTF-8"> <title>angular</title> <script src="http://

我无法使angularjs视图正常工作。他们有一个正在运行的演示，但是他们提供的JSFIDLE不起作用。我想玩一玩，但还是一无所获。建议？有没有链接到真正有效的示例

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

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>

我遗漏了什么…？

如果用绝对链接替换链接，JSFIDLE就会工作——这是一个错误

选择：
|
|
|
|

到

选择：
|
|
|
|

这是一把小提琴：

你在屏幕/控制台上看到了什么？此外，本教程还有一个这样的工作示例。我开始浏览api文档，完全忘记了本教程。我会尽快查出来的。控制台既不显示错误也不显示警告。它就是不起作用。但这与链接有关！我开始想办法了。无论如何，谢谢你！你是对的（显然）。昨天我注意到它似乎第一次起作用（有时=P）。当然，这都是关于链接的。现在我必须弄清楚如何正确设置我的链接。。。非常感谢你的工作小提琴！相对链接的作用似乎是将它们附加到当前URL上，该URL以

开头，所以这就是它们第一次工作的原因。很乐意帮忙！

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;
}

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/>