Dive into AngularJS and directives

Tricode BV
De Schutterij 12 -18
3905 PL Veenendaal
The Netherlands
tel: 0318 - 559210
www.tricode.nl
info@tricode.nl
DIVE INTO
ANGULAR JS
AND DIRECTIVES
Andrej Gasteovski
08.04.2015

Agenda
• What is AngularJS?
• Main concepts of AngularJS
• Directives overview
*

What is AngularJS?
AngularJS in general and benefits of using it

What is AngularJS?
“Superheroic JavaScript framework”
- angularjs.org
“Angular is what HTML would have been, had it
been designed for applications.”
- angularjs.org
"AngularJS extends HTML with new
attributes.
AngularJS is perfect for Single Page
Applications (SPAs).
AngularJS is easy to learn.”
- w3schools.com

Web app that fits on a single web page
No need for reloading the whole page
HTML page contains fragments that can be
loaded in the background
Extremely good for responsive sites
Result: Faster, native and more interactive UI
Examples: Voyager, Google Maps, Google
Calendar, Facebook Groups...
Why Single Page Application?

Other AngularJS features
Complete client-side solution
Implements client-side MVC pattern
Uses dependency injection
Implements two-way data binding
No direct DOM manipulation, less code
Unit testable
Support for all major browsers
Supported by Google
Large and fast growing community
Open source, completely free

Main concepts of
AngularJS
Overview of the core features in AngularJS such as data-
binding, scope, controller, directives...

Applications, Modules, Controllers...
AngularJS modules define AngularJS application
var app = angular.module('myApplication', []);
AngularJS controllers control applications
app.controller('myController', function
($scope) {
$scope.title = "Harry Potter";
$scope.author = "J.K. Rowling";
});
Module - container of different parts of the application such as
controllers, services, filter etc.
Scope is the object that links Controller to the View. Controller
should initialize the scope with data that View needs to display.
Controllers are regular JavaScript object.

Data binding in AngularJS
Data binding - automatic synchronization of data
between Model and View.
AngularJS supports Two-Way Data Binding
The template (HTML with
additional resources) is
compiled in the browser. This
step produces a live view.
Any change in the model is
propagated to the view and
any change in the view is
reflected in the model.
angularjs.org

Expressions
Used to bind data to HTML
Written inside double braces: {{ }}
Can contain literals, operators and variables
Similar to JavaScript expressions
<div>
<p>This is an expression: {{ 5 + 10 }}</p>
</div>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>
Total in dollar: {{ quantity * cost }}
</p>
</div>
<div ng-app="" ng-init="firstName='John';
lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
<div ng-app="" ng-init="person={firstName:'John',
lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
*ng-init is a directive that defines initial values for an
AngularJS application
Examples from w3scools.
com

What are directives?
Attributes used to extend the standard HTML
starting with the ng- prefix.
The main purpose of Directives is to tell Angular to
attach a specified behavior of a DOM element or
even transform a DOM element and his children.
Most used directives:
ng-app, ng-init, ng-model, ng-repeat, ng-bind,
ng-list, ng-value...

ng-app
● Defines the root element of an AngularJS
application
● Used for automatic initialization of the
application when the web page is loaded
● Typically placed in the root element of the page
e.g. <body>
● This directive can include the module that
defines the AngularJS application
<head>
<script>
var app = angular.module('myApplication', []);
</script>
</head>
<body ng-app="myApplication">
<div>
</div>
</body>

ng-controller
● Defines the application controller
● Key aspect to support the MVC pattern
● Controllers contains business logic to decorate
the scope with functions and attributes
● Can be defined in external files
<div ng-app="myApp" ng-controller="bookCTRL">
Title: <input type="text">{{ title }}<br>
Author: <input type="text">{{ author }}<br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('bookCtrl', function($scope) {
$scope.title = "John";
$scope.author = "Doe";
$scope.fullName = function() {
return $scope.title + " - " + $scope.author;
}
});
</script>

ng-init
● Alternative of using controllers
● Initializes an AngularJS Application data
● Not commonly used
● Use only when aliasing special properties of ng-
repeat
<div ng-app="" ng-init="books=[{title:'Harry Potter',author:'J.K. Rowling'},
{title:'Game of Thrones',author:'G. Margin'}]">
...
</div>

ng-model
● Binds the value of an HTML controls to the
application data
● Provide type validation for application data
● Provide CSS classes for HTML elements
● Bind HTML elements to HTML forms
● Keep the state of the HTML element
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number” ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>

ng-repeat
● Repeats and HTML element for every item in
the collection
● Each element instance has its own scope and
the given loop variable is set to the current
collection item
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Looping with objects:
● Jani, Norway
● Hege, Sweden
● Kai, Denmark
Examples from w3scools.
com

Summary
AngularJS is a powerful JavaScript framework for
client-side applications based on the standard MVC
pattern. The most powerful part of Angular are its
directives that allows extension of the standard
HTML. Applications built with AngularJS are easy
for testing, maintainable, contain reusable
components and well architectured.
More information about AngularJS:
w3school AngularJS tutorial
Official AngularJS API Docs
Interactive tutorial about AngularJS

Follow us:
tricode.nl
facebook.com/tricode
linkedin.com/company/tricode
slideshare.net/tricode
twitter.com/tricode

Dive into AngularJS and directives

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

Similar to Dive into AngularJS and directives

Similar to Dive into AngularJS and directives (20)

More from Tricode (part of Dept)

More from Tricode (part of Dept) (20)

Recently uploaded

Recently uploaded (20)

Dive into AngularJS and directives