Week 08

Angular JS

Angular js is a JavaScript based open-source front-end web framework mainly maintain by Google. This is use to develop single page applications. Its aim to simplify both the development and the testing of such applications by providing a framework for client-side MVC and MVVM architectures. 

Reference: https://en.wikipedia.org/wiki/AngularJS

MVC Architecture

MVC stands for Model, View and Controller. MVC separate application into three main components- Model, View and Controller

• Model - Model is data and business logic of the application
• View - View is a user interface of the application
• Controller - Controller is the request handler of the application

Reference: https://www.tutorialsteacher.com/mvc/mvc-architecture

Core Features of Angular Js

Directives 

At a high level, directives are markers on a DOM element that tell Angular JS's HTML Compiler to attach a specific behavior to that DOM element or even to transform the DOM element and its children. 

Examples:

1. ng-app - Auto bootstrap Angular Js application
2. ng-init - Initialize Angular Js variables
3. ng-model -  Binds HTML control's value to a property on the $scope object
4. ng-controller - Attaches the controller of MVC to the view
5. ng-bind - Replaces the value of HTML control with the value of specified Angular Js expression
6. ng-repeat - Repeats HTML template once per each item in the specific collection
7. ng-show - Display HTML element based on the value of specified expression
8. ng-readonly - Makes HTML elements read-only based on the value of specified expression
9. ng-disabled - Sets the disable attribute on the HTML element if specified expression evaluates to true
10. ng-if - Removes or recreates HTML element based on a expression
11. ng-click - Specified custom behavior when an element is clicked

Expressions 

Angular Js expressions can be written written inside double braces. {{ Expression }}

Angular Js expressions can also be written inside the directives. ng-bind="Expression"

Angular Js resolve the expression, and return the result exactly where the expression written 

Angular Js expressions can contain literals, operators and variables. 

Controllers 

Controller is a JavaScript function that maintains the application data and behavior using $scope object.

Can attach properties and methods to the $scope object inside a controller function, which in turn will add/update the data and attach behaviors to HTML elements. The $scope object is a glue between the controller and HTML.

The ng-controller directive is used to specify a controller in HTML element, which will add behavior or maintain the data in that HTML element and its child elements. 

Reference:https://www.tutorialsteacher.com/angularjs/angularjs-controller

Filters

Angular js provide filters to transform data

• currency - Format a number to a currency format.
• date - Format a date to a specified format 
• filter - Select a subsets of items form an array
• json - Format a object to a Json string
• limitTo - Limits an array/string , into a specified number of elements. characters
• lowercase - Format a string into lowercase
• uppercase - Format a string into uppercase
• orderBy - Orders an array by an expression
• number - Format a number to a string

Examples :

<p>My name is {{ firstName | uppercase }}</p>

Tables

Tables are generally repeatable. ng-repeat directive can be used to draw tables easily.

HTML DOM

Some directives can be used to bind data to attributes of HTML DOM elements.

• ng-disable - Its disable the given control.
• ng-show - Its shows a given control.
• ng-hide - Its hide a given control.
• ng-click - Its represents an Angular Js click event.