Manoj Shrestha's Blog: Getting Started with AngularJS

Before starting anything with Angular JS, make sure to include the AngularJS library in your page. You can download the latest version of AngularJS from its official site: angularjs.org.

<html>

<body>

</body>

</html>

Now, we're ready to go.

Without spending much time on the traditional intro sections, let's get started with the major components of AngularJS.

Directives

These are one of the major components of AngularJS. A directive is a marker on a HTML tag that tells Angular to run or reference some javascript code. It provides us new ways to represent HTML DOM elements by adding attributes, element names, comments and CSS classes. These directives are processed by Angular's HTML Compiler. So, the directives tell the compiler to attach specified behaviour or event listeners to that DOM element or even transform the DOM element and its children, thereby creating interactive HTML.

Angular comes with a set of these directives built-in, like ngApp or ng-app, ngRepeat or ng-repeat, ngModel or ng-model, ngView or ng-view and many more. All these directives attach special behavior to DOM elements. For instance, the ngApp directive specifies that the specified element is the root element of the application. The ngRepeat directive iterates over a collection.You can define your own custom directives as well. We'll see how to create custom directives later on.

The following demonstrates the various ways a directive (myDir in this case) can be referenced from within a template:

Element Name	<my-dir></my-dir>
Attribute	<div my-dir="exp"></div>
Comment	<!-- directive: my-dir exp -->
CSS class	<div class="my-dir: exp;"></div>

Normalization

Angular normalizes an element's name and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:

Strip x- and data- from the front of the element/attributes.
Convert the : , - , or _ -delimited name to camelCase.

Here are some equivalent examples of elements that match ngBind:

ng-bind

ng:bind

ng_bind

data-ng-bind

x-ng-bind

Let's look at some directives examples:

# Example 1: Directives and Data Binding

<!DOCTYPE html>

<head>

<title>Directives and Data Binding Example 1</title>

</head>

<body>

Name:

<br />

<input type="text" ng-model="fullName" /> {{ fullName }}

</body>

</html>

Output:

Name:
{{fullName}}

ng-app : The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <html> or <body> tags. By including the ngApp directive, Angular treats the HTML inside that element as parts of anguluar application.

ng-model : The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using built-in ngModelController. It tries to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope. So, in the above example, Angular adds a property "fullName" into the scope.

{{ expression }} : These are called Angular Expressions. Angular expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}. It allows you to insert dynamic values to your HTML. You can perform numerical operations, string operations etc. For instance, {{ 1 + 1 }} evaluates to 2, {{ "hello" + " world!" }} evaluates to hello world!. The more usefulness of the Angular expressions comes with the data binding. In the above example, it evaluates the property named "fullName" from the scope and renders it to the view in realtime. This is the beauty of data-binding. It synchronizes the data between the model and view components such that any changes to view components updates corresponding model and also any changes to the model updates corresponding view components.

# Example 2: Looping with ng-repeat directives

<div ng-init="phones = [{name: 'HTC One M8', price:'649'},

{name: 'Samsung Galaxy S5', price:'699'},

{name: 'Sony Xperia Z1', price:'690'},

{name: 'Nexus 5', price:'399'},

{name: 'iPhone 5S', price:'749'}]">

{{phone.name}}
<em class="push-right">{{phone.price | currency}}</em>

</li>

</ul>

</div>

Output:

{{phone.name}} {{phone.price | currency}}

ng-init: The ngInit directive allows you to evaluate an expression in the current scope. It initializes data and can be accessed withing the scope. In the above example, we defined an array of objects named 'phones'.

ng-repeat: The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key. In a simple term, it allows you to iterate through a collection. Some special properties such as $first, $last, $middle, $even, $odd etc. are exposed on the local scope of each template instance. In the above example, we defined a loop variable phone that iterates over the collection phones that we put into the scope using the ng-init directive. And it renders the name and price property using data-binding expressions.

filter: It selects a subset of items from array and returns it as a new array. In the above example, we applied the phoneFilter filter which is a model representing the input field value.

orderBy: It's a filter that orders a specified array by the expression predicate. It orders the collection alphabetically if strings and numerically if numbers.

currency: It's a filter that formats a number as a currency (i.e. $1,234.56). When no currency symbol is provided, default symbol for current locale is used.

There are many other useful built-in filters such as uppercase, lowecase, date etc. You can go to the documentation for the full list of available filters:

AngularJS Filters

Manoj Shrestha's Blog

Sunday, June 8, 2014

Getting Started with AngularJS

1 comment :