Category: Uncategorized

Angular JS Continued – Built in Directives

David Turnbull /
Buy Button

var gem = {
name: “Dodechahedron”
price: 2.95
description: “. . . .”
canPurchase: false
}
Too add a button where add to cart shows when canPurchase is true:
<body ng-controller=“StoreController as store”>
<div > //
<h1> {{store.product.name}}</h1>
<h2>$store.product.price}}</h2>
<p>{{store.product.description}} </p>
<button ng-show=“store.product.canPurchase”>
Add to cart </button>
</div>
</body>
ng-show is the built in directive. To add a sold out button type:
soldOut:
and 2ndly
<div ng-show=“!store.product.soldOut”>
The ! flips the true/false, or use:
<div ng-hide=“store.product.soldOut”>
Working with/displaying Arrays
(function(){
var app = angular.module(‘store’,[ ]);
app.controller(‘StoreController, function(){
this.products = gems;
});
var gems = [ // the [ means its an array
{
name: “Dodechahedron”,
price: 2.95
description: “. . . .”
canPurchase: false
},
{
name: “Pentagonal Gem”,
price: 2.95
description: “. . . .”
canPurchase: false
}
];
To display this array you could write:
<body ng-controller=“StoreController as store”>
<div >
<h1> {{store.products[0].name}}</h1>
<h2>$store.products[0].price}}</h2>
<p>{{store.product[0].description}} </p>
<button ng-show=“store.product.canPurchase”>
Add to cart </button>
</div>
<div >
<h1> {{store.products[1].name}}</h1>
<h2>$store.products[1].price}}</h2>
<p>{{store.products[1].description}} </p>
<button ng-show=“store.product.canPurchase”>
Add to cart </button>
</div>
</body>
But to speed things up, and automate it, write:
<body ng-controller=“StoreController as store”>
<div ng-repeat=“product in store.products”>
<h1> {{product.name}}</h1>
<h2>${{product.price}}</h2>
<p>{{product.description}} </p>
<button ng-show=“product.canPurchase”>
Add to cart </button>
</div>
</body>
The directive ng-repeat displays all the values in an array.

Getting Started with Angular JS

David Turnbull /

I’ve been looking at angular JS as a beginner, and so I’ve been looking at what things like controllers and directives are. Here are my notes so far:

Learning Angular JS

Code School Notes

Instead of re-requesting the entire web-page, re-downloading all html ect, Angular JS only requests the information needed, sent in the form of JSON data.

It is a modern API-Driven front end application.

Include the angular library with <script type=“text/javascript” src=“angular.min.js”></script>

Directives

Angular JS adds behaviour to HTML through Directives, which is a marker on a HTML tag which tells angular to run javascript/html.

e.g: <body ng-controller=“StoreController”>

Runs the function “StoreController”, although this example code would normally not be used.

Modules

Modules are pieces of the angular application, it makes the code more maintainable, testable and readable. Also easier to check dependancies (code that relies on other code to run).

e.g: var app = angular.module(‘store’,[]);

var = variable
app = name of the variable
angular = references the angular library
module = refers to module in the library, because its a module
store = name of the module (can be anything)
[ ] = any dependancies go in here, add this because its an array

The code above would be contained in the Javascript file, and referenced via a directive in HTML:

i.e: <html ng-app=“store”>

ng-app is a directive that can only be used once in a page, and allows everything inside the element to be run through angular, allowing for expressions.

Expressions

e.g.<p> I am {{4 + 6}}</p>
This would come out as “I am 10” if the element is run through angular.

Controllers

Helps us get data onto the page:

var gem = {
name: ‘Dodechahedron
price: 2.95
description: ‘. . . .’
}

This variable will be in the javascript page, however it needs to be placed in the HTML, you use functions to do this in the app.js file:

(function(){
var app = angular.module(‘store’,[ ]);
app.controller(‘StoreController, function(){ //StoreController is controller name, can be anything.
this.product = gem; //product is a property of
the controller, = gem references the variable
below
});
var gem = {
name: ‘Dodechahedron
price: 2.95
description: ‘. . . .’
}
})();

in the HTML to add the controller write:

<div ng-controller=“StoreController as store”> //StoreController is name of controller, as is a keyword, store is an alias for the controller.
<h1> {{store.product.name}}</h1>
<h2>$store.product.price}}</h2>
<p>{{store.product.description}} </p> //These three
are values of the store controller.
</div>

Responsive Design

David Turnbull /

I’ve looked into the possibility of needing an app for Speakers Corner and although the web-browser version would be limited on how it could communicate with the device, there is little need for more than location. Although notifications for replies would work well, I think email notifications would work well enough. There could be a possibility for an app in the future though.

So I’ve looked at the responsive design for HTML, resizing the window will be quite simple, with this simple code. Beyond that, I’ll need to have the sections of the site to re-order themselves depending on room.

HTML:

<html>
<body>
    <div id="wrapper"></div>
</body>
</html>

CSS:

html, body, {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}