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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.