An introduction to AngularJS architecture and usage, equipped with an overview of AngularJS role in solving the problems arised along the history of web development. For further material and updates: http://blog.avirancohen.com

1. AngularJS
Fundamentals
Aviran Cohen

2. Hello!
I am Aviran Cohen
Full-stack Developer
7 years experience in web development
blog.avirancohen.com
facebook.com/MEvsWEB

3. What we’ll cover
1.A brief history of web development
2.Introduction
3.Architecture
4.Getting Started
5.Directives
6.HTML Compiler

4. 1.
A Brief History
Of Web
Development

5. Once upon a time

6. jQuery (2006)

7. jQuery
▣ Started as DOM manipulation tool
▣ Became an all-in-one javascript library
□ without much forethoughts
▣ Our best friend back then, until..

8. The Era of Web
Apps

9. jQuery + Webapp = Headaches
▣ Structureless spaghetti code
□ Total code mess
▣ Selectors creating tight coupling
□ Non-reusable code
▣ Not enough high level abstractions
□ A lot of code required to be written

10. = TOTAL MESS

11. Backbone.js (2010)

12. backbone.js
▣ It brings structures to our code
▣ but still uses jQuery to handle the views

13. backbone.js
▣ Solved
□ No more spaghetti code
▣ NOT Solved
□ Selectors creating tight coupling
□ Not enough high level abstractions

14. What about High Level Abstractions?
▣ Backbone is unopinionated.
▣ It lacks the necessary tools to easily manage
any webapp above a certain threshold in
complexity
▣ The bottom line - Backbone asks you to write
A Lot More Code to get what you want

15. And the earth was without form,
and void; and darkness wasupon
the face of the deep

16. ‘’
And the earth was without
form, and void; and darkness
wasupon the face of the deep
And God said:
Let there be light..

17. ‘’
And the earth was without
form, and void; and darkness
wasupon the face of the deep
And God said:
Let there be light..

18. ...and there was light

19. AngularJS
Initial release in 2009
Faster development
Quality code (structure and robustness)
Developed by Google

20. Trends

21. How come jQuery is still way more popular
than angular?

22. It’s not one or another
▣ Angular does not replace jQuery!
▣ jQuery library is the undoubted king of a DOM
manipulation

23. Angular’s Role
▣ Angular offers a comprehensive framework to
develop front-end applications
▣ Actually Angular provides jqLite out of the
box
□ a jQuery-like library that provides a subset of
jQuery functionality

24. 2.
Introduction
What
AngularJS is all
about

25. ‘’
AngularJS is:
1.a powerful Front-end
JavaScript framework
1.Extends HTML to build
complex web applications
1.Organizes JavaScript code
into reusable components

26. How things worked before:
JS
HTML
Structure
Behavior
CSSPresentation

27. HTMLInterface
CSSPresentation
JSLogic
How things works the Angular’s way:

28. Why Angular
▣ Component based - Code reuse
▣ Extends HTML by adding directives, custom
tags, attributes, expressions, templates within
HTML
▣ Data Binding and Dependency Injection
□ Everything is communicated automatically
▣ Dependency-injected code for easy testing
and TDD

29. The major features of AngularJS
▣ Easy Data Binding: Two way Data Binding
▣ Reusable Components - Directives
▣ Dependency injection
▣ Routing
▣ Templating
▣ Modules
▣ Controllers
▣ Services
▣ Expressions
▣ Filters
▣ Form Validation
▣ $scope, $http, $routeProvides..

30. 3.
Architecture
What kind of
architecture
Angular use?

31. Template
Model
View
Compile
Change to View
updates the Model
Change to Model
updates the View
Two-way Binding

32. Two-way Binding
▣ Any changes in the scope are reflected in the
view, and any user interactions with the view
are reflected in the scope model.
▣ This makes the scope model the single source
of truth

33. MVC? MVVM?
Model-View-Controller?
Model-View-ViewModel?

34. VIEW
define the data and methods that
will be available for the view
MODELbusiness logic
Html Template
$scope (VM)
Two-way Data-
Binding
Commands
Commands Change Notifications
What architecture is it?

35. MVW
Model View Whatever - Whatever works for you

36. 4.
Getting Started

37. Getting started
▣ ng-app
<html ng-app=”myApp”>
<head>
<script src='angular.js'></script>
</head>
<body>
</body>
</html>

38. ng-app
▣ Use this directive to bootstrap an application
▣ Only one ng-app directive can be used per
HTML document
<html ng-app>

39. Markup {{ expression }}
▣ Double curly brace notation {{ }}
▣ Used to bind expressions to elements is built-
in Angular markup.
<div>1 + 2 = {{1+2}}</div>
Hello {{username}}

40. ng-model
▣ The ng-model directive binds an input,select,
textarea (or custom form control) to a
property on the scope
▣ Two-way binding

