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