AngularJS中的視圖 - 如何使它們工作？

我無法使angularjs的意見工作。他們在AngularJS: ngView上有一個工作演示，但他們提供的jsfiddle不起作用。我試着玩一下，但仍然沒有得到任何東西。建議？任何鏈接到一個真正的工作示例？AngularJS中的視圖 - 如何使它們工作？

這裏是我的代碼：（實際上，他們的）

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

我在想什麼......？

來源

2012-11-09 slacktracer

你的屏幕/控制檯上看到了什麼？另外，本教程還有一個工作示例 –

我開始走過api文檔，完全忘記了本教程。將盡快檢查出來。控制檯不顯示錯誤或警告。它只是不起作用。但是這與鏈接有關！我開始弄清楚了。無論如何，謝謝！ – slacktracer

如果用絕對鏈接替換鏈接，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/

來源

2012-11-10 04:39:24

你是對的（顯然）。我昨天注意到它似乎第一次工作（有時= P）。這絕對是關於鏈接的。現在我必須弄清楚如何正確設置我的鏈接... 非常感謝你的工作小提琴！ – slacktracer

相對鏈接的效果似乎是它們被追加到當前URL，它以'/'開頭，所以這就是爲什麼它們第一次工作。樂於幫助！ –

AngularJS中的視圖 - 如何使它們工作？

回答

相關問題