Ionic navigation and core components
4.2 Setting up the app navigation
4.2.2 Declaring the app views with the state provider Now it’s time to dig into some code. Your
first task is to add the Ionic navigation components into the app HTML markup.
Then you’ll declare one view to start with.
The result will look like figure 4.4, which is mainly the content container with no content and the navigation bar (navbar).
If you’re following along using Git, you can check out the code for this step:
$ git checkout –f step2
ionNavView and ionNavBar are the foun-dational Ionic components for the naviga-tion. ionNavView acts like a placeholder for different view content to be loaded into the app, and ionNavBar shows a header bar that will update as a user moves from view to view. These two com-ponents are designed to work together, but you could use ionNavView without using ionNavBar if you didn’t want a top navbar.
If you’re familiar with frames in HTML, ionNavView is similar in the sense that it allows content to be loaded inside. But ionNavView isn’t an actual frame. If you want to understand more about Angular and templates, refer back to chapter 3. Remember that Angular has a way to take markup (that is, the template) and inject it into the view (in this case, inside of ionNavView). Without ionNavView, the app wouldn’t know where to load the content, so you’ll always need at least one ionNavView in your app if you use navigation.
ionNavBar will place a top bar in the app, which is found in many apps. It’s like a title bar. Think of it like a place where you can put the current view’s title and also use it to place buttons, such as a back button. You’ll use the ionNavBackButton compo-nent in this app because the app users will need a way to go back. In figure 4.1 the bottom-row views will all have a back button to return to the home view. The home view will not show a back button, because it’s the top-level view and the back button will not display.
Take the index.html file in listing 4.1 and add in the navigation components.
These components can’t run without some JavaScript that you’ll add from listing 4.2, but first focus on the components in the markup. This code shows only the contents inside of the </body> tag of the page, but you’ll need to retain the rest of the markup in the HTML file.
Navbar (ionNavBar)
Blank view (ionNavView)
Figure 4.4 A basic app with navigation and a single view with no content
<body ng-app="App">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
<i class="icon ion-ios-arrow-left"></i> Back </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
So far, you’re just declaring placeholders for content. You haven’t actually declared any views, but when you do, these components will automatically know what to do with the information. It’s likely that many apps you build will have markup similar to listing 4.1 as the foundation for the app navigation.
You can see there are classes on some of the components, and this is common.
Ionic allows you to customize the display of many components by using CSS classes.
We’ll cover these options in more detail later.
If you run this code, you’ll notice it doesn’t really do anything yet. That’s because you haven’t declared any views. What you actually need to declare is a list of states for the application. States are a concept given to you from the ui-router. A state is the cur-rent representation of the application that’s visually represented in the view, which would contain details such as the URL associated with the view, the name of the con-troller for the view, and the template attached to the view. In this book, you’ll declare states that are typically linked to a view (the home view in figure 4.1, for example, is a state). For a more in-depth discussion about states, you can refer to the ui-router details at https://github.com/angular-ui/ui-router/wiki.
If you recall, we talked about how routing is the concept for declaring what paths through the application a user can navigate. You could think of it like a folder tree, where states can be organized as children of other states.
Right now you’ve created the home state, but you haven’t yet declared any of the other files inside of that directory to view. The states you declare include a way to route the user to a particular place in the app, which can be done using URLs or using the name of a state. In this book we’ll usually use the state name for navigation.
Let’s have you add some states to the app, as shown in listing 4.2. You’ll add these states into the app.js file, which contains the Angular app definition. You’ll use the
$stateProvider service to declare your states, and the $urlRouterProvider to help Listing 4.1 App navigation components in markup (www/index.html)
Where Angular app show and hide if there’s a way to go back Declares ionNavView,
where each view content will display
provide a fallback in case an invalid request is made. The code in the following listing will be added right after the first line (as shown).
angular.module('App', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) { $stateProvider.state('home', {
url: '/home',
templateUrl: 'views/home/home.html' });
$urlRouterProvider.otherwise('/home');
})
.run(function($ionicPlatform) {
All right, you’ve got the first state declared, and it’s called home. It’s very simple—it will only try to load a template from the URL provided in templateUrl. As you add more states to the app in this chapter, you’ll see other configuration values that can be pro-vided. You can always review the full set of options based on the ui-router documenta-tion. The examples in this chapter will demonstrate the most common variations.
The otherwise() method is important because it catches situations where the application is unable to find the requested route, much like a 404 error page on a website. If a user tries to request a state that doesn’t exist, the otherwise() method will be used to display the home view. It’s always a good idea to declare an otherwise() method in case your app has a routing problem, so it can always have something to show instead of a blank page or error. You might consider making a spe-cial error view that people can use to send you feedback.
You might have noticed there’s a template declared, but you haven’t yet created this file. It’s time to add this last file to make the first view work correctly and see how the view gets loaded into the app. I prefer to organize all of my views into a folder called views, so create a new file at www/views/home/home.html and put the con-tents from the following listing inside.
Listing 4.2 Declaring app states (www/js/app.js)
Angular module definition, already in file
Adds new config method and injects
$stateProvider
Declares a fallback URL to go to if app can’t find requested state
Tells state to load a template from a given URL when view is active Angular run method,
already in file Declares first state
for home view
Gives state a URL that can be used with anchor links
<ion-view view-title="Aloha Resort" hide-back-button="true">
</ion-view>
Now you can run the code and see that it runs correctly. You should see the app run-ning with a blue navbar and the title “Aloha Resort.” The rest of the view is blank, for the moment. You’ll add that in next. It should look like you see in figure 4.4.
Note the hide-back-button attribute. This attribute tells ionNavBar that this view doesn’t want the back button to show. There are other ionView attributes that you may use that you can find in the documentation.
Now this isn’t terribly impressive just yet! Let’s move on to the next part where you’ll get the home view set up. Along the way we’ll talk about the content area, how to use icons, and lists.