Asial Blog

Easily create Master/Detail pages in Onsen UI

Category :
Frontend(HTML5)
Tags :
onsenui
Angular
HTML5
UI
Service

Most mobile apps need a way to transition from one page to another and have the data shared between those pages. Onsen UI makes it easy to do so using AngularJS Service and Controller.



Without further ado, will we create an app that looks like this:





1. Create a project using Onsen UI Minimum Template


1. Log in to monaca.mobi


2. Create a new project


3. Choose Onsen UI Minimum Template


You can have a look at this tutorial for detail instruction on how to do this.


Now your project should look like this:



2. Create a service to hold our data


Create a file named data.js with the following content:



  1. var myApp = angular.module('myApp');
  2. myApp.factory('Data', function(){
  3.     var data = {};
  4.  
  5.     data.items = [
  6.         { 
  7.             title: 'Item 1',
  8.             description: 'Item 1 Description'
  9.         },
  10.         { 
  11.             title: 'Item 2',
  12.             description: 'Item 2 Description'
  13.         },
  14.         { 
  15.             title: 'Item 3',
  16.             description: 'Item 3 Description'
  17.         }
  18.     ]; 
  19.  
  20.     return data;
  21. });


We named our service Data which will be referenced later.


3. Display the data in page1.html


1. page1.js


Create a file named page1.js with the following content:



  1. function Page1Controller($scope, Data){ // 1
  2.     $scope.items = Data.items;  // 2
  3.  
  4.     $scope.showDetail = function(index){ // 3
  5.         var selectedItem = Data.items[index];
  6.         Data.selectedItem = selectedItem;
  7.         $scope.ons.navigator.pushPage('page2.html', selectedItem.title);
  8.     }
  9. }

1 We reference the Data service by asking angular to inject it into Page1Controller
2 We assign Data.items to $scope.items so that we can bind it to our html
3 showDetail() function will be called when user click an item. We get the selected item using index, and assigned the selected item to Data server so that we can later reference it from Page2Controller


2. page1.html


Replace page1.html with the following content:



  1. <div class="page center" ng-controller="Page1Controller"> <!-- 1 -->
  2.     <ons-list>
  3.         <ons-list-item ng-repeat="item in items" ng-click="showDetail($index)">  <!-- 2 -->
  4.             {{item.title}}  <!-- 3 -->
  5.         </ons-list-item>
  6.     </ons-list>
  7. </div>

1 We tell angular to use Page1Controller we defined in page1.js using ng-controller
2 We list all item in $scope.items using ng-repeat
3 When the user click an item, we want angular to call showDetail() function. Since we are using ng-repeat, we can use $index to get the index of the item



Insert these two lines into index.html



  1. <script src="data.js"></script>
  2. <script src="page1.js"></script>

Make sure it looks like this:



  1. <!doctype html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.   <link rel="stylesheet" href="plugins/plugin-loader.css">     
  7.   <script type="text/javascript" src="plugins/plugin-loader.js"></script>
  8.  
  9.   <script>
  10.     angular.module('myApp', ['onsen.directives']);   
  11.  </script>    
  12.  
  13.   <script src="data.js"></script>
  14.   <script src="page1.js"></script>
  15.  
  16. </head>
  17. <body>    
  18.  
  19.   <ons-screen page="home_navigator.html"></ons-screen>
  20.  
  21. </body>
  22. </html>

Now let's see if the items are displayed. Run the app and make sure you see something like this:





4. Show item's detail in page2.html


When an item on the list is clicked, we want to show its detail on page2.html


Remember we have defined showDetail function in page1.js that assigned the selected item to Data service (Data.selectedItem). So let's use it to display the detail.


1. Create page2.js with the following content:



  1. function Page2Controller($scope, Data){
  2.     $scope.item = Data.selectedItem;   
  3. }

Here we assign Data.selectedItem to $scope.item so that we can use in in page2.html



Insert this line into index.html



  1. <script src="page2.js"></script>

Make sure your file look something like this:



  1. <!doctype html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.   <link rel="stylesheet" href="plugins/plugin-loader.css">     
  7.   <script type="text/javascript" src="plugins/plugin-loader.js"></script>
  8.  
  9.   <script>
  10.     angular.module('myApp', ['onsen.directives']);   
  11.  </script>    
  12.  
  13.   <script src="data.js"></script>
  14.   <script src="page1.js"></script>
  15.   <script src="page2.js"></script>
  16.  
  17. </head>
  18. <body>    
  19.  
  20.   <ons-screen page="home_navigator.html"></ons-screen>
  21.  
  22. </body>
  23. </html>


3. page2.html


