AngularJS Basics

AngularJS
What Is AngularJS ?
client-side technology, written entirely in JavaScript. It works with the
long-established technologies of the web (HTML, CSS, and JavaScript) to make the
development of web apps easier and faster than ever before.
It is a framework that is primarily used to build single-page web applications
(refer this : http://en.wikipedia.org/wiki/Single-page_application).
The AngularJS team describes it as a "structural framework for dynamic web apps."
How Is It different?
In other JavaScript frameworks, we are forced to extend from custom JavaScript
objects and manipulate the DOM from the outside in. For instance, using jQuery, to
add a button in the DOM, we’ll have to know where we’re putting the element and
insert it in the appropriate place:
var btn = $("<button>Hi</button>");
btn.on('click', function(evt) {
console.log("Clicked button")
});
$("#checkoutHolder").append(btn);
Although this process is not complex, it requires the developer to have knowledge
of the entire DOM
and force our complex logic inside JavaScript code to manipulate a foreign DOM.
AngularJS, on the other hand, augments HTML to give it native
Model-View-Controller (MVC) capabilities. This choice, as it turns out, makes
building impressive and expressive client-side applications quick and enjoyable.

License:
The AngularJS source code is made freely available on
Github(https://github.com/angular/angular.js) under the MIT license.
Your First AngularJS Web Application :
Let's Do "Hello World" :)
<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
</head>
<body>
<input ng-model="name" type="text" placeholder="Your name">
<h1>Hello {{ name }}</h1>
</body>
</html>
Try here: http://jsfiddle.net/asP3X/
Introducing Data Binding in AngularJS :
In classic web frameworks,such as Rails,the controller combines data from models
and mashes them together with templates to deliver a view to the user. This
combination produces a single-way view. Without building any custom JavaScript
components, the view will only reflect the data the model exposes at the time of

the view rendering. At the time of this writing, there are several JavaScript
frameworks that promise automatic data binding of the view and the model.
AngularJS takes a different approach. Instead of merging data into a template and
replacing a DOM element, AngularJS creates live templates as a view. Individual
components of the views are dynamically interpolated live. This feature is arguably
one of the most important in AngularJS and allows us to write the "hello world" app
we just wrote in only 10 lines of code without a single line of JavaScript.
This feature works by simply including angular.js in our HTML and explicitly setting
the ng-app attribute on an element in the DOM. The ng-app attribute declares that
everything inside of it belongs to this Angular app; that’s how we can nest an
Angular app inside of a web app. The only components that will be affected by
Angular are the DOM elements that we declare inside of the one with the "ng-app"
attribute.
To declare our above example inside of a controller, we’ll change the HTML to look
like:
<div ng-controller='MyController'>
<input ng-model="name" type="text" placeholder="Your name">
<h1>Hello {{ name }}, <br />Time is : {{clock}}</h1>
</div>
In this example, we’ll create a clock that will tick every second (as clocks usually
do) and change the
data on the clock variable:
Controller:
function MyController($scope) {
var updateClock = function() {
$scope.clock =new Date();
};
setInterval( function() {
$scope.$apply(updateClock);

},1000);
updateClock();
};
Live Demo : http://jsfiddle.net/asP3X/1/
Modules :
In JavaScript, placing functional code in the global namespace is rarely a good idea.
It can cause collisions that are tough to debug and cost us precious development
time.
When looking at data binding in the previous chapter, we wrote our controllers in
the global
namespace by defining a single function:
function MyController($scope) {
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
},1000);
updateClock();
}
Lets talk about how to write efficient, production-ready controllers by encapsulating
our functionality in a single core unit called a module.
In Angular, a module is the main way to define an AngularJS app. The module of an
app is where we’ll contain all of our application code. An app can contain several
modules, each one containing

code that pertains to specific functionality.
Using modules gives us a lot of advantages, such as:
• Keeping our global namespace clean
• Making tests easier to write and keeping them clean so as to more easily target
isolated functionality
• Making it easy to share code between applications
• Allowing our app to load different parts of the code in any order.
The Angular module API allows us to declare a module using the
angular.module(string, [arrayofstrings]) API method.
Properties
Angular modules have properties that we can use to inspect the module.
name(string)
The name property on the modules gives us the name of the module as a string.
requires(array of strings)
The requires property contains a list of modules (as strings) that the
injector loads before the module itself is loaded.
Scopes ($scope)
Scopes are a core fundamental of any Angular app. They are used all over the
framework, so it’s important to know them and how they work.
The scopes of the application refer to the application model. Scopes are the
execution context for expressions. The $scope object is where we define the
business functinality of the application, the methods in our controllers, and
properties in the views.
Scopes serve as the glue between the controller and the view. Just before our app
renders the view to the user, the view template links to the scope, and the app sets
up the DOM to notify Angular for property changes.

