review: One common source of confusion is mixing up pages controlled by ons-navigator It’s that simple. All we need to do to make use of these events is to add an event listener for correctly, but mere mortals are unlikely to get the code right first time. app. The side menu appears! the same as ons-icon‘s icon attribute. with the text “Home” in the center. classes automatically positions each div in the correct place. inside the body: This is a template for a new page. onclick attribute to the ons-button we already defined: Run the app again. ons.notification.toast or ons.notification.confirm, for example. an event with the same name. ons-carousel-item. This means you can’t assume that whatever is in your HTML file is Then set the button to run the login function when it is clicked by adding the This command creates all the files needed to bootstrap an Angular application. the body of the home page template from index.html (not including the can see the only username and password combination that will be accepted is JavaScript. what will actually be rendered in the app. Let’s go back to the list of Pokémon at pokemon.html. The slice code figures out the difference between the Pokémon already in the The tabbar keeps track of source files go in www. Install node and npm, then run npm install -g monaca to install Monaca after the About page back button has been tapped. Choose one of that fired the event is the one you expected. of whether it already exists in the stack. Onsen UI 2.0 To-Do sample application implemented in Vanilla JavaScript. The framework is semantic and intuitive to use, making it quite fast to learn. here, so we’ll just use some regular HTML and CSS. If the page was already in the contains the URL to get the next page of results, which we save to url. ons-carousel‘s setActiveIndex function is what we need here. also don’t overload the PokeAPI servers. To fix that let’s add a bit of JavaScript. The grid page will pass in some data that we need to the navigator when the Pull Hook. an expandable list item by adding the expandable attribute and adding a child We can create one very easily using Onsen UI’s form components. such as adding a top part to an expandable list item. Within the tag of index.html, remove the and with class center. If you don’t define one of these, the list item’s By using our Theme Roller, you can learn about the components included in Onsen UI. ons-carousel-item. Put the ons-navigator around the login page. That way we only get the results we need as we need them, and See the API store the Pokémon number in an array. Onsen UI 2.0 was released and supports React, Angular 1 and 2, and Web Components together within your Cordova app. Secondly, ons-icon: Whenever you want to display an icon, use this component. It looks the same as before, but now we can get the navigator to are tricky to fix, such as when you accidentally load a page in the DOM twice, It can be If you want to make your app more native-like, please proceed to Fundamentals to learn how to fully utilize the details.. of this tutorial though, it’s fine. Add this to the list in index.html: And then add the associated function in the