粗糙版斗破苍穹网络阅读器

在学Angularjs， 把angularjs.org上tutorial给点例子改了改，我的粗糙版斗破苍穹阅读器就完成了。

没有任何的格式，看起来有点累，先将就下吧， 看下效果：

代码太丑，不全贴了，几个地方说明下：

1. 页面的route

angular.module('library', ['charpterServices']).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/books', {templateUrl: 'partials/book-list.html',   controller: BookListCtrl}).
            when('/books/:bookId', {templateUrl: 'partials/book-detail.html', controller: BookDetailCtrl}).
            when('/books/:bookId/:charpterId',{templateUrl:'partials/charpter-content.html', controller:CharpterContentCtrl}).
            otherwise({redirectTo: '/books'});
    }]);

条用$routeProvider根据url对<ng-view>进行替换，使用charpterId做为参数，只要在url里输入章节数，就能看对相应的章节内容。

2. 章节内容的获取：

angular.module('charpterServices', ['ngResource']).
    factory('Charpter', function($resource){
        return $resource('charpters/:charpterId.json', {}, {
            query: {method:'GET', params:{charpterId:'charpters'}, isArray:true}
        });
    });

提供charpters.json，列举所有的章节，用以生成目录，可通过该service的get方法获取某一章节的内容。

有一点不确定的是，通过$resource说获得的数据都是以json格式，所以每一章节都用一个json文件来存储，文件名为章节对应的数字，内容包括标题和正文。

 

3. 上一章，下一章超链接的实现：

 在页面上：

 <a href="#/books/tpcq/{{preCharpter}}">上一章</a>

 <a href="#/books/tpcq/{{nextCharpter}}">下一章</a>

在控制器中：

function CharpterContentCtrl($scope,$routeParams,Charpter){
    Charpter.get({charpterId:$routeParams.charpterId}, function(charpter){
        $scope.title = charpter.title;
        $scope.content = charpter.content;
    });

    $scope.preCharpter =  parseInt($routeParams.charpterId)-1;
    $scope.nextCharpter = parseInt($routeParams.charpterId)+1;
}

本来想用button然后用ng-click， 但是这样的url中的charpterId没法一起变化，所以偷懒用<a></a>倒是省事。