Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AngularJS
Fundamentals
Aviran Cohen
Hello!
I am Aviran Cohen
Full-stack Developer
7 years experience in web development
blog.avirancohen.com
facebook.com/MEvs...
What we’ll cover
1.A brief history of web development
2.Introduction
3.Architecture
4.Getting Started
5.Directives
6.HTML ...
1.
A Brief History
Of Web
Development
Once upon a time
jQuery (2006)
jQuery
▣ Started as DOM manipulation tool
▣ Became an all-in-one javascript library
□ without much forethoughts
▣ Our best...
The Era of Web
Apps
jQuery + Webapp = Headaches
▣ Structureless spaghetti code
□ Total code mess
▣ Selectors creating tight coupling
□ Non-reu...
= TOTAL MESS
Backbone.js (2010)
backbone.js
▣ It brings structures to our code
▣ but still uses jQuery to handle the views
backbone.js
▣ Solved
□ No more spaghetti code
▣ NOT Solved
□ Selectors creating tight coupling
□ Not enough high level abs...
What about High Level Abstractions?
▣ Backbone is unopinionated.
▣ It lacks the necessary tools to easily manage
any webap...
And the earth was without form,
and void; and darkness wasupon
the face of the deep
‘’
And the earth was without
form, and void; and darkness
wasupon the face of the deep
And God said:
Let there be light..
‘’
And the earth was without
form, and void; and darkness
wasupon the face of the deep
And God said:
Let there be light..
...and there was light
AngularJS
Initial release in 2009
Faster development
Quality code (structure and robustness)
Developed by Google
Trends
How come jQuery is still way more popular
than angular?
It’s not one or another
▣ Angular does not replace jQuery!
▣ jQuery library is the undoubted king of a DOM
manipulation
Angular’s Role
▣ Angular offers a comprehensive framework to
develop front-end applications
▣ Actually Angular provides jq...
2.
Introduction
What
AngularJS is all
about
‘’
AngularJS is:
1.a powerful Front-end
JavaScript framework
1.Extends HTML to build
complex web applications
1.Organizes ...
How things worked before:
JS
HTML
Structure
Behavior
CSSPresentation
HTMLInterface
CSSPresentation
JSLogic
How things works the Angular’s way:
Why Angular
▣ Component based - Code reuse
▣ Extends HTML by adding directives, custom
tags, attributes, expressions, temp...
The major features of AngularJS
▣ Easy Data Binding: Two way Data Binding
▣ Reusable Components - Directives
▣ Dependency ...
3.
Architecture
What kind of
architecture
Angular use?
Template
Model
View
Compile
Change to View
updates the Model
Change to Model
updates the View
Two-way Binding
Two-way Binding
▣ Any changes in the scope are reflected in the
view, and any user interactions with the view
are reflecte...
MVC? MVVM?
Model-View-Controller?
Model-View-ViewModel?
VIEW
define the data and methods that
will be available for the view
MODELbusiness logic
Html Template
$scope (VM)
Two-way...
MVW
Model View Whatever - Whatever works for you
4.
Getting Started
Getting started
▣ ng-app
<html ng-app=”myApp”>
<head>
<script src='angular.js'></script>
</head>
<body>
</body>
</html>
ng-app
▣ Use this directive to bootstrap an application
▣ Only one ng-app directive can be used per
HTML document
<html ng...
Markup {{ expression }}
▣ Double curly brace notation {{ }}
▣ Used to bind expressions to elements is built-
in Angular ma...
ng-model
▣ The ng-model directive binds an input,select,
textarea (or custom form control) to a
property on the scope
▣ Tw...
Data Binding
▣ ng-model
▣ ng-show
<html ng-app>
<head>
<script src='angular.js'></script>
</head>
<body>
<input ng-model='...
Modules (HTML side)
▣ All AngularJS JavaScript code is stored in
modules
▣ And a module is attached to a page
var app = an...
Modules (Javascript)
▣ Modules are used to define services, controllers,
directives and filters
▣ Each module member is a ...
$scope
▣ The scope is the glue between JavaScript and
HTML in AngularJS
▣ Anything placed on the $scope object can be
refe...
$scope
Think of the scope as the memory for your HTML
Controllers
▣ Controllers are defined inside of a module like
all other services
app.controller('AppCtrl', function($scope...
Controllers
▣ And they can be referenced in HTML using
ng-controller (Or within routes..)
<html ng-app>
<head>
<script src...
Ajax
AJAX using $http
▣ Use $http to perform an AJAX request
▣ The scope will automatically update itself
when $http returns ge...
5.
Directives
The Magic
Begins..
No more HTML mess
Today’s websites have giant series of <div> with
extensive and exhaustive CSS, causing little
semantic c...
Directives
▣ Special custom components in HTML
▣ The directives can be placed in element
names, attributes, class names, a...
Directives
▣ Handled in JavaScript via DOM manipulation
▣ A directive is just a function which executes
when the compiler ...
Possible usage of directives
<rating max='5' model='stars.average'>
<tabs>
<tab title='Active tab' view='...'>
<tab title=...
Built-in Directives
▣ AngularJS provides series of predefined HTML
components
▣ These components reduce much of the
JavaSc...
Some of the Built-in Directive
Components
▣ ng-repeat
▣ ng-show
▣ ng-hide
▣ ng-disabled
▣ ng-href
▣ ng-click
▣ ng-dbclick
...
6.
HTML Compiler
HTML Compiler
▣ Angular’s HTML compiler allows the
developer to teach the browser new HTML
syntax.
▣ The compiler allows y...
How the HTML Compiler works
▣ Compiler is an angular service which traverses
the DOM looking for attributes.
▣ The compila...
Exercise
http://www.learn-angular.org
Thanks!
Any questions?
You can find me at:
blog.avirancohen.com
facebook.com/MEvsWEB
Credits
▣ http://slides.com/gsklee/angularjs-a-brief-
introduction
▣ https://docs.google.com/presentation/d/1H
9u9xd0OE0W1...
Upcoming SlideShare
Loading in …5
×

ME vs WEB - AngularJS Fundamentals

1,887 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

ME vs WEB - AngularJS Fundamentals

  1. 1. AngularJS Fundamentals Aviran Cohen
  2. 2. Hello! I am Aviran Cohen Full-stack Developer 7 years experience in web development blog.avirancohen.com facebook.com/MEvsWEB
  3. 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. 4. 1. A Brief History Of Web Development
  5. 5. Once upon a time
  6. 6. jQuery (2006)
  7. 7. jQuery ▣ Started as DOM manipulation tool ▣ Became an all-in-one javascript library □ without much forethoughts ▣ Our best friend back then, until..
  8. 8. The Era of Web Apps
  9. 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. 10. = TOTAL MESS
  11. 11. Backbone.js (2010)
  12. 12. backbone.js ▣ It brings structures to our code ▣ but still uses jQuery to handle the views
  13. 13. backbone.js ▣ Solved □ No more spaghetti code ▣ NOT Solved □ Selectors creating tight coupling □ Not enough high level abstractions
  14. 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. 15. And the earth was without form, and void; and darkness wasupon the face of the deep
  16. 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. 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. 18. ...and there was light
  19. 19. AngularJS Initial release in 2009 Faster development Quality code (structure and robustness) Developed by Google
  20. 20. Trends
  21. 21. How come jQuery is still way more popular than angular?
  22. 22. It’s not one or another ▣ Angular does not replace jQuery! ▣ jQuery library is the undoubted king of a DOM manipulation
  23. 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. 24. 2. Introduction What AngularJS is all about
  25. 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. 26. How things worked before: JS HTML Structure Behavior CSSPresentation
  27. 27. HTMLInterface CSSPresentation JSLogic How things works the Angular’s way:
  28. 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. 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. 30. 3. Architecture What kind of architecture Angular use?
  31. 31. Template Model View Compile Change to View updates the Model Change to Model updates the View Two-way Binding
  32. 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. 33. MVC? MVVM? Model-View-Controller? Model-View-ViewModel?
  34. 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. 35. MVW Model View Whatever - Whatever works for you
  36. 36. 4. Getting Started
  37. 37. Getting started ▣ ng-app <html ng-app=”myApp”> <head> <script src='angular.js'></script> </head> <body> </body> </html>
  38. 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. 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. 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. 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. 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. 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. 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. 45. $scope Think of the scope as the memory for your HTML
  46. 46. Controllers ▣ Controllers are defined inside of a module like all other services app.controller('AppCtrl', function($scope) { ... });
  47. 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. 48. Ajax
  49. 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. 50. 5. Directives The Magic Begins..
  51. 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. 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. 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. 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. 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. 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. 57. 6. HTML Compiler
  58. 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. 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. 60. Exercise http://www.learn-angular.org
  61. 61. Thanks! Any questions? You can find me at: blog.avirancohen.com facebook.com/MEvsWEB
  62. 62. Credits ▣ http://slides.com/gsklee/angularjs-a-brief- introduction ▣ https://docs.google.com/presentation/d/1H 9u9xd0OE0W1o_5Aeug7uSR0AXXPidtWBQN mpi_ZP9I

×