Sliding, swiping, and toggling are a vital gestures needed in a mobile app. In this video tutorial, you'll learn how to add sliding in your AngularJS mobile app, so users can swipe their fingers to choose an item from a list, for example. In addition, you'll learn how to incorporate a star toggle to bookmark an item, as well as other functions. Each of these features will make your AngularJS mobile app more user-friendly.
- Another bit of functionality you can add to your app…is the ability to do something…when you swipe your fingers on a list item.…So here I am on my sample finished application…and I can grab any of these items…and swipe to the left…and you'll see this icon show up on the right.…If I click on it I can turn on a star…or I can turn it off if I click it on or off.…And I can do that to any one of these elements,…which is pretty cool.…So let's see what it takes to add that to our application.…So right now our application's looking like this.…
And I'm gonna start off in the index.html document…and I'll start off by creating the star…that will appear next to each user.…So I'm gonna create a button with a class of button…button with a clear background…and it's gonna have an icon,…which is gonna be ion-star.…And this will be a button-assertive,…which looks red when it's displayed.…Then what I'll do is I'll add a ng-click directive.…
That means when somebody clicks on this button…I can run a function called toggleStar…with the current item,…
- Installing the development environment on Mac or PC
- Understanding the Ionic templates and CSS components
- Adding IonicIcons to a layout
- Adding tabs, cards, and lists
- Using form elements
- Building a single view app
- Implementing Pull to Refresh
- Creating a multi-tab app
- Styling the applications
- Deploying applications
Skill Level Intermediate
1. Getting Started
2. Using Ionic CSS Components
3. Building a Single-View App
4. Creating a Multi-Tab Application
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.