Blog

When you create a new Ionic/AngularJS app in Appery.io, every app has two pages out-of-the-box. index is the main template page and Screen1 is a page that uses the template. Any other pages that you create will use the index template page. Most pages in your app will have a header. If you open Screen1 or any other page, you will see that it doesn’t have a header area. That’s how it supposed to be since the index template has the common header. You can set a static page title in the index page but then you will have the same page header on all other pages. Most likely you want to the page header to change on different pages. We are going to show you how to do that in an AngularJS app.

You are going to build a very simple app that looks like this:

Ionic app

Let’s go!

1. Create a new Ionic/AngularJS app in Appery.io
2. Open the index page and activate the header component. For the Text property, set the value to {{header.title}}
   

   App Builder for Ionic

3. Open Project > Model
4. Create a model with the name Header
5. Click Add and create a property called title
   

   App model

   This will create a variable that you can place in the scope.

6. Go to the index screen, select to Scope side-tab, and add a header scope variable with a type of Header. This will place the variable header (type Header) into the Angular scope.
   

   Setting scope variable

7. Opposite the init function, click Edit and add the following JavaScript code:

   $scope.header.title = "Main Header";

   

   Scope function

   This sets the variable in the scope to the page title. This variable is set in index page scope. As this is the template page scope variable, it will also be accessible in any child pages

8. Create a new page by selecting Create new > Page. For page name keep the default name (Screen2). This is a child page that will use the index page template.
9. Open the Scope view for the newly created page.
10. Open the init function for editing and type this code:

    $scope.header.title = "Sub-page Header";

    This works because the sub-page has access to the header.title variable. The sub-page will start looking for header.title in its own scope. It’s not defined there, so it will move up to look in the parent page (index) scope. That’s where the variable will be found.

11. Open another child page called Screen1
12. Place a button component on this page. Change the button label to Go to page 2
13. Select the page root up in breadcrumbs.
14. Add a navigate-to directive in the Properties view and set it to page2. This sets up the navigation from one page to the next. You also need to define the actual navigation rule.
15. Go to Project > Routing. Enter page2 for the route name and select Screen2 for the page.
16. Click Add. That’s it.

You are now ready to run and test the app. You can test in the browser or directly on the device.

This is how the first page looks:

First page

This is how the second page looks with a different page title:

Second page