Replace page2.html with the following content:



  1. <div class="page center" ng-controller="Page2Controller">
  2.     <h2>{{item.title}}</h2>
  3.     <p>{{item.description}}</p>
  4. </div>

Here we link page2.html to page2.js with ng-controller.


Now let's test our awesome app.


Click on Item 1 and make sure it transition to page2.html and you see something like this:





5. Conclusion


Onsen UI makes it easy to transition from pages to page as well as link data between them with just a few lines of code.


5. Complete Source Code


index.html


  1. <!doctype html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.   <link rel="stylesheet" href="plugins/plugin-loader.css">     
  7.   <script type="text/javascript" src="plugins/plugin-loader.js"></script>
  8.  
  9.   <script>
  10.     angular.module('myApp', ['onsen.directives']);   
  11.  </script>    
  12.  
  13.   <script src="data.js"></script>
  14.   <script src="page1.js"></script>
  15.   <script src="page2.js"></script>
  16.  
  17. </head>
  18. <body>    
  19.  
  20.   <ons-screen page="home_navigator.html"></ons-screen>
  21.  
  22. </body>
  23. </html>


data.js


  1. var myApp = angular.module('myApp');
  2. myApp.factory('Data', function(){
  3.     var data = {};
  4.  
  5.     data.items = [
  6.         { 
  7.             title: 'Item 1',
  8.             description: 'Item 1 Description'
  9.         },
  10.         { 
  11.             title: 'Item 2',
  12.             description: 'Item 2 Description'
  13.         },
  14.         { 
  15.             title: 'Item 3',
  16.             description: 'Item 3 Description'
  17.         }
  18.     ]; 
  19.  
  20.     return data;
  21. });


page1.js


  1. function Page1Controller($scope, Data){
  2.     $scope.items = Data.items;
  3.  
  4.     $scope.showDetail = function(index){
  5.         var selectedItem = Data.items[index];
  6.         Data.selectedItem = selectedItem;
  7.         $scope.ons.navigator.pushPage('page2.html', selectedItem.title);
  8.     }
  9. }


page1.html


  1. <div class="page center" ng-controller="Page1Controller">
  2.     <ons-list>
  3.         <ons-list-item ng-repeat="item in items" ng-click="showDetail($index)">
  4.             {{item.title}} 
  5.         </ons-list-item>
  6.     </ons-list>
  7. </div>


page2.js


  1. function Page2Controller($scope, Data){
  2.     $scope.item = Data.selectedItem;   
  3. }


page2.html


  1. <div class="page center" ng-controller="Page2Controller">
  2.     <h2>{{item.title}}</h2>
  3.     <p>{{item.description}}</p>
  4. </div>

Comments

  • Rafita

    good tutorial, thanks

  • Ryan

    Great tutorial. Easy to follow. Thanks!

  • Wan

    Is it possible to achieve master-detail layout that's exposing both the master and detail views on tablets or bigger resolution device?

  • Trumaine johnson jersey womens in our sports gear store. and more from:http://pr2.7-hq.com/prr/blogs/post/2694

    Trumaine johnson jersey womens in our sports gear store.

    and more from:http://pr2.7-hq.com/prr/blogs/post/2694

  • Kevin Fan

    Cannot read property 'pushPage' of undefined
    where is your ons-navigator tag

  • michael kors handbags

    Needed to compose you that little note to finally thank you over again for your personal marvelous suggestions you've discussed on this site. It is so surprisingly open-handed of people like you to supply unhampered all that a lot of folks might have marketed for an electronic book to get some cash for themselves, certainly considering that you might well have tried it in case you desired. Those good ideas in addition served like a good way to fully grasp that other individuals have a similar desire just as my own to know the truth a lot more on the subject of this issue. I am sure there are thousands of more pleasurable periods in the future for many who view your website.
    <a href="http://www.mkoutlets.us.com" >michael kors handbags</a> [url=http://www.mkoutlets.us.com]michael kors handbags[/url]

  • kobe sneakers

    Thank you for all your efforts on this web site. Ellie loves conducting investigation and it's really easy to see why. Most of us notice all relating to the lively way you deliver insightful guidelines on your web blog and invigorate response from others on that situation while my simple princess is understanding a lot. Take advantage of the rest of the new year. You're conducting a tremendous job.
    <a href="http://www.kobesneakers.com" >kobe sneakers</a> [url=http://www.kobesneakers.com]kobe sneakers[/url]

Comment form



captcha_key

Company information

Asial Corporation is a software engineering company located in Tokyo, Japan specializing in PHP, HTML5, and JavaScript programming.
We are able to offer a full range of professional services from user-interface design through to high-performance web system solutions.
Check out our company details here (Japanese only).

More company information

Recent posts