AngularJS: ng-class

Image

ng-class01
In the picture, we see that the Fantasy font is ON (html default) for list item 2, and off for list items 1 and 3, as [true] makes it use the stuffit css selector in these cases.

(Later: turns out that given differences between Chrome and IE, Impact font is a good synonym for Fantasy that seems to render the same in both)

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>

Visual Studio Code: Intellisense for Angular

Firstly, credit to this person for getting me to a certain point. However, after attempting this line from the steps:

typings install angular --ambient --save

, I was rewarded with this message:

The GitHub URL looked promising, so I took a look there. More drilling takes you here:

And if you read the contribution from said blakeembrey, you get the normal thing of some man or woman heroically fighting a tide of requests…  in their own time. Blake Embrey: I salute you! 🙂

So anyway, Blake quite reasonably suggests looking at the ReadMe (remember to scroll down when you get to the link). In there, we find this nugget:

Let’s take that principle, look for the Typings package for Angular, and install it:

typings search --name angular
typings install dt~angular --global --save

(So the only change really is the [dt~])

Now, we’ll close and re-open VSC, just in case, start our JavaScript file, and see what happens (spoiler: it works):

Typings09

I didn’t show you the before picture – you’ll just have to trust me, you won’t get IntelliSense for Angular out of the box in Visual Studio Code

 

AngularJs: their own tutorial

I’m often looking for the “right book”, the “right PluralSight course” when searching for education. But I often forget that, done well, online tutorials and documentation can be very good. And so it is with Angular’s tutorial. By lesson 2, they are onto testing, after good examples of app directives and controllers.

The tutorial is here.

AngularJS: $HTTP service – json data from W3Schools

Yes, they have very kindly provided a small set of data we can use. I’ve changed their example to use [controller as] syntax, but otherwise it is the same:


<!DOCTYPE html>
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>

<div ng-app="myApp" ng-controller="customersCtrl as ctrl">

<ul>
<li ng-repeat="x in ctrl.names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($http) {
vm = this;
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function (response) {vm.names = response.records;});
});
</script>

</body>
</html>

http://www.w3schools.com/angular/angular_http.asp

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_customers_json

http://www.w3schools.com/angular/customers.php

 

AngularJs: html page with Angular and BootStrap


<!DOCTYPE html>
   <html ng-app="dietApp">
    <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="dietCtrl as ctrl">
       <div class="container">
        <h2>{{ctrl.Summary}} (Example:{{ctrl.Dishes[0].Breakfast}})</h2>

          <table class="table table-condensed">
             <tr>
                 <th>Breakfast</th>
                 <th>Lunch</th>
                 <th>Dinner</th>
             </tr>
              <tr ng-repeat="dishes in ctrl.Dishes">
                  <td>{{dishes.Breakfast}}</td>
                  <td>{{dishes.Lunch}}</td>
                  <td>{{dishes.Dinner}}</td>
              </tr>

          </table>
       </div>
        <h3>[{{ctrl.Dishes.length}}]</h3>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js"></script>
        <script type="application/javascript">
            var dietApp = angular.module("dietApp",[]);
            dietApp.controller("dietCtrl", [function() {
            vm = this;
            vm.Summary = "The World of Classy Meals";
            vm.Dishes = [
                {"Breakfast" : "Cornflakes", "Lunch" : "Pot Noodle", "Dinner" : "Haggis"},
                {"Breakfast" : "Porridge", "Lunch" : "McD", "Dinner" : "Lobster Thermidor"},
                {"Breakfast" : "Poached egg", "Lunch" : "Meal Deal", "Dinner" : "Pigs Trotter in vinegar"},
                {"Breakfast" : "Denny's Special", "Lunch" : "Gin and Tonic", "Dinner" : "Pasta"},
            ];
            }]);
        </script>
    </body>
</html>

SPA01

SPA02

AngularJs: Controller stuff… from the official tutorial

I had not appreciated just what a good resource this is:
https://docs.angularjs.org/tutorial/step_02

And to remind me (again) about the module, controller syntax:


var phonecatApp = angular.module('phonecatApp',[]);

phonecatApp.controller('PhoneListCtrl', function() {
 var vm = this;
 vm.phones = [
 {'name':'Nexus S', 'snippet':'it just got faster'},
 {'name':'Jaguar XE', 'snippet':'it just got more expensive'},

 ];
return vm;
});
<!doctype html>
<html ng-app="phonecatApp">
<head>

 <script src="bower_components/angular/angular.js"></script>
 <script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl as myWorld">

 <ul>
 <li ng-repeat="phone in myWorld.phones">
 <span>{{phone.name}}</span>
 <p>{{phone.snippet}}</p>
 </li>
 </ul>

</body>
</html>

controller01