41. Data Binding
▣ ng-model
▣ ng-show
<html ng-app>
<head>
<script src='angular.js'></script>
</head>
<body>
<input ng-model='user.name'>
<div ng-show='user.name'>Hi {{user.name}}</div>
</body>
</html>

42. Modules (HTML side)
▣ All AngularJS JavaScript code is stored in
modules
▣ And a module is attached to a page
var app = angular.module('myApp', ['otherModule', 'anotherModule']);
<html ng-app="myApp"> ... </html>

43. Modules (Javascript)
▣ Modules are used to define services, controllers,
directives and filters
▣ Each module member is a constructor which can
inject other services
app.factory('myValues', function() {
return function() {
return [1,2,3,4,5,6];
};
});
app.filter('skipFirstValue', function() {
return function(data) {
return data.slice(1);
}
});
app.run(function($rootScope, myValues, skipFirstValueFilter) {
//this is called when the page is loaded
$rootScope.values = skipFirstValue(myValues());
});

44. $scope
▣ The scope is the glue between JavaScript and
HTML in AngularJS
▣ Anything placed on the $scope object can be
referenced in HTML
<div ng-controller="AppCtrl">
Hello, so far I have <strong>{{ totalApples }} </strong> apples.
<button ng-click="moreApples()">Give me more!</button>
</div>
app.controller('AppCtrl', function($scope) {
$scope.totalApples = 0;
$scope.moreApples = function() {
$scope.totalApples++;
}
});

45. $scope
Think of the scope as the memory for your HTML

46. Controllers
▣ Controllers are defined inside of a module like
all other services
app.controller('AppCtrl', function($scope) { ... });

47. Controllers
▣ And they can be referenced in HTML using
ng-controller (Or within routes..)
<html ng-app>
<head>
<script src='angular.js'></script>
<script src='controllers.js'></script>
</head>
<body ng-controller='UserController'>
<div>Hi {{user.name}}</div>
</body>
</html>
function UserController($scope) {
$scope.user = { name:'Larry' };
}
index.html
controllers.js

48. Ajax

49. AJAX using $http
▣ Use $http to perform an AJAX request
▣ The scope will automatically update itself
when $http returns gets a response
var app = angular.module('myApp', []);
app.controller('ColorsCtrl', function($scope, $http) {
$scope.colors = $http.get('/api/colors.json');
});

50. 5.
Directives
The Magic
Begins..

51. No more HTML mess
Today’s websites have giant series of <div> with
extensive and exhaustive CSS, causing little
semantic clarity.
With Angular you can create your own tags and
attributes using Directives.

52. Directives
▣ Special custom components in HTML
▣ The directives can be placed in element
names, attributes, class names, as well as
comments.
▣ Directives are a way to teach HTML new
tricks.
<div my-precious-element></div>

53. Directives
▣ Handled in JavaScript via DOM manipulation
▣ A directive is just a function which executes
when the compiler encounters it in the DOM.
app.directive('myPreciousElement', function() {
return function($scope, element, attrs) {
element.bind('click', function() {
alert('clicked!');
});
};
});

54. Possible usage of directives
<rating max='5' model='stars.average'>
<tabs>
<tab title='Active tab' view='...'>
<tab title='Inactive tab' view='...'>
</tabs>
<tooltip content='messages.tip1'>

55. Built-in Directives
▣ AngularJS provides series of predefined HTML
components
▣ These components reduce much of the
JavaScript required to make HTML appear
dynamic

56. Some of the Built-in Directive
Components
▣ ng-repeat
▣ ng-show
▣ ng-hide
▣ ng-disabled
▣ ng-href
▣ ng-click
▣ ng-dbclick
▣ ng-mouseup
▣ ng-mouseover
▣ ng-focus
▣ ng-blur
▣ ...

57. 6.
HTML Compiler

58. HTML Compiler
▣ Angular’s HTML compiler allows the
developer to teach the browser new HTML
syntax.
▣ The compiler allows you to attach behavior to
any HTML element or attribute and even
create new HTML elements or attributes with
custom behavior.
▣ Angular calls these behavior extensions
directives.

59. How the HTML Compiler works
▣ Compiler is an angular service which traverses
the DOM looking for attributes.
▣ The compilation process happens in two
phases:
□ Compile: traverse the DOM and collect all of the
directives. The result is a linking function.
□ Link: combine the directives with a scope and
produce a live view.

60. Exercise
http://www.learn-angular.org

61. Thanks!
Any questions?
You can find me at:
blog.avirancohen.com
facebook.com/MEvsWEB

62. Credits
▣ http://slides.com/gsklee/angularjs-a-brief-
introduction
▣ https://docs.google.com/presentation/d/1H
9u9xd0OE0W1o_5Aeug7uSR0AXXPidtWBQN
mpi_ZP9I