Hello Friends
I´m new in framework. I have started the tutorial on this page (https://onsen.io/v2/guide/tutorial.html#multiple-files).
My goal is navigate between many files. If I can do it so I will adapt my App. But I need navigate between more than one page. This part of this tutorial explain how can I do it. I follow the instructions but this does not work.
According to the tutorial:
This brings up an important point: Onsen UI pages can be defined either as templates using the template element, or in their own file. When we call ons-navigator.resetToPage with home.html as the argument, the navigator looks in the current file for templates with id=“home.html”, and then looks for files called home.html. This is why nothing broke when we moved the home page out of a template and into its own file.
My files
First html file.******************************
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<meta name=“apple-mobile-web-app-capable” content=“yes” />
<meta name=“mobile-web-app-capable” content=“yes” />
<meta http-equiv=“Content-Security-Policy” content=“default-src * data:; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval’”>
<link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon” />
<link href=‘https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic’ rel=‘stylesheet’ type=‘text/css’>
<title>Onsen UI Forum Help by Munsterlander</title>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
<script src="https://unpkg.com/onsenui"></script>
<script>
const login = () => {
const username = document.querySelector(’#username’);
const password = document.querySelector(’#password’);
if (true) {
// call the navigator to move to the new page
const navigator = document.querySelector(’#navigator’);
navigator.resetToPage(‘home.html’);
} else {
ons.notification.alert(‘Wrong username/password combination’);
}
}
</script>
</head>
<body>
<ons-navigator id=“navigator”>
<ons-page>
<div style=“text-align: center; margin-top: 200px”>
<p>
<ons-input id=“username” placeholder=“Username” modifier=“underbar”></ons-input>
</p>
<p>
<ons-input id="password"
placeholder="Password"
type="password"
modifier="underbar">
</ons-input>
</p>
<p>
<ons-button onclick="login()">Sign in</ons-button>
</p>
</div>
</ons-page>
</ons-navigator>
</body>
</html>
Second html file.******************************
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<meta name=“apple-mobile-web-app-capable” content=“yes” />
<meta name=“mobile-web-app-capable” content=“yes” />
<meta http-equiv=“Content-Security-Policy” content=“default-src * data:; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval’”>
<link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon” />
<link href=‘https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic’ rel=‘stylesheet’ type=‘text/css’>
<title>Onsen UI Forum Help by Munsterlander</title>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
<script src="https://unpkg.com/onsenui"></script>
</head>
<body>
<ons-page id=“home”>
<ons-toolbar id=“home-toolbar”>
<div class=“center”>Home</div>
</ons-toolbar>
Hello!
</ons-page>
</body>
</html>