I am making a WebApp with angularJS and I have something that irritates me.
<!doctype html>
<html>
<head>
<title>webapp</title>
<link href="css/angular-bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="app">
<div class="container">
<h1>WebApp</h1>
<div ng-controller="home as homeCtrl" ng-cloak class="ng-cloak" class="wrapper">
<div ng-include="'blocks/item.html'"></div>
<div ng-include="'blocks/something.html'"></div>
<div ng-include="'blocks/health.html'"></div>
<div ng-include="'blocks/mana.html'"></div>
<div ng-include="'blocks/running.html'"></div>
<div ng-include="'blocks/out.html'"></div>
<div ng-include="'blocks/of.html'"></div>
<div ng-include="'blocks/ideas.html'"></div>
</div>
</div>
</body>
</html>
Every item, i have to write another include. is there a way to include these and any additions in the future with one command?
Firstly, in your controller create the alphabet array (as shown here)
function genCharArray(charA, charZ) {
var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
for (; i <= j; ++i) {
a.push(String.fromCharCode(i));
}
return a;
}
$scope.charArray = genCharArray('a', 'z'); // ["a", ..., "z"]
Then, in your template:
<div ng-controller="home as homeCtrl" ng-cloak class="ng-cloak" class="wrapper">
<div ng-repeat="letter in charArray" ng-include="'blocks/' + letter + '.html'"></div>
</div>
[edit]
If you want to work with any generic list and not specifically the alphabet as in the original post, just use an array and initialize it with whatever.
$scope.charArray = ['lemon', 'tree', 'apple'];
The point here is using ng-repeat to iterate over any number of objects you like, and dynamically create the ng-include elements appropriately.
Related
I use this solutions for including one thymeleaf in another. It is solved my problems, but now css file don't load at all
Thymeleaf: Replace div with other pages on controllers
Here is my controller:
#GetMapping("/allUsers")
public String userList(Model theModel) {
List<User> theUsers = userService.findAll();
theModel.addAttribute("users", theUsers);
return "dashboard :: setFragment(content_fragment='/admin/allUsers')";
}
and part of the html where is link to css file
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script>
$(function () {
var includes = $('[data-include]');
$.each(includes, function () {
var file = '/admin' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>
<title>Dashboard</title>
</head>
<body>
<div th:insert="fragments/header :: header"></div>
<div class="row">
<div id="content" th:fragment="setFragment(content_fragment)">
<div th:insert="fragments/dashboard :: aside" class="col-md-2 px-3"></div>
<div th:insert="fragments/users :: users" class="col-md-10 py-3"></div>
</div>
</div>
</body>
...
I am not familiar with this language however you may have to load your css as follows:
<link th:href="#{"/css/style.css}" rel="stylesheet" />
Using the example from: https://www.baeldung.com/spring-thymeleaf-css-js
I want to add id attribute and also unique id in the id attr. i tried but getting objects inside the id attribute
$("div .abc").each(function() {
$('.abc').attr('id', $(this).uniqueId());
})
[id]::before {
content: attr(id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<div class="xyz">
<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
</div>
The jQueryUI .uniqueId() method does all the work you need internally. It returns a jQuery object, which is why you see what looks like an object. All you need in the .each() callback is
$(this).uniqueId();
In fact you don't even need the .each():
$("div .abc").uniqueId();
will iterate through the matched elements and give each one a unique id value.
Full code is here
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="xyz">
<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
</div>
</body>
<script>
$(".abc").each(function (index) {
$(this).attr("id", "abc" + index);
});
</script>
</html>
yu can auto increment an id to an html element using either each loop or for loop
each loop like this;
$(".abc").each(function(i) {
$(".abc").attr('id', 'id' + i);
})
or using for loop
for(var i = 0, i = $(".abc").length, i++){
$(".abc").attr('id', 'id' + i);
}
I am trying to create a webpage to be able to sell things online, and have come up with an issue while creating a file to automatically create a new item. I am trying to use Ruby to temporarily take off the end of the file, append the correct line to the file, and put the end back. My code so far is
puts "what is the item number?"
item_num = gets.chomp
puts "what is item description?(not optional)"
desc = gets.chomp
file_text = File.read("template.html")
file_text = file_text.gsub(/Item#/, "Item #{item_num.to_s}")
file_text = file_text.gsub(/<img class="item-image" src="">/, '<img class="item-image" src="' + item_num.to_s + '">')
file_text = file_text.gsub(/Item-desc/, desc)
puts file_text
file_create = File.new(item_num.to_s + ".html", "w")
file_create.puts(file_text)
file_create.close
item_page_end = '
</div>
<div class="col-sm-12">
<div class="headings">
</div>
</div>
</div>
</div>
</div>
<div class="footer" style="width=80%"/>
<script src="../js/jquery-3.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="https://use.fontawesome.com/55b73bf748.js"></script>
<script src="../js/jquery.magnific-popup.js"></script>
<script src="../js/script.js"></script>
</body>
</html>
'
file_to_update = File.read("item_page.html")
file_to_update = file_to_update.gsub(item_page_end, "")
file_to_update = File.open("item_page.html", "a+")
file_to_update.puts( '<p class="col-md-4"><img src="../images/' + item_num + '.jpg" />Item' + item_num + '</p>')
file_to_update.puts(item_page_end)
sleep 10
The HTML file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SHS Metal | Store</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/logo-icon.png"/>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../css/owl.carousel.css" rel="stylesheet">
<link href="../css/owl.theme.default.min.css" rel="stylesheet">
<link href="../css/magnific-popup.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="main element">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="title mt80">Store</h2>
</div>
<div class="col-sm-12">
<div class="headings">
</div>
</div>
</div>
</div>
</div>
<div class="footer" style="width=80%"/>
<script src="../js/jquery-3.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="https://use.fontawesome.com/55b73bf748.js"></script>
<script src="../js/jquery.magnific-popup.js"></script>
<script src="../js/script.js"></script>
</body>
</html>
What ends up happening is that the program inserts the HTML line I want to add to the "item_page.html" file to the end and then adding the "item_page_end" string at the end. Does anyone know how to fix it put the HTML line in the Ruby program after
<h2 class="title mt80">Store</h2>
Any other solution I have found is either for an array, a string or simply doesn't work.
If you can edit the HTML file, I see two possible answers:
(Please note that in all cases I use a function called add_all_elements which is a function that just returns whatever you want placed in your file.)
Cut your file in two, read the first half, add your elements and then read the second half. It should be something like this:
buffer = File.read("template_first_half.html")
buffer += add_all_elements()
buffer += File.read("template_second_half.html")
It is easy to use, but the HTML can be difficult to read.
You can also add a reference in the file and use gsub to replace it:
buffer = File.read("template.html")
buffer = buffer.gsub("#####anchor#####", add_all_elements())
Also easier to use, it will require that you place a unique sub-string within the file. The problem is that the reference must absolutely be unique within the file. The advantage is that the HTML file remains easy to read.
If you cannot edit the HTML file:
line_num = 0
buffer = ''
break_point = 42
text.each_line do |line|
if line_num == break_point
buffer += add_all_elements()
end
buffer += line
line_num += 1
end
Basically, you read the file line-by-line and place it into a buffer. When the line count reaches the required value (here, the variable break_point that I set at 42) you insert into the buffer all of the elements.
The inconvenient is that if the file is edited, the breaking point must be re-set each time. You could also use a string as a break point to avoid most of that problem.
You could do something like this:
file_to_update = File.read("item_page.html")
file_to_update = file_to_update.sub(/(?<=<h2 class="title mt80">Store<\/h2>)/,file_text)
File.write("item_page.html",file_to_update)
With this there's no need to create a new file for file_text.
Basically whats happening is the second line here uses a lookbehind assertion to insert file_text into file_to_update after "Store</h2>". Then you just overwrite the contents of item_page.html with the updated string.
I apologize for the poor formatting. Basically, "clientCount" is appearing as {{clientCount}} on my screen, rather than the integer '10'. Any ideas? Thank you!
var app = angular.module('metaDashboard', []);
/**This is for the meta-dashboard home page
*/
app.controller('TotalNumberController', ['$scope', function($scope) {
$scope.clientCount = '10';
$scope.campaignCount = '20';
$scope.accountCount = '10';
$scope.userCount = '100';
}
]);
--------------------------------------------------------------------
<html lang="en" ng-app="app">
<body class="page-body" data-url="http://neon.dev" ng-app="app">
<div class="row" ng-controller="TotalNumberController">
<div class="icon"><i class="entypo-globe"></i></div>
<div class="num"> {{clientCount}} </div>
<h3>Clients</h3>
<p></p>
</div>
</body>
</html>
Your app is called metaDashboard not app, you should change your code to the following:
<html lang="en" ng-app="metaDashboard">
Also ensure that you have angular.js files included in your head section.
Full snippet:
var app = angular.module('metaDashboard', []);
app.controller('TotalNumberController', ['$scope', function($scope) {
$scope.clientCount = '10';
$scope.campaignCount = '20';
$scope.accountCount = '10';
$scope.userCount = '100';
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="metaDashboard">
<div ng-controller="TotalNumberController">
<h1>{{clientCount}}</h1>
</div>
</body>
</html>
I have also included this Plunker here for you demonstrating it working:
https://plnkr.co/edit/t80RjCqjmE3y9bOkESo0?p=preview
As an additional note, it may be best to use the ViewModel syntax rather than $scope which I believe is best practice and may help you if you ever nested your AngularJS controllers.
I have the following code from a html page:
<div class="bd">
<h1><%= user.fullname %></h1>
</div>
What is the <%= %> tag? Is this standard html? I never encountered it before. (user.fullname is a javascript variable)
Here is the full code of the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/styles.css">
<script language="javascript">
// We use this code for handling unexpected errors.
// Using alert, we are sure that the user get notified in a Mobile device.
// We add this code at the begining of the index.html and we use only native javascript functions.
window.onerror = function(msg, url, lineNumber) {
if (typeof(msg) === "string") {
var error = msg + "\n\nFile: " + url + "\nLine: " + lineNumber;
// Ommit cordova and 3rd party libs errors.
if (url.indexOf("cordova.js") == -1 && url.indexOf("externallib") == -1) {
window.alert(error);
}
} else {
var error = msg;
}
// This may help debugging if we use logging apps in iOs or Android.
if(typeof(console) !== "undefined" && typeof(console.log) === "function") {
console.log(error);
}
// Let default error handler run.
return false;
};
</script>
<script src="cordova.js"></script>
<script src="childbrowser.js"></script>
<script src="webintent.js"></script>
<script src="PushNotification.js"></script>
<script src="externallib/jquery.min.js"></script>
<script src="externallib/jquery.touchSwipe.min.js"></script>
<script src="externallib/md5.js"></script>
<script src="externallib/matchMedia.js"></script>
<script src="externallib/matchMedia.addListener.js"></script>
<script src="externallib/underscore.js"></script>
<script src="externallib/backbone.js"></script>
<script src="externallib/backbone-localstorage.js"></script>
<script src="lib/mm.js"></script>
<script src="lib/mm.panels.js"></script>
<script src="lib/mm.util.js"></script>
<script src="lib/mm.lang.js"></script>
<script src="lib/mm.db.js"></script>
<script src="lib/mm.tpl.js"></script>
<script src="lib/mm.cache.js"></script>
<script src="lib/mm.settings.js"></script>
<script src="lib/mm.widgets.js"></script>
<script src="lib/mm.sync.js"></script>
<script src="lib/mm.emulator.js"></script>
<script src="lib/mm.rdebugger.js"></script>
<script src="lib/mm.fs.js"></script>
<script data-main="lib/app.js" src="externallib/require.js"></script>
<script language="javascript">
// We should wait to phonegap, if not, we get errors like:
// http://rickluna.com/wp/2012/04/solving-the-connection-to-the-server-was-unsuccessful-error-in-androidphonegap/
$(document).bind('deviceready', function() {
MM.log('Deviceready fired');
MM.deviceReady = true;
// Store the device locale for further uses.
navigator.globalization.getLocaleName(
function (locale) {
MM.lang.locale = locale.value;
MM.log("Device locale loaded: " + locale.value);
},
function () {}
);
// Disable the back button, exists the app.
document.addEventListener("backbutton", function() {
MM.panels.goBack();
}, false);
// Call deviceIsReady function in plugins.
// Plugins may not be able to listen for the deviceready event because it's possible that it was fire
// when plugins whasn't loaded, we use a timeout of 5 seconds.
setTimeout(function() {
for (var el in MM.plugins) {
var plugin = MM.plugins[el];
if (typeof(plugin.deviceIsReady) == 'function') {
plugin.deviceIsReady();
}
}
}, 5000);
MM.fs.init();
});
// This function is for handling when the app is opened using a custom URL SCHEME.
function handleOpenURL(url) {
MM._appLaunchedByURL(url);
}
</script>
<style id="mobilecssurl"></style>
</head>
<body>
<div id="add-site" style="display: none">
</div>
<div id="manage-accounts" style="display: none">
</div>
<div id="main-wrapper" style="display: none; background-color: white">
<div class="header-wrapper">
<header class="header-main">
<nav class="nav-main">
<ul class="nav">
<li class="nav-item home menu-home">
<a href="#" class="ir" id="mainmenu">
Home
</a>
</li>
</ul>
<span id="page-title"></span>
</nav>
</header>
</div>
<div id="panel-left" class="panel user-menu"></div>
<div id="panel-center" class="panel"></div>
<div id="panel-right" class="panel"></div>
</div>
<div id="app-dialog">
<div>
<div class="modalHeader">
</div>
<div class="modalContent">
</div>
<div class="modalFooter">
</div>
<div class="modalClear"></div>
</div>
</div>
<script type="text/template" id="menu_template">
<header>
<div class="media">
<div class="refresh app-ico">
<a href="#refresh">
<img width="16" height="16" src="img/reload.png" border="0">
</a>
</div>
<div class="img">
<img src="<%= MM.util.getMoodleFilePath(user.profileimageurl) %>" border="0">
</div>
<div class="bd">
<h1><%= user.fullname %></h1>
</div>
</div>
</header>
</body>
</html>
What is the <%= %> tag in html?
There is none. There are several templating engines that use <% and %> to delimit either templates or code blocks, though: Active Server Pages (ASP), JavaServer Pages (JSP), probably others. Those usually do server-side processing and replace the text in the <% ... %> with whatever should go there.
For instance, in your example
<h1><%= user.fullname %></h1>
if the user object's fullname property is "Joe Bloggs" when the resource is requested, the engine will swap that in for that token before sending the text, so what the browser actually sees is
<h1>Joe Bloggs</h1>
In your case, as you point out, the processing is happening client-side. Your <% ... %> tokens are within <script type="text/template">...</script> blocks, so the < isn't at all special. (Before DCoder pointed that out to me, I had a complex explanation here of why it worked...but then, er, DCoder pointed out that they were in script blocks, so...)
DCoder also identified that these are templates being handled by backbone.js, which reuses underscore.js's templates.
What is the <%= %> tag in html?
Like T.J. Crowder said, that is not an HTML tag, it comes from a client-side templating engine that happens to use these expressions to indicate the beginning/end of dynamically interpolated content.
How do I find out what templating engine is used? (it's not ASP or JSP)
Based on the fact that your page loads backbone.js, the template engine is most likely backbone's template engine, which is actually borrowed from underscore.js.
That's either ASP.NET or JavaScript markup that you're seeing.
That's usually a form of server side programming. It could be JSP (in Java), ASP or even PHP (with asp tags enabled). It will replace the contents (at server response time) of the <%= %> with the server side variable's value.
The statement '<%= user.fullname %>' evaluates the property 'user.fullname' and renders it as a string. The 'user' object could exist as a property on the page or could be a static class type.