[ionic开源项目教程] - 第9讲 新闻详情页的实现

目录

• [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令

• [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js

• [ionic开源项目教程] 第3讲 使用Tabs和SlideBox实现左右滑动菜单

• [ionic开源项目教程] 第4讲 通过Service层获取新闻列表

• [ionic开源项目教程] 第5讲 如何在项目中使用全局配置

• [ionic开源项目教程] 第6讲 过滤器filter的使用

• [ionic开源项目教程] 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

• [ionic开源项目教程] 第8讲  根据菜单分类加载数据(重要)

• [ionic开源项目教程] 第9讲 新闻详情页的实现[ionic开源项目教程]

• [ionic开源项目教程] 第10讲 新闻详情页的用户体验优化

• [ionic开源项目教程] 第11讲 封装BaseController实现controller继承
• [ionic开源项目教程] 第12讲 医疗模块的实现以及Service层loadMore和doRefresh的提取封装
• ​[ionic开源项目教程] 第13讲 Service层继续优化，提取公用Service，以及生活和农业两大模块的实现

[效果图]

步骤如下：

1.在app.js中配置新闻详情页的路由

.state('tab.tab1-details', {
    url: '/tab/tab1-details/:id/:title',
    views: {
      'tab1': {
        templateUrl: 'templates/tab1-details.html',
        controller: 'Tab1DetailsCtrl'
      }
    }
  })

2.新建新闻详情页的视图tab1-details.html

<ion-view title="{{title}}">
   <ion-content class="padding">
        <div ng-bind-html="item.message"></div>
   </ion-content>
</ion-view>

3.在tab1.html中添加ng-click跳转事件goDetails

<a ng-repeat="item in slide.items" class="item item-thumbnail-right item-text-wrap" ng-click="goDetails(item)">
    <img ng-src="{{imgUrl+item.img}}" width="30" height="30" alt="">
    <h3>{{::item.title}}</h3>
    <p>{{::item.description | substring:item.description}}</p>
</a> 

4.在Tab1Ctrl中实现goDetails

$scope.goDetails = function (item) {
    $state.go('tab.tab1-details', { id: item.id,title:item.title })
}

5.在Tab1Service中实现getDetails获取新闻详情

this.getDetails = function (id) {
    return $http.get(urls.info_show + id);
}

6.配置config.js中的服务器url

var server = {
    domain : "http://www.tngou.net/api",
    imgUrl : "http://tnfs.tngou.net/image"
}

var urls = {
    info_show:server.domain+"/info/show?id="
}
var settings = {
    rows : 10
}

var cache = {
    user: "TongeNews"
}

7.新建Tab1DetailsCtrl控制器，调用Tab1Service中的getDetails获取新闻详情，并显示到view层。

 .controller('Tab1DetailsCtrl', function ($scope, $stateParams, Tab1Service) {
        var id = $stateParams.id;
        $scope.title = $stateParams.title;
        Tab1Service.getDetails(id).success(function (response) {
            $scope.item = response;
        })
    })

到这里如果有任何问题，请通过文章最下面的联系方式联系我。