Getting Started with Angular JS

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>

Leave a Reply

Your email address will not be published. Required fields are marked *