We are building quotes apps, our apps by default will display all the quotes from one JSON file and we can type to find quotes from a particular author.
What are we learning?
- Use HTTP REST call to read a JSON file containing all quotes in quotes.ts.
- Sharing the quotes on social networking twitter through cordova-plugin-x-socialsharing.
- Uploading the data file i.e quotes.JSON in www/assets/data/quotes.json.
- Passing data between different page.
- From angular side, we control the search through
Let’s build the apps, following all the steps as
Step 1: Creating the apps through blank template and adding two more page as
Step 2: Remove the default home page and replace rootPage value from homePage to QuotesListPage in the app.components.ts
and we also need to add the reference in app.modules for our two new page and also add SocialSharing provider which we will install the plugin for twitter sharing
Note: quotesList is the variable defined to contain the JSON object. filteredQuotes is the variable which will contain the search results. When we click on any one quote, we will navigate to quotes-detail page with full quotes with author information.
Step 4: Adding the search result, now we will add the search bar to search quote through author name. Add the following code in pages/quotes-list/quotes-list.html
The search box when we type more than 2 characters, searchQuotes() is called for searching the JSON object, it will filter the quotes from the quotesList variable. The first ion-list is displayed when the isfiltered value is false, to display the entire list of quotes. The second ion-list is displayed when the isfiltered value is true, to display only the filtered list of quotes.
Step 5: Adding Social Sharing plugin of ionic
Add following code in pages/quotes-list/quotes-details.html, here we are displaying th quote author and quote in detail and clicking on share twitter will call twitterShare() method to share on twitter apps.
Add following code in pages/quotes-list/quotes-details.ts, we are retrieving quote detail and author information through nav params in constructor from the quotes-list.ts page method itemTapped(event, quote)
Step 6: Format of our quotes.JSON in www/assets/data/quotes.json as