[Ionic Open source Project Tutorial]-9th The implementation of the News detail page

Directory

• [Ionic Open source Project Tutorial] 1th Preface, Technical Reserve, Environment building, common command

• [Ionic Open source Project Tutorial] 2nd new Project, architecture page, configuration app.js and Controllers.js

• [Ionic Open Source Project Tutorial] 3rd talk about using tabs and Slidebox to implement left and right sliding menu

• [Ionic Open source Project Tutorial] 4th. Get news list through service layer

• [Ionic Open source Project Tutorial] 5th how to use global configuration in a project

• [Ionic Open source Project Tutorial] 6th talk about the use of filter filters

• [Ionic Open source Project Tutorial] 7th implementation Pull-up refresh pull-up load ion-refresher and Ion-infinite-scroll

• [Ionic Open Source Project Tutorial] 8th talk about loading data according to the menu category (important)

• [Ionic Open source Project Tutorial] 9th the implementation of the News detail page [Ionic open source Project Tutorial]

• [Ionic Open source Project Tutorial] 10th talk about the user experience optimization of the News detail page

• [Ionic Open source Project Tutorial] 11th Lecture Package Basecontroller Implement controller inheritance
• [Ionic Open source Project Tutorial] 12th, the implementation of the Medical module and service layer Loadmore and Dorefresh extraction Package
• ? [Ionic Open source Project Tutorial] 13th, service layer continued optimization, extraction of public service, and life and agriculture two modules of the implementation

[]

The steps are as follows:

1. Configure the route for the News details page in App.js

. State (' Tab.tab1-details ', {    '/tab/tab1-details/:id/:title '), views    :      {' tab1 ': {        ' templates/tab1-details.html ',        ' Tab1detailsctrl '}}  )

2. View of new News Details page tab1-details.html

<Ion-viewtitle= "{{title}}">   <ion-contentclass= "padding">        <Divng-bind-html= "Item.message"></Div>   </ion-content></Ion-view>

3. Add Ng-click Jump event in tab1.html godetails

<ang-repeat= "Item in Slide.items"class= "Item Item-thumbnail-right item-text-wrap"Ng-click= "Godetails (item)">    <imgng-src= "{{imgurl+item.img}}"width= "+"Height= "+"alt="">    <H3>{{:: Item.title}}</H3>    <P>{{:: item.description | substring:item.description}}</P></a> 

4. Implement Godetails in Tab1ctrl

function (item) {    $state. Go (' tab.tab1-details ', {id:item.id,title:item.title})}

5. Implement Getdetails in Tab1service to get news details

 This function (ID) {    return $http. Get (urls.info_show + ID);}

6. Configure the server URL in config.js

var server = {    "Http://www.tngou.net/api",    "Http://tnfs.tngou.net/image"}  var urls = {    info_show:server.domain+ "/info/show?id="}var settings = {    ten}var cache = {    "tongenews"}

7. Create a new Tab1detailsctrl controller, call the getdetails in Tab1service to get the news details and display it to the view layer.

function ($scope, $stateParams, Tab1service) {        var id = $stateParams. ID;         = $stateParams. title;        Tab1service.getdetails (ID). Success (function  (response) {            = response;        })    }) 

If you have any questions, please contact me by contacting us at the bottom of the article.

[Ionic Open source Project Tutorial]-9th The implementation of the News detail page