Learning AngularJS framework from scratch

Learning AngularJS framework from scratch — Part I

AngularJS is an open-source JavaScript library, developed by Google. It greatly assist in Single Page Application / SPA development. Angular extends HTML by own, special tags. The library implements Model-View-Controller (MVC) and Model-View-ViewModel (MVVM) patterns, to help in the development and testing of Web applications.

Learning AngularJS — intro. How it works?

Angular loads HTML containing additional, specific tags, and by handling them, it assigns input and output page elements to the model that is stored as a set of JS variables.

Values can be set manually, as well gathered from a JSON source.

Framework adapts and extends the capabilities of plain HTML, to better serve dynamic content and allowing for automatic synchronization between the model and the view. In short a programmer can save really a lot of hard work.

A brilliant and very strong feature of Angular is data binding, and two-way binding.

Learning AngularJS — application anatomy at a glance

Before the construction of the first NG application, let’s explore its components.

1. Model — the data to operate on and to show for the users; models are stores as JS objects

2. View — so the stuff displayed to the users — final, working HTML with styles

3. Controller — business logic, which controls the application

4. Scope — the context that keeps models and functions (the controller usually sets them in the Scope)

5. Directives — so ng-xxx — something that “teaches” HTML about new syntax; they extends HTML by elements and attributes

Additionally we have also Expressions and Templates.

The directives are for example ng-app, ng-model, ng-init, and {{ name }} is and example of expression.

The Scope is the glue!

Scope ($scope) is the “glue” between controller and. The view and the controller don’t have to know about each other — the $scope will take care everything.

AngualrJS features

Main features of the library:

– MVC

– Routing

– Testing

– Data Binding

– jqLite embedded

– Templates

– History

– Factories

– ViewModel

– Controllers

– Views

– Directives

– Services

– DI (Dependency Injection)

– Validation

Creating AngularJS application

Let’s create a simple AngularJS application.

1. Including the library

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

2. HTML code

Let’s use ng-app directive as a start point; we can set this directive for the whole document, as well only for a particular element of the web page:

<div ng-app="">
    <label>Your name:</label>
    <input type="text" ng-model="theName"
        placeholder="Enter a name here …">
    <hr>
    <h1>Hello {{theName}}!</h1>
</div>

JavaScript code? Not necessary! Any text typed in the text input will be automatically displayed in the {{theName}} expression. It will be handled by AngularJS and its data-binding.

This means that when the user will type some text in the input, the model will be automatically updated! That’s the power and beauty of AngularJS framework.

And here we have the first Angular JS application.

Near the ng-app there is a lot of other directives. Here are commonly used:

ng-app — Declares the root element of an AngularJS application, under which directives can be used to declare bindings and define behavior

ng-bind — Sets the text of a DOM element to the value of an expression. For example, displays the value of ‘name’ inside the span element. Any changes to the variable ‘name’ in the application’s scope reflect instantly in the DOM

ng-model — Similar to ng-bind, but establishes a two-way data binding between the view and the scope

ng-model-options — Provides tuning for how model updates are done

ng-class — Lets class attributes be dynamically loaded

ng-controller — Specifies a JavaScript controller class that evaluates HTML expressions

ng-repeat — Instantiate an element once per item from a collection

ng-show & ng-hide — Conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style

ng-switch — Conditionally instantiate one template from a set of choices, depending on the value of a selection expression

ng-view — The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers

ng-if — Basic if statement directive that allow to show the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted

ng-aria — A module for accessibility support of common ARIA attributes

ng-animate — A module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives

The full list of directives :

http://www.w3schools.com/angular/angular_ref_directives.asp