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]

  • seo plugin

    Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword....wait there's even more Now what if i told you there was a simple Wordpress plugin that does all the On-Page SEO, and automatically for you? That's right AUTOMATICALLY, just watch this 4minute video for more information at. <a href="http://www.SEORankingLinks.xyz">Seo Plugin</a>
    seo plugin http://www.SEORankingLinks.xyz

  • wholesale nike nfl jerseys

    relationships with other bloggers. Check out this extremely well-written trackback tutorial Permalink,we supply cheap nfl jerseys.
    wholesale nike nfl jerseys http://www.karatequebec.com/pic/methique.asp

  • adidas ultra boost 3.0

    I am just commenting to make you be aware of of the exceptional experience my friend's girl experienced going through yuor web blog. She realized many details, including how it is like to have an amazing coaching mindset to let a number of people effortlessly completely grasp a variety of hard to do topics. You actually surpassed her desires. Many thanks for displaying these powerful, trusted, informative and also cool guidance on this topic to Evelyn.
    [url=http://ux.nu/X3NvI]adidas ultra boost 3.0[/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