Scopes are the source of truth for the application state. Because of this live binding,
we can rely on the $scope to update immediately when the view modifies it, and we
can rely on the view to update when the $scope changes.
$scopes in AngularJS are arranged in a hierarchical structure that mimics the DOM
and thus are nestable: We can reference properties on parent $scopes.
What Can Scopes Do?
Scopes have the following basic functions:
• They provide observers to watch for model changes
•They provide the ability to propagate model changes through the application as
well as outside the system to other components
•They can be nested such that they can isolate functionality and model properties
•They provide an execution environment in which expressions are evaluated.
The majority of the work we’ll do in developing our Angular app is building out the
functionality of a scope.
Filters
In AngularJS, a filter provides a way to format the data we display to the user.
Angular gives us
several built-in filters as well as an easy way to create our own.
We invoke filters in our HTML with the "|"
(pipe) character inside the template binding characters
{{}}. For instance, let’s say we want to capitalize our string. We can either change
all the characters
in a string to be capitalized, or we can use a filter.
{{ name | uppercase }}
We can also use filters from within JavaScript by using the
$filter service. For instance, to use the lowercase JavaScript filter:
app.controller('DemoController', ['$scope','$filter',function($scope, $filter) {
$scope.name =$filter('lowercase')('Ari');

}]);
currency
The currency filter formats a number as currency. In other words, 123 as currency
looks like: {{ 123 | currency }}. can use like currency :'$'
Currency gives us the option of displaying a currency symbol or identifier.
date
The date filter allows us to format a date based upon a requested format style. The
date formatter provides us several built-in options. If no date format is passed,
then it defaults to showing mediumDate (as you can see below).
{{ today | date:'medium' }} 
{{ today | date:'short' }} 
{{ today | date:'fullDate' }} 
{{ today | date:'longDate' }} 
{{ today | date:'mediumDate' }} 
{{ today | date:'shortDate' }} 
{{ today | date:'mediumTime' }} 
{{ today | date:'shortTime' }} 
Year Formatting
Four-digit year: {{ today | date:'yyyy' }} 
Two-digit padded year: {{ today | date:'yy' }} 
One-digit year: {{ today | date:'y' }} 
And Many More.
The filter filter selects a subset of items from an array of items and returns a new
array. This filter is generally used as a way to filter out items for display. For
instance, when using client-side searching, we can filter out items from an array
immediately.
The filter method takes a string, object, or function that it will run to select or reject

array elements. If the first parameter passed in is a:
Live Demo : http://jsfiddle.net/asP3X/3/
Introduction to Directives :
Any attribute that starts with "ng-" is a directive.
Use it as "ng-" when usinh in views.
ex:
• ngRepeat (enter, leave and move animations) use it as ng-repeat
• ngInclude (enter and leave animations) use it as ng-include
• ngView (enter and leave animations) use it as ng-view
• ngIf (enter and leave animations) use it as ng-if
• ngSwitch (enter and leave animations) use it as ng-switch
• ngClass (addClass and removeClass animations) use it as ng-class
• ngShow and ngHide (addClass and removeClass animations for
.ng-hide).use it as ng-show, ng-hide.
Our First Directive
We use directives to extend the html5.
<my-directive></my-directive>
Directive:
angular.module('myApp', [])
.directive('myDirective',function() {
return{

restrict:'E',
template:'<a href="http://google.com">Click me to go to Google</a>'
}
});
So here is the result:
And when you see the source :

Table 6-2. Directive definition options
restrict : Declare how directive can be used in a template as an element, attribute,
class, comment, or any combination.
priority : Set the order of execution in the template relative to other directives on
the element.
template : Specify an inline template as a string. Not used if you’re specifying your
template as a URL.
templateUrl : Specify the template to be loaded by URL. This is not used if you’ve
specified an inline template as a string.
replace : If true, replace the current element. If false or unspecified, append this
directive to the current element.
transclude : Lets you move the original children of a directive to a location inside
the new template.
scope : Create a new scope for this directive rather than inheriting the parent
scope.

controller : Create a controller which publishes an API for communicating across
directives.
require : Require that another directive be present for this directive to function
correctly.
link : Programmatically modify resulting DOM element instances, add event
listeners, and set up data binding.
compile : Programmatically modify the DOM template for features across copies of
a directive, as when used in ng-repeat. Your compile function can also return link
functions to modify the resulting element instances.
For more on AngularJs, Explore the site http://angularjs.org/. and can find many
tutorials and blogs.
Have a support in stackoverflow:
http://stackoverflow.com/questions/tagged/angularjs

AngularJS Basics

More Related Content

What's hot (20)

Similar to AngularJS Basics (20)

Recently uploaded (20)

AngularJS Basics