Multiple files - Tutorial - not work
-
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>
-
The second file should just contain this and nothing more:
<ons-page id=“home”> <ons-toolbar id=“home-toolbar”> <div class=“center”>Home</div> </ons-toolbar> Hello! </ons-page>