3,127 reads

The basic concepts of Angular JS

by Zameer AnsariDecember 25th, 2017

Too Long; Didn't Read

We need to figure out when to trigger our Javascript.

Company Mentioned

featured image - The basic concepts of Angular JS

credit: https://www.amitavroy.com/justread/content/articles/working-xml-angular-js/

Why should we use Angular JS?

Helps organize the javascript code
Helps create responsive (as in fast) websites
Plays well with jQuery
Is easy to test

A client side javascript framework for adding interactivity to HTML.

We need to figure out when to trigger our Javascript.

Directives

A directive is a marker on a HTML tag that tells Angular to run or reference some Javascript code.

e.g. In the following code snippet, ng-crontroller is a marker on body tag

<body ng-crontroller='abcController'> </body>

And the referenced javascript code is:

function abcController(){     alert('hello Angular JS!'); }

The first step is to download the library from the official website

Modules

Modules are where we write pieces of our Angular application to keep our code encapsulated to make our code more maintainable, testable and readable.
Modules are where we define depencies for our application.

Let’s create a module:

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

And use it:

<html ng-app='abcApp'> </html>

The above code does nothing as such, currently it is just saying that the entire HTML area is part of the Angular application. We can start using expressions at this point:

Expressions can also be used for string manipulation:

Hello

Controllers

Controllers are where we define our app’s behavior by defining functions and values.

Let’s have some data printed on the view using controller.

(function(){

var app = angular.module('abc', []);app.controller('abcController', function(){this.a = abc;});

var abc = {propertyA : 'A',propertyB: 'B'};})();

The view should look like this:

<div ng-controller='abcController as abc' > </div>

This works well with a single object but what if we have an array?

Inside a controller:

(function(){

var app = angular.module('abc', []);app.controller('abcController', function(){this.as = abc;});

var abc = [{propertyA : 'A',propertyB: 'B'}, {propertyA : 'C',propertyB: 'D'}, {propertyA : 'E',propertyB: 'F'}];})();

To show this in the view, we need to use ng-repeat:

<div ng-controller='abcController as abc' >     <div ng-repeat='a in abc.as'>     </div> </div>

There are a lot of build in directives like ng-app, ng-controller, ng-show, ng-hide, ng-repeat etc.

Filters

The basic formula of filters is as follows:

e.g.:

MM/dd/yyyy @ h:mm lowercase string a vvveeeerrrryy llooonnngggg strrrriiiinngggg <li ng-repeat='a in abcs | limitTo: 3'> <li ng-repeat='a in abcs | orderBy: -A'>

The pipe charachter in the expression asks the expression to take the first parameter to the expression and pass it to the second part of the expression. Like in the following:

$2.695865

Currency is a filter in this case.

source

Originally published at xameeramir.github.io.