In this project, we would like to add a new tab that highlights the developers of this application. This will inform the potential users of this app about how to get in touch with the developers to provide them with the necessary feedback to improve the app experience.
In order to achieve this, we'll need to perform the following four main steps:
- Create a new controller entry in
controllers.js. - Create a new tab controller called
tab-aboutin HTML. - Add a new tab entry in the
tabs.htmlfile. - Consolidate our work in the
app.jsfile and connect everything together.
Let's start with adding a controller for the new tab. Head over to controllers.js and add the following into it:
controller('AboutCtrl', function($scope) {})Don't worry about the empty function for now. At the moment, our tab does not need any functionality apart from simply appearing.
Now that we have a controller, we need to implement the view for the new tab. The first order of business is to make sure that the tab is added to the list of tabs. To do so, modify tabs.html to include the following:
<!-- About Tab --> <ion-tab title="About" icon-off="ion-ios-information-outline" icon-on="ion-ios-information" href="#/tab/about"> <ion-nav-view name="tab-about"></ion-nav-view> </ion-tab>
This creates the fundamental bindings for the new tab and adds it to the list of tabs. However, we will still need to add the content that should open when the user clicks on the tab. To do so, create a new file called tab-about.html in the templates folder and put the following code in it:
<ion-view view-title="About">
<ion-content>
<div class="list card">
<a href="#" class="item item-icon-left">
<i class="icon ion-ios-people"></i>
Christopher Svanefalk and Stefan Buttigieg
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-home"></i>
Malta and Sweden
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-ios-telephone"></i>
+3569912345678
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-ios-world-outline"></i>
www.ionicframework.com
</a>
</div>
</ion-content>
</ion-view>Next, we need to add a new navigation state to the controller in order to allow the user to navigate, with the help of clicks, to the tab-about.html tabs content page. To do so, open the app.js file and add the following state:
state('tab.about', {
url: '/about',
views: {
'tab-about': {
templateUrl: 'templates/tab-about.html',
controller: 'AboutCtrl'
}
}
})Note that the following is what the preceding code does:
- The
urlproperty determines whether the application enters into the state of accessing the/aboutURL. - Inside the
viewsproperty we determine the path to theview, which should be loaded when this application enters into theviewstate. In this case, it is thetab-about.htmlfile that we created earlier. - Finally, inside
views, we also determine whichcontrolleris responsible for handling this application state. In our case, it is theAboutCtrlcontroller, which was defined by us earlier.
Quick testing is possible through your local browser. Once you save your project files with your IDE, you will be able to see your app in the prototype form through your browser:
- First navigate to the project folder:
cd myfirstionicapp - Then, type in the follow command:
ionic serve --lab
The results for this are shown in the following screenshot. These results are adapted for both iOS and Android. In addition to this, you'll be able to test your application through a point-and-click interface. This experience is similar to having an iOS or Android emulator working through a browser:
