I'm in trouble using together Thymeleaf and AngularJS. I try to sidenav menu with angular and I'm following this tutorial. I did same on the link but Thymeleaf throws this exception:
Caused by: org.xml.sax.SAXParseException: Attribute name "flex" associated with an element type "section" must be followed by the ' = ' character.
Here is the html:
<!DOCTYPE html>
<html ng-app="app" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="webjars/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="webjars/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular.js"></script>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular-route.js"></script>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular-resource.js"></script>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular-animate.js"></script>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular-aria.js"></script>
<script type="text/javascript" src="webjars/angular-material/1.1.0/angular-material.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/tokenInterceptorService.js"></script>
<script type="text/javascript" src="js/navigation.js"></script>
<script type="text/javascript" src="js/sidenav.js"></script>
<title>Title</title>
</head>
<body ng-controller="navigation">
<div ng-controller="SideNavCtrl" layout="column" style="height: 500px;" data-ng-cloak="">
<section layout="row" flex>
<md-sidenav class="md-sidenav-left" md-component-id="left" md-disable-backdrop md-whiteframe="4">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Disabled Backdrop</h1>
</md-toolbar>
<md-content layout-margin>
<p>
This sidenav is not showing any backdrop, where users can click on it, to close the sidenav.
</p>
<md-button ng-click="toggleLeft()" class="md-accent">
Close this Sidenav
</md-button>
</md-content>
</md-sidenav>
<md-content flex layout-padding>
<div layout="column" layout-align="top center">
<p>
Developers can also disable the backdrop of the sidenav.<br/>
This will disable the functionality to click outside to close the sidenav.
</p>
<div>
<md-button ng-click="toggleLeft()" class="md-raised">
Toggle Sidenav
</md-button>
</div>
</div>
</md-content>
</section>
</div>
</html>
What is the problem? Does Theymeleaf want a parameter like flex="..."?
Yes, usually attributes like that are specified: flex="flex".
Related
How do I center md-content, I used this layout-align but it's not working:
<md-content flex="75" layout-padding layout-align="center center">
<p align="justify">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</md-content>
Add layout-align="center center" and that should work,
DEMO
// Code goes here
angular.module('webapp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
});
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<!-- Angular Material Dependencies -->
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js"></script>
<!-- Use dev version of Angular Material -->
<script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<md-content class="md-padding" layout-xs="column" layout="row" layout-align="center center">
<div flex-xs flex-gt-xs="40" layout="column" layout-align="center center">
<md-card class="card-40-center">
<md-card-title>
<md-card-title-text>
<span class="md-headline">Sign Up</span>
</md-card-title-text>
</md-card-title>
</md-card>
</div>
</md-content>
<div layout="column" layout-fill flex style="max-height:100%">
</div>
</body>
</html>
Point is layout-align will not work without specifying layout='row'or layout='column' and make you have enough flex to see the space in between. Even writing just layout would default to row.
I have made a simple registration page with angularJS-materials, my issue is a select tag which is properly working over windows, android phones except iPhone's safari.
So can anyone help me about this!
That's my code below:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="ISO-8859-1" name="viewport" content="width=device-width, initial-scale=1">
<title>Form | angularJs</title>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
<link rel="stylesheet" href="https://material.angularjs.org/1.1.3/docs.css">
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="w3.css">
<script src="query.js">
</script>
</head>
<body>
<header class="w3-container w3-teal">
<h1><center>School.com</center></h1>
</header>
<div class="container">
<div class="well ng-scope" ui-view="content">
<div ng-controller="ContactController">
<div class="row">
<form class="well" name="myForm">
<md-input-container class="md-block" flex-gt-sm>
<label>State</label>
<md-select ng-model="State" name="state" placeholder="Select State" style="text-indent: 6px; line-height: 30px;">
<md-option value="pune">Pune</md-option>
<md-option value="mumbai">Mumbai</md-option>
<md-option value="nagpur">Nagpur</md-option>
<md-option value="nashik">Nashik</md-option>
</md-select>
<div ng-messages="myForm.state.$error"
ng-show="myForm.state.$dirty">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<br />
<input type="hidden" ng-model="newcontact.id" />
<md-button ng-disabled="(myForm.$invalid)&& action != 'VIEW'" ng-click="saveContact()" class="md-raised md-primary">Submit</md-button>
<md-button type="reset" class=" md-warn md-raised md-hue-2">Reset</md-button>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="w3-container w3-teal">
<h5><center>Copyright © School.com</center></h5>
</footer>
</body>
</html>
There is no problem with code, just need to update this meta tag. Thats it!
I got a list generated using angular 'ng-repeat', and I want if one item is clicked it will pop a popover to show some info. I tried several time but seems it doesn't work fine.
see plunker
a list demo in plunker
my code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" charset="UTF-8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script data-require="ui-bootstrap#0.4.0" data-semver="0.4.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-app="my-app" ng-controller="controller">
<div class="row">
<div class="col-xs-12" style="text-align:center;">
<h2>Here is a list a weapons</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12" ng-repeat="item in weaponItems" ng-click="selectItem()" uib-popover-template="'popover.html'" popover-append-to-body="true" popover-trigger="none" popover-enable="item === selectedItem" popover-open="isOpen === true" popover-placement="left-top">
<div class="col-xs-6">
<div class="panel" style="text-align:center;">
<img src="{{item.img}}" height="120px" width="auto">
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body" style="min-height:120px;">
<div><b>Category:</b> {{item.title}}</div>
<p><b>Desc:</b> {{item.desc}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here i added sample code..
You were loading ui-bootstrap before angular, so it failed (I put ui-bootstrap after angular.js):
<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs#1.5.5"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
The datepicker directive was not being called, because it requires "uib-" (note uib-datepicker):
<button popover-placement="bottom" uib-popover-template="'calendar.html'" popover-trigger="click"><h1>Hello Plunker!</h1></button>
The datepicker directive was also not being called, because it requires "uib-" (note uib-datepicker):
<script id="calendar.html" type="text/ng-template">
<uib-datepicker ng-model="date" show-weeks="false"></datepicker>
</script>
And check output..
I have an angular app and I have implemented node into it later on.
Now when I try to run the node app I receive this kind of errors:
SyntaxError: expected expression, got '<'
jquery.min.js (regel 1)
ReferenceError: angular is not defined
angular.module('controllers').controller('ChallengeCtrl', ['$scope',
'auth',
This is my index.html file:
<!DOCTYPE html>
<html lang="en" ng-app="eva">
<head>
<meta charset="UTF-8" name="viewport" content="initial-scale=1"/>
<title>EVA - eet plantaardig!</title>
<link rel="shortcut icon" type="image/x-icon" href="../styles/favicon.ico">
<!-- STYLES -->
<link rel="stylesheet" type="text/css" href="../styles/public/js/lib/angular-material/angular-material.min.css">
<link rel="stylesheet" type="text/css" href="../styles/animate.min.css" >
<link rel="stylesheet" type="text/css" href="../styles/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../styles/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../styles/public/js/lib/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body layout="column" ng-controller="AppCtrl" layout-fill>
<!-- ANGULAR MATERIAL LOADING -->
<md-toolbar layout="row">
<div class="md-toolbar-tools ng-scope" ng-controller="NavCtrl as demo">
<md-button ng-click="toggleSidenav('left')" class="md-icon-button" ng-show="isLoggedIn()" aria-haspopup="true" aria-expanded="true"
aria-label="sidebar menu">
<!--<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>-->
<md-tooltip md-direction="bottom">Gebruikers Menu</md-tooltip>
<span class="glyphicon glyphicon-menu-hamburger"></span>
</md-button>
<span>
<md-button md-no-ink href="#/index" aria-label="logo">
<img src="../styles/images/logo/48x48.png" alt="logo" >
</md-button>
</span>
<!-- fill up the space between left and right area -->
<span flex></span>
<md-fab-speed-dial md-open="demo.isOpen" md-direction="left" ng-class="md-fling"
ng-mouseenter="demo.isOpen = true" ng-mouseleave="demo.isOpen = false">
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn">
<md-tooltip md-direction="bottom">Menu</md-tooltip>
<span class="glyphicon glyphicon-menu-hamburger"></span>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="Login" class="md-fab md-raised md-mini" ng-hide="isLoggedIn()" href="#/login">
<md-tooltip md-direction="bottom">Log in</md-tooltip>
<span class="glyphicon glyphicon-user"></span>
</md-button>
<md-button aria-label="Registreer" class="md-fab md-raised md-mini" ng-hide="isLoggedIn()" href="#/register">
<md-tooltip md-direction="bottom">Registreer</md-tooltip>
<span class="glyphicon glyphicon-plus"></span>
</md-button>
<md-button aria-label="Profiel" class="md-fab md-raised md-mini" ng-show="isLoggedIn()" href="#/profile">
<md-tooltip md-direction="bottom">Profiel</md-tooltip>
<span class="glyphicon glyphicon-user"></span>
</md-button>
<md-button aria-label="Logout" class="md-fab md-raised md-mini" ng-show="isLoggedIn()"
ng-click="logOut()">
<md-tooltip md-direction="bottom">Log out</md-tooltip>
<span class="glyphicon glyphicon-off"></span>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</md-toolbar>
<div layout="row" flex>
<!-- SIDENAV -->
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2 md-closed ng-scope ng-isolated-scope" md-component-id="left"
ui-view="sidebarLeft" ng-controller="NavCtrl" layout-fill>
<md-toolbar class="sidebar-left-toolbar ng-scope ">
<div class="md-toolbar-tools layout-align-start-center layout-row">
<div class="sidebar-left-logo">
<img src="../styles/images/logo/32x32.png" alt="logo" width="24px">
</div>
<span flex></span>
<div>
{{ currentUser() }}
</div>
</div>
</md-toolbar>
<div layout="row" flex id="contentSideNav">
<div layout="column" flex>
<md-content layout="column" flex class="md-padding">
<ul>
<li>
<md-button href="#/profile" layout-fill>
Profiel
</md-button>
</li>
<md-divider></md-divider>
<li>
<md-button href="#/challenges" layout-fill>
Challenges
</md-button>
</li>
<md-divider></md-divider>
</ul>
</md-content>
</div>
</div>
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<ui-view></ui-view>
</md-content>
</div>
</div>
<!-- homepage -->
<script type="text/ng-template" id="/home.html"></script>
<!-- loginpage -->
<script type="text/ng-template" id="/login.html" ng-controller="UserCtrl"></script>
<!-- register page -->
<script type="text/ng-template" id="/register.html" ng-controller="UserCtrl"></script>
<!-- challengespage -->
<script type="text/ng-template" id="/challenges.html" ng-controller="ChallengeCtrl"></script>
<!-- profiel page -->
<script type="text/ng-template" id="/profile.html" ng-controller="ProfileCtrl" ></script>
<!-- footer -->
<footer>
<div layout="row" layout-align="space-around center">
<div id="social" layout="row" layout-align="space-around center">
<i class="fa fa-facebook-f"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest-p"></i>
</div>
<div>
<p class="text-center">© Copyright 2015 - Projecten Groep 6</p>
</div>
</div>
</footer>
<!-- JS files integration -->
<script type="text/javascript" src="../styles/public/js/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../styles/angular/angular.min.js"></script>
<script type="text/javascript" src="../styles/angular/angular-ui-router.min.js"></script>
<script type="text/javascript" src="../public/js/lib/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="../public/js/lib/angular-aria/angular-aria.min.js"></script>
<script type="text/javascript" src="../public/js/lib/angular-material/angular-material.min.js"></script>
<script type="text/javascript" src="../styles/angular/angular-messages.min.js"></script>
<script type="text/javascript" src="../styles/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/controllers/bootstrap.js"></script>
<script type="text/javascript" src="js/controllers/ChallengeController.js"></script>
<script type="text/javascript" src="js/controllers/AppController.js"></script>
<script type="text/javascript" src="js/controllers/MainController.js"></script>
<script type="text/javascript" src="js/controllers/NavController.js"></script>
<script type="text/javascript" src="js/controllers/UserController.js"></script>
<script type="text/javascript" src="js/controllers/ProfileController.js"></script>
<script type="text/javascript" src="js/factories/bootstrap.js"></script>
<script type="text/javascript" src="js/factories/AuthInterceptorFactory.js"></script>
<script type="text/javascript" src="js/factories/AuthFactory.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
At first I thought that the links to all the files were incorrect from the index.html, but they seem fine so I don't know what the problem is.
Additional info screen:
I think the issue is you have mention wrong reference path for angular libraries.
Like it should point to /js/lib rather than pointing to /styles(which has css)
<script type="text/javascript" src="../js/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="../js/lib/angular/angular-ui-router.min.js"></script>
Addtional note is you can't have ng-controller="ProfileCtrl" on script with type="text/ng-template", that wouldn't add controller on that template, you need to specify that ng-controller in the template.
The issue is that my tooltip is shown on the bottom left part of my button when I hover on the botton for the first time. Then it seems it fixes its position and works as expected. This happens in all desktop browsers. I am using v0.9.8.
I have used that example
https://material.angularjs.org/0.9.8/#/demo/material.components.tooltip
Here is the html
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/styles/angular-material.css" />
<link rel="stylesheet" href="assets/styles/style.css" />
<link rel="stylesheet" href="assets/styles/material-design-iconic-font.css" />
</head>
<body layout="column" ng-app="myApp">
<md-toolbar class="md-accent">
<h2 class="md-toolbar-tools">
<span flex="">Awesome Md App</span>
<md-button class="md-fab md-accent" aria-label="refresh">
<md-tooltip>
Refresh
</md-tooltip>
<md-icon md-svg-src="img/icons/ic_refresh_24px.svg" style="width: 24px; height: 24px;">
</md-icon>
</md-button>
</h2>
</md-toolbar>
<div flex layout="row">
<!--main content-->
</div>
</body>
<!-- vendor -->
<script src="assets/javascript/vendor/jquery-2.1.3.min.js"></script>
<script src="assets/javascript/vendor/angular.js"></script>
<script src="assets/javascript/vendor/angular-route.js"></script>
<script src="assets/javascript/vendor/angular-animate.js"></script>
<script src="assets/javascript/vendor/angular-aria.js"></script>
<script src="assets/javascript/vendor/angular-material.js"></script>
</html>
If I remove the flex attribute
<span flex="">Awesome Md App</span>
The controls are disordered but the tooltip appears just fine. What could be the problem?
Remove layout="column" from yr body tag.
<body layout="column" ng-app="myApp">
<body ng-app="myApp">
you should place yr main content inside md-content & then give layout="column" or "row" as required.
<md-content flex layout="column">
<!--main content-->
<span>above</span>
<span>below</span>
</md-content>
or
<md-content flex layout="row">
<!--main content-->
<span flex>i'm left</span>
<span flex>i'm right</span>
</md-content>