HTML, Angular, Json

This is a variation on an earlier page that actually has a purpose. I used to chuck my favourite links into a piece of html.. well I’m still doing that, but at least I’ve separated the data from the code. I wanted to have a separate file for the Json, but in static pages, you can’t easily do that for security reasons, and I don’t want to spin up IIS etc for something so simple.

This is the end result (so you just keeping adding to the Json):

<pre><!DOCTYPE html>
<html ng-app="linksApp">
<head>
<title>My name is John</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="linksCtrl as ctrl">
<div class="container" ng-cloak>
<h2>{{ctrl.Summary}} (Count:{{ctrl.Links.length}})</h2>
<table class="table table-condensed">
<tr>
<th>Link</th>
</tr>
<tr ng-repeat="links in ctrl.Links">
<td><a href="{{links.URL}}">{{links.Name}}</a></td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js"></script>
 <script type="application/javascript">
 var linksApp = angular.module("linksApp",[]);
 linksApp.controller("linksCtrl", [function() {
 vm = this;
 vm.Summary = "A Set of Links";
 vm.Links = Links;
 }]);
 </script>

</body>
</html>
<!-- data... -->
<script>
 var Links = [
 {"Name" : "My blog", "URL" : "https://dennisaa.wordpress.com"},
 {"Name" : "Foreigner - Double Vision - YouTube", "URL" : "https://www.youtube.com/watch?v=36hdcn_3ekI"},
 {"Name" : "Acer 27\" monitor", "URL" : "http://www.acerdirect.co.uk/Acer_K272HLbid_69cm_27_Wide_6ms_100M_1_ACM_300nits_VA_LED_DVI_w-HDCP_HDMI_UM.HW3EE.005/version.asp"},
 {"Name" : "Chords for Hazard", "URL" : "https://tabs.ultimate-guitar.com/r/richard_marx/hazard_crd.htm"},
 ];
</script>

Advertisements

Bootstrap… 4!

Bootstrap 4 is available in Alpha, so I just updated the CDN references from my previous example accordingly…

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" crossorigin="anonymous">
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" crossorigin="anonymous"></script>

Bootstrap: simple example

useful online CSS formatter here.

Here for the code:

main.css:

.section-content {
 margin: 10px;
 padding: 1px;
 background-color: maroon;
}
.section-title {
 font-weight: bold;
 padding: 10px;
 background-color: blue;
 color: antiquewhite
}
.section-text {
 padding: 10px;
 background-color: hotpink;
}
.center {
 text-align: center
}
#footer {
 text-align: center;
 font-family: Georgia, 'Times New Roman', Times, serif;
 font-size: xx-small;
 color: crimson
}

index.html:

<!doctype html>
<html>

<head>
    <title>Simple example with Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    		<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"></link>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    		<link rel="stylesheet" href="css\main.css">
</head>

<body>
<div class="container">
<h1>The stream to Oakley</h1>
<div class="row">
<div id="banner" class="span12">
<div class="center">
                    <img src="images/WalkToOakley.jpg" height="200" border="5" /></div>
</div>
</div>
<div class="row">
<div id="main-content" class="span8">
<ul>
	<li>Took about 3 hours</li>
	<li>From a photo I took during a walk</li>
	<li>I invented the stream and therefore its vanishing point</li>
</ul>
<hr/>
<div class="span4">
<div class="section-title">The text belonging to section-title - parent</div>
<div class="section-text">Acrylic is one medium</div>
<div class="section-content">
<div class="section-title">The text belonging to section-title - child</div>
<div class="section-text">Oil is another</div>
</div>
<div class="section-content">
<div class="section-title">The text belonging to section-title - child</div>
<div class="section-text">And you might use pencil, but it wouldn't have the impact</div>
</div>
</div>
</div>
<div class="row">
<div id="footer" class="span12"> &copy; Lucius Verenus</div>
</div>
</div>
</body>

</html>

The editor I used is Visual Studio Code, as usual for me and HTML.

The art is from my painting on my Flickr site here.

Calling HTML from JavaScript, and JavaScript from HTML

Very trivial, but wanted just to show that using an external JS file rather than in-line, I can

  • set the innerHTML of a div from a JS file (which feels a little bit wrong – the UI can know about the “view model”, but the “view model” shouldn’t know about the JS)
  • call a JS function in an external file from say a button in the HTML

That is shown below.

For a while I struggled with getting the HTML to recognise the JS file, even though in the WebMatrix project that created it, the JS file was/is definitely in the right position. In the end, I just moved the files to my main IIS location, rather than get WebMatrix or Visual Studio to create a dynamic IIS (you know what I mean):


 

htmlx04

 


 

htmlx01


 

 


 

htmlx03

 


 

htmlx021

 


 


<!doctype html>

<html>
<head>
    <title>Some title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">

<div id="output"></div>


        <script src="js/script.js"></script>
        <button type="button" class="btn btn-default" onclick="x()"></button></div>
</body>
</html>
function x() {
    alert("test");
}

output.innerHTML = "testing";