Easily create Master/Detail pages in Onsen UI
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:
var myApp = angular.module('myApp');
myApp.factory('Data', function(){
var data = {};
data.items = [
{
title: 'Item 1',
description: 'Item 1 Description'
},
{
title: 'Item 2',
description: 'Item 2 Description'
},
{
title: 'Item 3',
description: 'Item 3 Description'
}
];
return data;
});
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:
function Page1Controller($scope, Data){ // 1
$scope.items = Data.items; // 2
$scope.showDetail = function(index){ // 3
var selectedItem = Data.items[index];
Data.selectedItem = selectedItem;
$scope.ons.navigator.pushPage('page2.html', selectedItem.title);
}
}
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:
<div class="page center" ng-controller="Page1Controller"> <!-- 1 -->
<ons-list>
<ons-list-item ng-repeat="item in items" ng-click="showDetail($index)"> <!-- 2 -->
{{item.title}} <!-- 3 -->
</ons-list-item>
</ons-list>
</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
3. Link data.js and page1.js to index.html
Insert these two lines into index.html
<script src="data.js"></script>
<script src="page1.js"></script>
Make sure it looks like this:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="plugins/plugin-loader.css">
<script type="text/javascript" src="plugins/plugin-loader.js"></script>
<script>
angular.module('myApp', ['onsen.directives']);
</script>
<script src="data.js"></script>
<script src="page1.js"></script>
</head>
<body>
<ons-screen page="home_navigator.html"></ons-screen>
</body>
</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:
function Page2Controller($scope, Data){
$scope.item = Data.selectedItem;
}
Here we assign Data.selectedItem to $scope.item so that we can use in in page2.html
2. Link page2.js to index.html
Insert this line into index.html
<script src="page2.js"></script>
Make sure your file look something like this:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="plugins/plugin-loader.css">
<script type="text/javascript" src="plugins/plugin-loader.js"></script>
<script>
angular.module('myApp', ['onsen.directives']);
</script>
<script src="data.js"></script>
<script src="page1.js"></script>
<script src="page2.js"></script>
</head>
<body>
<ons-screen page="home_navigator.html"></ons-screen>
</body>
</html>
3. page2.html
Replace page2.html with the following content:
<div class="page center" ng-controller="Page2Controller">
<h2>{{item.title}}</h2>
<p>{{item.description}}</p>
</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
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="plugins/plugin-loader.css">
<script type="text/javascript" src="plugins/plugin-loader.js"></script>
<script>
angular.module('myApp', ['onsen.directives']);
</script>
<script src="data.js"></script>
<script src="page1.js"></script>
<script src="page2.js"></script>
</head>
<body>
<ons-screen page="home_navigator.html"></ons-screen>
</body>
</html>
data.js
var myApp = angular.module('myApp');
myApp.factory('Data', function(){
var data = {};
data.items = [
{
title: 'Item 1',
description: 'Item 1 Description'
},
{
title: 'Item 2',
description: 'Item 2 Description'
},
{
title: 'Item 3',
description: 'Item 3 Description'
}
];
return data;
});
page1.js
function Page1Controller($scope, Data){
$scope.items = Data.items;
$scope.showDetail = function(index){
var selectedItem = Data.items[index];
Data.selectedItem = selectedItem;
$scope.ons.navigator.pushPage('page2.html', selectedItem.title);
}
}
page1.html
<div class="page center" ng-controller="Page1Controller">
<ons-list>
<ons-list-item ng-repeat="item in items" ng-click="showDetail($index)">
{{item.title}}
</ons-list-item>
</ons-list>
</div>
page2.js
function Page2Controller($scope, Data){
$scope.item = Data.selectedItem;
}
page2.html
>>HTML
{{item.title}}
{{item.description}}
<<HTML
