Premium Economy Software


Singapore
Perth W Australia

Paperless Idiot: Your FIRST guide to Angular.JS

August 16, 2016 Uncategorized 0 comments

Angular: Why Do Programmers Make It So Hard!

Enough. I’m learning web app programming and came across Angular. After spending 3 days on it, reading all the material out there, I got angry and decided to write my own Idiot tutorial guide. Why because the rest of us do not have an IQ of 150! That’s why. So this is for all you people really struggling to understand this stuff.

 

What Is Angular

Angular is a framework for Javascript.

 

Very easy, think of a work desk for making a wooden piece of wood. You may need a hammer, a chisel and something to put your block of wood on to work on it.

Tada! You could call this your woodworking framework. A Bench, A Saw and a Hammer. Some benches have a power drill. Some benches have a screw driver.

Angular is a set of tools for Javascript that make up one type of ‘Framework’. We use frameworks to save ourselves re-setting up a work area every time we do a job.

Ok Now What?

<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body><div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div></body>
</html>

 

The first line

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

Simply tells the server where to find your ‘framework’. It’s all nicely packaged there. Simple!

 

Load the APP

<div ng-app="">

Ok, nobody told me that NG standard for Angular without the ‘A’ because ANG sounds dumb.

So NG-APP means tell me what APP to look for.

The simplest way to think of APP is just think of it as a CLASS. Surely you know what that is in programming?

Ok, so ng-app tells the server what class to look for.

 

SETUP A MODEL

<input type="text" ng-model="name">

The line here uses for Angular magic to define this variable as ‘NAME’. Use NG-Model. What the heck is a Model? Someone who is really thin that walks along a catwalk?

Honestly I do not know how they came up with the name. But back to my cook waiter example. This Model thing is from a style of coding called the MVC style. Or Model View Controller. It’s just a way of doing stuff. Call it a ‘Work Flow’.

 

The Cook is the model. He does all the heavy lifting in a restaurant. He turns on the stove, gets the ingredients and serves out the food. So you could think of Model of ‘Doing the grunt work guy’.

Then there’s the controller.

I like to think of the controller as the manager, telling what the Cook and the Waiter have to do. He does not need to know how to cook or customer service, but he sets the order of stuff.

Finally the View

He’s the waiter. He needs to make the food look nice, do some small preparation like pour sauce on the food and add pepper. Most importantly he has to look sharp and impressive. The cook and manager can be dirty, but no. The waiter (view) must all be prefect.

 

Serve It Up

Now that you have go it, you need to serve it. That’s all there is because Angular “Binds” or changers variable into using the double curly bracket {{. So the waiter now presents you the customer with the food {{food}}.
Hello {{name}}

So in 1 shot. The Cook (NG-model) is told that the input of the form is ‘name’. Immediately the Waiter (view) gets the food (data) and changers the variable name.