Onsen UI navigator - javascript

I'm looking for learn OnsenUi to replace Jquery in my phonegap project.
I want to make a login page and after switch to a main page.
To do that there is my html code :
<!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">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/topcoat-mobile-onsen-blue.css">
<link rel="stylesheet" href="styles/app.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="MyController as ctrl">
<ons-navigator title="Navigator" var="myApp.myNavigator">
<ons-page id="connexion.html">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<ons-row style="margin-top: 50px;">
<ons-col align="left">
<div>
<section style="padding: 8px">
<p> Identifiant </p>
<input class="text-input" id="id-input" ng-model="ctrl.id" style="display: block; width: 100%">
</section>
<section style="padding: 8px">
<p> Password </p>
<input type="password" class="text-input" id="password-input" ng-model="ctrl.password" style="display: block; width: 100%">
</section>
<section>
Resté connecté
<ons-checkbox ng-model="ctrl.answer" ng-true-value="true" ng-false-value="false" ng-init="ctrl.answer='true'">
</ons-checkbox>
</section>
<section style="padding: 8px">
<ons-button modifier="large" style="display: block; width: 100%" ng-click="ctrl.connexion()">Connexion</ons-button>
</section>
</div>
</ons-col>
</ons-row>
</hr>
identifiant = {{ctrl.id}}
</hr>
password = {{ctrl.password}}
</ons-page>
</ons-navigator>
<ons-template id="app.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
</ons-toolbar>
<h1>APP</h1>
</ons-page>
</ons-template>
</body>
</html>
`
And my js :
(function(){
var mbdGlobal = new Object();
var app = angular.module('myApp', ['onsen.directives']);
app.controller('MyController', function($scope, $window){
this.id = "";
this.password = "";
this.connexion = function(){
mbdGlobal.id = this.id;
mbdGlobal.password = this.password;
mbdGlobal.stayConnected = JSON.parse(this.answer);
alert(JSON.stringify(mbdGlobal));
//myNavigator.pushPage("app.html", { animation: "slide" });
};
});
})();
But when i start the application i only see the second page.
Plz can you help me because the web site of Onsen don't give real exemple.
Thanks.

You can add the default loading page by adding the attribute page inside the navigator. Assuming that your login page name is login.html, you should write something like this
<ons-navigator var="myNavigator" page="login.html"></ons-navigator>
Don't put the login in the index.html, hope it helps.

If your project use slide menu template you can easily do it by setting the main page, refer the following code =)
<ons-sliding-menu menu-page="menu.html" main-page="login.html" side="left"
var="menu" type="reveal" max-slide-distance="90%" swipeable>
</ons-sliding-menu>

Related

why can't I execute code from an embedded file in jsp?

Good day to all time of day, there was such a problem:
in index.jsp passing the answer.jsp, here's the code:
index.jsp
<head>
<meta charset="UTF-8">
<title>Lab 2</title>
<link rel="stylesheet" href="css/graphic.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/table.css">
</head>
<body>
<div class="hero">
<jsp:include page="jsps/hero.jsp"/>
</div>
<div class="graphic">
<jsp:include page="jsps/graphic.jsp"/>
</div>
<div class="form-container">
<jsp:include page="jsps/forms.jsp"/>
<button id="checkButton">Проверить</button>
<div id="outputContainer">
<span class="outputStub notification">Результаты отсутствуют</span>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/checkboxHandler.js"></script>
<script src="js/formValidator.js"></script>
<script src="js/graphicValidator.js"></script>
<script src="js/session.js"></script>
<script src="js/table.js"></script>
</body>
answer.jsp
<%# page contentType="text/html;charset=UTF-8"%>
<div class="table">
<div class="table-header">
<div>X</div>
<div>Y</div>
<div>R</div>
<div>Входит ли в ОДЗ?</div>
</div>
<div class="table-content">
<script>
console.log("1111111111")
AddInSession(${x}, ${y}, ${r}, ${result ? "<div style=\"color: green\">Да</div>" :
"<div style=\"color: red\">Нет</div>"})
</script>
<div class="table-row" id="table-row">
</div>
<script>Table()</script>
</div>
</div>
I need to pass values through the context and I did it, and I also need to return an answer.jsp, here is the code for one of the servlets
ServletContext context = getServletContext();
context.setAttribute("x", object.getX());
context.setAttribute("y", object.getY());
context.setAttribute("r", object.getR());
context.setAttribute("result", object.getResult());
getServletContext().getRequestDispatcher("/jsps/answer.jsp").forward(request, response);
The browser sees the js code, but does not execute it. My concern is not so much that my methods are not being executed, but that console.log is also not producing results.
Can someone explain what I'm doing wrong?
P.S in index.jsp code is being executed

angular js Bootstrap not working with multiple rows and columns

I am making a basic blackjack game with angularjs and using bootstrap for the layout however I cannot seem to make it work.
What I want is a heading across the top, the content of the game in the middle and left and a list of current players on the right but isn't everything is running down the page.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blackjack</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="./angular.js"></script>
<script src="./angular-animate.js"></script>
<script src="./angular-touch.js"></script>
<script src="./ui-bootstrap.js"></script>
<script src="./app.js"></script>
</head>
<body ng-app="myApp">
<div class="container-fluid" ng-controller="main">
<div class = "row">
<div class="col-sm-12">
<h1>Black Jack</h1>
</div>
</div>
<div class="row">
<div class = "col-sm-10">
<div ng-include="'play.html'" my-replace>
</div>
<div ng-include="'next.html'" my-replace>
</div>
<div ng-include="'start.html'" my-replace> </div>
</div>
<div class="col-sm-2">
<ul class = "row">
<li class="col-sm-12">
<h2>Players</h2>
</li>
<li class = "col-sm-12" ng-repeat="player in players">
<span>{{player.name}}: <button ng-if="!started" ng-click='removePlayer(player)'>Remove</button></span>
</li>
</ul>
</div>
</div>
</div>
<!--
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"> </script>
<script>
div = $("div");
(function add(div){
div.each(function(i, val){
this.innerHTML=this.nodeName+" open "+this.className+" "+this.innerHTML+" "+this . nodeName+" close"
add($(this).children());
})})(div);
</script>
-->
</body>
</html>
The my-replace directive strips away the wrapping div of the ng-includes once their content loads.
The js code at the bottom is a quick debugger so I can see how the html was being interpreted as firebug light doesn't work with angularjs.
I've tried with multiple versions of bootstrap too
Why isn't the bootstrap working?

AngularJS Material md-list hight completely different in chrome

I'm fairly new to using AngularJS and I'm working with Angular Materials, and I've come across an issue that I cannot understand.
When writing a md-list, it renders fine in Firefox, and IE (11), but in chrome, each md-list-item takes the full height of the window, but only when I'm running the code for my site.
If I view other pages (eg. the Angular Material demos), or put the code into a shareable editor, like codepen, or jsfiddle, they render fine.
The code below is is a test template which displays incorrectly
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<div style="height:400px;width:500px;">
<md-list>
<md-list-item ng-click="null">Item 1</md-list-item>
</md-list>
<md-list>
<md-list-item ng-click="null">Item 2</md-list-item>
</md-list>
<md-list>
<md-list-item ng-click="null">Item 3</md-list-item>
</md-list>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>
CodePen : http://codepen.io/anon/pen/pyqKZr
Live Demo of the failed layout: http://angular.deathwishgame.co.uk/
Why does this only happen when rendering my own page alone, what am I doing wrong?
You are running into https://github.com/angular/material/issues/8094
The only workaround is to give the list items a height/max-height.
There seems to be a pull-request pending review.
Use angular-material version 1.0.9 instead of 1.1.0. Then, it will work fine.
Try running this code , I have corrected your code which you have hosted
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.9/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<!--
Your HTML content here
-->
<div style="height:400px;width:500px;">
<md-list>
<md-list-item ng-click="null">Item 1</md-list-item>
<md-list-item ng-click="null">Item 2</md-list-item>
<md-list-item ng-click="null">Item 3</md-list-item>
</md-list>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.9/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>
You can try to put all the md-list-item in just one md-list.
<div style="height:400px;width:500px;">
<md-list>
<md-list-item ng-click="null">Item 1</md-list-item>
<md-list-item ng-click="null">Item 2</md-list-item>
<md-list-item ng-click="null">Item 3</md-list-item>
</md-list>
</div>
<html lang="en" >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script language="javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('listController', listController);
function listController ($scope) {
var self = this;
self.allContacts = loadContacts();
self.contacts = [self.allContacts[0]];
function loadContacts() {
var contacts = [
'Roberto Karlos',
'Bob Crestor',
'Nigel Rick',
'Narayana Garner'
];
return contacts.map(function (c, index) {
var cParts = c.split(' ');
var contact = {
name: c,
email: cParts[0][0].toLowerCase() + '.' + cParts[1].toLowerCase() + '#example.com',
image: 'http://lorempixel.com/50/50/people?' + index
};
contact._lowername = contact.name.toLowerCase();
return contact;
});
}
}
</script>
</head>
<body ng-app="firstApplication">
<div id="listContainer" ng-controller="listController as ctrl" layout="column" ng-cloak>
<md-content>
<md-list>
<md-subheader class="md-no-sticky">Contacts</md-subheader>
<md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts"
ng-if="ctrl.contacts.indexOf(contact) < 0">
<img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
<div class="md-list-item-text compact">
<h3>{{contact.name}}</h3>
<p>{{contact.email}}</p>
</div>
<md-divider ng-if="!$last"></md-divider>
</md-list-item>
</md-list>
<md-list>
<md-subheader class="md-no-sticky">Contacts (With Insets)</md-subheader>
<md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts"
ng-if="ctrl.contacts.indexOf(contact) < 0">
<img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
<div class="md-list-item-text compact">
<h3>{{contact.name}}</h3>
<p>{{contact.email}}</p>
</div>
<md-divider md-inset ng-if="!$last"></md-divider>
</md-list-item>
</md-list>
</md-content>
</div>
</body>
</html>

AngularJS isn`t working

