Download - ME vs WEB - AngularJS Fundamentals
![Page 1: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/1.jpg)
AngularJS Fundamentals
Aviran Cohen
![Page 2: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/2.jpg)
Hello!I am Aviran CohenFull-stack Developer7 years experience in web development
blog.avirancohen.comfacebook.com/MEvsWEB
![Page 3: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/3.jpg)
What we’ll cover
1.A brief history of web development2.Introduction3.Architecture4.Getting Started5.Directives6.HTML Compiler
![Page 4: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/4.jpg)
1.A Brief History Of Web
Development
![Page 5: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/5.jpg)
Once upon a time
![Page 6: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/6.jpg)
jQuery (2006)
![Page 7: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/7.jpg)
jQuery
▣Started as DOM manipulation tool▣Became an all-in-one javascript library
□without much forethoughts▣Our best friend back then, until..
![Page 8: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/8.jpg)
The Era of Web Apps
![Page 9: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/9.jpg)
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
![Page 10: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/10.jpg)
= TOTAL MESS
![Page 11: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/11.jpg)
Backbone.js (2010)
![Page 12: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/12.jpg)
backbone.js
▣It brings structures to our code▣but still uses jQuery to handle the views
![Page 13: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/13.jpg)
backbone.js
▣Solved□No more spaghetti code
▣NOT Solved□Selectors creating tight coupling□Not enough high level abstractions
![Page 14: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/14.jpg)
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
![Page 15: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/15.jpg)
And the earth was without form, and void; and darkness wasupon
the face of the deep
![Page 16: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/16.jpg)
‘’And the earth was without form, and void; and darkness wasupon the face of the deep
And God said: Let there be light..
![Page 17: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/17.jpg)
‘’And the earth was without form, and void; and darkness wasupon the face of the deep
And God said: Let there be light..
![Page 18: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/18.jpg)
...and there was light
![Page 19: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/19.jpg)
AngularJS
Initial release in 2009
Faster development
Quality code (structure and robustness)
Developed by Google
![Page 20: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/20.jpg)
Trends
![Page 21: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/21.jpg)
How come jQuery is still way more popular than angular?
![Page 22: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/22.jpg)
It’s not one or another
▣Angular does not replace jQuery!
▣jQuery library is the undoubted king of a DOM manipulation
![Page 23: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/23.jpg)
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
![Page 24: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/24.jpg)
2.Introduction What AngularJS
is all about
![Page 25: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/25.jpg)
‘’AngularJS is:1.a powerful Front-end JavaScript framework
2.Extends HTML to build complex web applications
3.Organizes JavaScript code into reusable components
![Page 26: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/26.jpg)
How things worked before:
JSHTMLStructure
Behavior
CSSPresentation
![Page 27: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/27.jpg)
HTMLInterface
CSSPresentation
JSLogic
How things works the Angular’s way:
![Page 28: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/28.jpg)
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
![Page 29: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/29.jpg)
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..
![Page 30: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/30.jpg)
3.Architecture
What kind of architecture Angular use?
![Page 31: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/31.jpg)
Template
Model
View
Compile
Change to View updates the Model
Change to Model updates the View
Two-way Binding
![Page 32: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/32.jpg)
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
![Page 33: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/33.jpg)
MVC? MVVM?Model-View-Controller?Model-View-ViewModel?
![Page 34: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/34.jpg)
VIEW
define the data and methods that will be available for the viewMODE
Lbusiness logic
Html Template$scope (VM)
Two-way Data-BindingCommands
Commands Change Notifications
What architecture is it?
![Page 35: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/35.jpg)
MVWModel View Whatever - Whatever works for you
![Page 36: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/36.jpg)
4.Getting Started
![Page 37: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/37.jpg)
Getting started
▣ng-app
<html ng-app=”myApp”><head> <script src='angular.js'></script></head><body></body></html>
![Page 38: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/38.jpg)
ng-app
▣Use this directive to bootstrap an application
▣Only one ng-app directive can be used per HTML document
<html ng-app>
![Page 39: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/39.jpg)
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}}
![Page 40: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/40.jpg)
ng-model
▣The ng-model directive binds an input,select, textarea (or custom form control) to a property on the scope
▣Two-way binding
![Page 41: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/41.jpg)
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>
![Page 42: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/42.jpg)
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>
![Page 43: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/43.jpg)
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());});
![Page 44: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/44.jpg)
$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++; }});
![Page 45: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/45.jpg)
$scope
Think of the scope as the memory for your HTML
![Page 46: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/46.jpg)
Controllers
▣Controllers are defined inside of a module like all other services
app.controller('AppCtrl', function($scope) { ... });
![Page 47: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/47.jpg)
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
![Page 48: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/48.jpg)
Ajax
![Page 49: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/49.jpg)
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');});
![Page 50: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/50.jpg)
5.Directives The Magic
Begins..
![Page 51: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/51.jpg)
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.
![Page 52: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/52.jpg)
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>
![Page 53: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/53.jpg)
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!'); }); }; });
![Page 54: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/54.jpg)
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'>
![Page 55: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/55.jpg)
Built-in Directives
▣AngularJS provides series of predefined HTML components
▣These components reduce much of the JavaScript required to make HTML appear dynamic
![Page 56: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/56.jpg)
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▣...
![Page 57: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/57.jpg)
6.HTML
Compiler
![Page 58: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/58.jpg)
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.
![Page 59: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/59.jpg)
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.
![Page 60: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/60.jpg)
Exercisehttp://www.learn-angular.org
![Page 61: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/61.jpg)
Thanks!Any questions?
You can find me at:
blog.avirancohen.comfacebook.com/MEvsWEB
![Page 62: ME vs WEB - AngularJS Fundamentals](https://reader034.vdocuments.net/reader034/viewer/2022042907/5884d5451a28ab767c8b6e6f/html5/thumbnails/62.jpg)
Credits
▣ http://slides.com/gsklee/angularjs-a-brief-introduction
▣https://docs.google.com/presentation/d/1H9u9xd0OE0W1o_5Aeug7uSR0AXXPidtWBQNmpi_ZP9I