CODEWITHSUNDEEP
javascriptweb-applicationsangularjs
slacktracer
slacktracer

Reputation: 6306

Views in AngularJS - How to make them work?

I am unable to make angularjs views work. They have a working demo at AngularJS: ngView, but the jsfiddle they provide there doesn't work. I'm trying to play with it a little but still I got nothing. Suggestions? Any links to a really working example?

Here's my code: (actually, theirs)

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

What am I missing...?

Upvotes: 1

Views: 2432

Answers (1)

Michelle Tilley
Michelle Tilley

Reputation: 159095

The jsFiddle works if you replace the links with absolute links--this is a bug in the 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/>

to

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

Here is a working Fiddle: http://jsfiddle.net/ZFHha/1/

Upvotes: 3

Related Questions