after watching this presentation (https://www.youtube.com/watch?v=ImR0zo1tA_I) I wanted to try Angular JS. I copied the code, exactly what was on the screen, but i doesn't work. I tried it in my browser, in my page (http://thecodemaker.com.pl), I was doing research about AngularJS but it still doesn`t want to work.
Code :
<!DOCTYPE html>
<html ng-app="basicApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<form>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title"><b>ToDo List</b></h1>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat = "todo in todos">
<div class="checkbox">
<label>
<input type="checkbox"> {{todo}}
</label>
<button type="button" class="close">×</button>
</div>
</li>
</ul>
</div>
<div class="form-group has-feedback">
<label class="control-label invisible">Enter Task</label>
<input type="text" class="form-control text-primary"></input>
<button type="button" class="close form-control-feedback text-muted">±</button>
</div>
<div class="alert alert-info">Enter new task to get started</div>
<div class="alert alert-danger">Maximum number of tasks allowed : 5</div>
</div>
</form>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.11.2.js"></script>
<script>
angular.module("basicApp", [])
.controller("TodoController", ["$scope", function($scope) {
$scope.todos =['Buil an atomic bomb','Sell it on ebay']
}
</script>
</body>
</html>
Any ideas what is wrong ?
There seems to be a lot wrong with your snippet. For one, your submit/add button is not bound to an event listener or anything so it's not doing anything that you'd want (like adding an item to the property on your controller's $scope).
Check out the Todo example on Angular's official website, it's more up to date.
https://angularjs.org/ (scroll down).
Here's the video for it: https://www.youtube.com/watch?v=WuiHuZq_cg4
There is an error : Bootstrap's JavaScript requires jQuery, which means you need to add jQuery library to your project, required by bootstrap.js
Starting with Angular 1.3.x, you can no longer declare a controller as a generic global function on window. Controllers must now use the more current form of component declaration.
<script>
angular.module("basicApp", [])
.controller("TodoController", ["$scope", function($scope) {
$scope.todos =['Buil an atomic bomb','Sell it on ebay']
}
</script>
In the HTML, change ng-app="" to ng-app="basicApp.

Data binding angularjs with onsenui variable UNDEFINE

I am sorry i new in onsenui and angularjs, but i will ask simple question about data binding in onsenui and angularjs, when i used variable $scope.name with ng-model in onsen ui template have return UNDEFINE, here is my code
<!doctype html>
<html lang="en" ng-app="simpleKamus">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/angular/angular-route.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script>
var nameApp=angular.module('simpleKamus',['onsen']);
nameApp.controller('KamusCtrl',['$scope','$http',function ($scope,$http){
$scope.tes=function(){
alert($scope.name);
};
}]);
</script>
</head>
<body ng-controller="KamusCtrl">
<ons-tabbar>
<ons-tab page="english.html" label="English - Indonesia" icon="ion-chatbox-working" active="true"></ons-tab>
<ons-tab page="indo.html" label="Indonesia - English" icon="ion-chatbox-working"></ons-tab>
</ons-tabbar>
<ons-template id="english.html">
<ons-toolbar>
<div class="center">ENGLISH - INDONESIA</div>
</ons-toolbar>
<input type="text" ng-model="name" class="text-input text-input--transparent" placeholder="name" style="width: 100%">
<button ng-click="tes()">tes</button>
</ons-page>
</ons-template>
</body>
</html>
when i click tes button, Why $scope.name is UNDEFINE? if i remove all onsen's tags, only tag HTML, variable $scope.name was define. i had tried the solution in link Two way binding, scope variable undefined, but cannot solve this problem, i am sorry my bad english? thanks you
You have forgot to open the tag <ons-page>. Your code doesn't work because the controller is not recognised after the ons-template, putting it in ons-page works. I fixed your problem modifying the code in this way
<!doctype html>
<html lang="en" ng-app="simpleKamus">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/angular/angular-route.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script>
var nameApp=angular.module('simpleKamus',['onsen']);
nameApp.controller('KamusCtrl',['$scope','$http',function ($scope,$http){
$scope.tes=function(){
alert($scope.name);
};
}]);
</script>
</head>
<body>
<ons-tabbar>
<ons-tab page="english.html" label="English - Indonesia" icon="ion-chatbox-working" active="true"></ons-tab>
<ons-tab page="indo.html" label="Indonesia - English" icon="ion-chatbox-working"></ons-tab>
</ons-tabbar>
<ons-template id="english.html">
<ons-page ng-controller="KamusCtrl">
<ons-toolbar>
<div class="center">ENGLISH - INDONESIA</div>
</ons-toolbar>
<input type="text" ng-model="name" class="text-input text-input--transparent" placeholder="name" style="width: 100%">
<button ng-click="tes()">tes</button>
</ons-page>
</ons-template>
</body>
</html>
p.s. i suggest you to let the index page with the standard template and create a english.html page where to put the content. Same for the controller.
In the first attempt, if you use ng-model = "$parent.name" would work well.

Categories