SlideShare a Scribd company logo
Š Copyright SELA Software & Education Labs, Ltd. | 14-18 Baruch Hirsch St., Bnei Brak, 51202 Israel | www.selagroup.com
SELA DEVELOPER PRACTICE
May 31st – June 4th, 2015
Ran Wahle
AngularJS – from 0 to 60
Agenda
Introduction
Modules and dependency injection
Data binding, controllers and scopes
Services
Filters
Directives
Form validation
Routing
The Modern Web
From web pages to web applications
More and more logic is pushed to the client
The Problem
As we add more and more JavaScript, our
application is getting:
Introduction to
AngularJS
What Is AngularJS?
An MV* framework for developing CRUD style web applications
Developed by Google
Works on all modern web browsers
Open source (MIT license)
No external dependencies
Demo
The Simplest Angular Application
Angular Building Blocks
Module
Module
Module
Scope Controller ServiceTemplate
Filter Directive
Two-Way
Binding
Dependency
Injection
Routing
<!doctype html>
<html data-ng-app>
<head>
</head>
<body>
<input type="text" data-ng-model="name" />
{{name}}
</body>
</html>
Your first AngularJS page
Module
Divide application into small pieces
Can contain controllers, services, directives, etc.
Can depend on other modules
Other modules can depend on it
//Creating a module
angular.module('yourModuleName', [ /*…dependencies…*/ ]);
//Accessing a module
angular.module('yourModuleName'); //Note: no dependencies array
Creating a module
Dependency Injection
Each angular application has an $injector service
Components are injected by the $injector
There are several options for using dependency
injection
One option removes the responsibility of locating the
dependency from the component. The dependency is simply
handed to the component.
In Angular each application has an injector that is responsible
for construction and lookup of dependencies
function SomeClass(greeter) {
this.greeter = greeter;
}
SomeClass.prototype.doSomething = function(name) {
this.greeter.greet(name);
}
Dependency Injection cont.
Creating a component
angular.module('yourModuleName').service('serviceName', function() {
//service’s code
});
Creating an Angular component
Consuming the component
angular.module('yourModuleName')
.controller('controllerName', ['serviceName', function(serviceName) {
//controller’s code
});
Š Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
Data binding
Controllers, scopes and views
AngularJS supports MV *- patterns
Views
HTML
templates
Controllers
JavaScript
functions
Data Model
$scope
HTML templates
An HTML element with Angular-related attributes
Declarative
Contains Angular-specific elements and attributes
Contains expressions evaluated against scope
properties
<html>
<head>
</head>
<body data-ng-app="myAppName">
<div data-ng-controller="myController">
<input data-ng-model="name" />
<button data-ng-click="greet()">Greet</button>
</div>
</body>
</html>
HTML template
Controller
A JavaScript constructor function
Contains view related logic
Can get and set data on the $scope
Shouldn’t have any DOM related functionality
Sets up the $scope initial state
Associated with a template via the ng-controller directive
angular.module('myAppName')
.controller('myController', ['$scope', function($scope) {
var greet = function() {
alert('Hello ' + $scope.name);
};
$scope.greet = greet;
}]);
Controller
$scope
The glue between the HTML template
and the controller
Hierarchical in the same way as HTML
Hierarchy implemented using
JavaScript prototypes
The root scope is represented by the
$rootScope service
Demo
Controllers, views and $scope
Services
Reusable singleton objects
Can be injected into controllers, filters,
directives and other services
Created only when needed
There are many built-in services in
AngularJS
angular.module('myApp')
.service('myService', [/*…dependencies…*/, function(/*…dependencies…*/) {
//service logic here
this.someMethod = function() {};
}]);
angular.module('myApp')
.controller('myController', ['myService', function(myService) {
myService.someMetho();
}]);
Creating and using a service
Built-in services
$rootScope
$timeout
$location
$interval
$log
$compile
$rootElement
$parse
$window
$cacheFactory $animate
Demo
Using a service
Ajax using $http
$http service is a built-in service in AngularJS
Used for communicating with the server
Wraps XMLHttpRequest
Automatically serializes/deserializes JSON
Supports request and response
transformation
Supports request and response interception
$http.get('url')
.success(function(response) {
//handle the server's response
})
.error(function(errorResponse) {
//handle the server's error response
});
$http.post('url', requestBody);
$http.put('url', requestBody);
$http.delete('url', requestBody);
Using $http
$http({
url: 'url',
method: 'get', //or 'put', 'post', 'delete'
params: {…}, //for get requests
data: {…}, //for put or post requests
}).success(…).error(…).finally(…);
Using $http (Cont)
The $resource Service
An abstraction on top of the $http service for interaction with
RESTful web services
Depends on the ngResource module and requires the inclusion
of the angular-resource.js script
Receives a parameterized URL, with optional default values
Returns an object with convenient methods (get, query, $save,
$delete, …)
Custom actions can be configured as well
Using the $resource service
angular.module('resourceDemo', ['ngResource'])
.controller('questionsCtrl', function($scope) {
var baseUrl = '/api/v1.0/questions/:id';
var Questions = $resource(baseUrl, {id: '@id'});
$scope.loadQuestions = function() {
$scope.questions = Questions.query();
};
$scope.removeQuestion = function(question) {
question.$remove();
};
});
Demo
Using built-in services
Filters
Formats the value of an expression for display to the user
{{ expression | filter }}
{{ 10 | currency }} will display 10$
May have arguments
{{ price | number:2 }}
Chainable
angular.module('myModule')
.filter('digitToText', function() {
var digitToText = [
'zero', 'one', 'two', 'three', 'four',
'five', 'six', 'seven', 'eight', 'nine'
];
return function(digit) {
return digitToText[digit];
};
});
Create a custom filter
Demo
Using filters
The form directive
Aggregates the state of all its input elements
Sets CSS classes according to the state
The default form action is automatically ignored
Available to the scope as a property with the name of the form
Contained input elements are also available by their names, as sub-
properties of the form property
The form directive
Creates a formController
The formController aggregates the state of all form controls
The formController is available to the current scope by its name
To submit the form using Ajax, respond to ng-submit or ng-click
Built-in validation directives
Angular provides the following validation directives:
required – Checks that the field has a value
min – Checks that the field value is greater than the given value
max – Checks that the field value is lower than the given value
minlength – Checks that the field value is longer than the given value
maxlength – Checks that the field value is shorter than the given value
pattern – Checks that the field value matches the given regular
expression
All of the above directives set a validation error identified by
their name when the condition is not met
The ngModel directive
Provides a two way data binding between the input
element and the model
Provides automatic validation for common HTML5
input types (checkbox, email, number, text, url)
Tracks the control’s state
Sets CSS classes according to the state
Note the usage of the novalidate attribute to disable
the browser’s built-in validation
<form name="form" novalidate>
<div>
<input type="text" name="title" ng-model="question.title" required />
</div>
<div>
<textarea name="content" ng-model="question.content" required>
</textarea>
</div>
<button ng-click="addQuestion(question)”>
Submit
</button>
</form>
Using the form and ngModel directives
Demo
Using forms
Directives
Custom HTML elements, attributes, classes and
comments that are recognized by Angular
Essentially extend the existing HTML vocabulary
Creating new elements
Adding behavior to existing elements
Most of the things we’ve seen so far are built-in
directives (ng-app, ng-controller, ng-repeat, ng-
model, required, …)
Creating custom directives
Directives are registered on modules, with the
module.directive function, which takes the
directive name and a factory function
The factory function should return a directive
definition object (discussed in the following
slides)
It’s a best practice to prefix custom directives to
prevent collision with other 3rd party directives,
or a future standard
The following code demonstrates the definition
of a new directive, named myDirective
Note that this is a only a skeleton with an
empty directive definition object. We’ll fill this
object with properties in the following slides.
myModule.directive('myDirective', function() {
return {
};
});
Creating a custom directive
Create a custom directive
The object retuned can have the
following properties:
• link: a function that is called during the linking phase
• template: an HTML template for the directive
• templateUrl: a rooted path to an HTML template file
• require: specifies a dependency on another directive
• transclude: determines whether child elements should
be included in the template
• controller: used to share behavior and communicate
with other directives
Demo
Custom directives
Routing in Single Page Applications
Unlike traditional web sites, in SPAs, the
responsibility for rendering the view is on the client
side
We do, however, want to give the user the same
features they are used to, such as:
The browser’s navigation buttons
The address bar for navigation
The ability to bookmark specific pages
How can we change the address bar without causing
the browser to issue a new request?
The $location service
An abstraction on top of the window.location
object
Synchronized with the browser address bar and
allows to watch or manipulate the URL
Seamless integration with the HTML5 History API.
Links are automatically rewritten to reflect the
supported mode.
<a href="/page1?id=123">link</a>
/index.html#/page1?id=123
/page1?id=123
The ui.router module
Angular comes with a built-in router named ngRoute
But most projects use the 3rd party AngularUI Router
The AngularUI Router is packaged in its own module,
named ui.router
To use the router, perform the following steps:
Install and reference the angular-ui-router.js script in the HTML
Add the ui.router module as a dependency to your module
Routes are registered in the module’s config
function, by calling the $stateProvider.state
method with a state name and a route object
A default route can be registered with the
$routeProvider.otherwise method
The contents of the route object are discussed in
the following slides
myModule.config(function($stateProvider) {
$stateProvider("page1", {url: '/page1', …})
.state("page2", {…})
.state("page3", {…})
});
Route registration
The 3rd party uiView directive marks the place in
which the new route’s template should be
rendered
Can be used as an element, or as an attribute on
any element
<body ng-app="myModule">
<div>
<ul>
<li><a ui-sref="page1">Page 1</a></li>
<li><a ui-sref="page2">Page 2</a></li>
</ul>
</div>
<div ui-view />
</body>
The uiView directive
Demo
Routing
Modules and dependency injection
Data binding, controllers and scopes
Services
Filters
Form validation
Directives
Routing
Email: ranw@sela.co.il
Summary
Questions

More Related Content

What's hot (20)

AngularJs presentation
AngularJs presentation AngularJs presentation
AngularJs presentation
Phan Tuan
 
Angular Presentation
Angular PresentationAngular Presentation
Angular Presentation
Adam Moore
 
Front end development with Angular JS
Front end development with Angular JSFront end development with Angular JS
Front end development with Angular JS
Bipin
 
Angular js 1.3 presentation for fed nov 2014
Angular js 1.3 presentation for fed   nov 2014Angular js 1.3 presentation for fed   nov 2014
Angular js 1.3 presentation for fed nov 2014
Sarah Hudson
 
Introduction to Angular JS
Introduction to Angular JSIntroduction to Angular JS
Introduction to Angular JS
Santhosh Kumar Srinivasan
 
AngularJs (1.x) Presentation
AngularJs (1.x) PresentationAngularJs (1.x) Presentation
AngularJs (1.x) Presentation
Raghubir Singh
 
Angular Js Basics
Angular Js BasicsAngular Js Basics
Angular Js Basics
أحمد عبد الوهاب
 
Introduction to Unit Tests and TDD
Introduction to Unit Tests and TDDIntroduction to Unit Tests and TDD
Introduction to Unit Tests and TDD
Betclic Everest Group Tech Team
 
Angular js for Beginnners
Angular js for BeginnnersAngular js for Beginnners
Angular js for Beginnners
Santosh Kumar Kar
 
Model View Presenter presentation
Model View Presenter presentationModel View Presenter presentation
Model View Presenter presentation
Michael Cameron
 
Angular2 and TypeScript
Angular2 and TypeScriptAngular2 and TypeScript
Angular2 and TypeScript
David Giard
 
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
Dynamic Application Development by NodeJS ,AngularJS with OrientDBDynamic Application Development by NodeJS ,AngularJS with OrientDB
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
Apaichon Punopas
 
Valentine with AngularJS
Valentine with AngularJSValentine with AngularJS
Valentine with AngularJS
Vidyasagar Machupalli
 
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
Will your code blend? : Toronto Code Camp 2010 : Barry GervinWill your code blend? : Toronto Code Camp 2010 : Barry Gervin
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
Barry Gervin
 
Break the monolith with (B)VIPER Modules
Break the monolith with (B)VIPER ModulesBreak the monolith with (B)VIPER Modules
Break the monolith with (B)VIPER Modules
Nicola Zaghini
 
angularJS Practicle Explanation
angularJS Practicle ExplanationangularJS Practicle Explanation
angularJS Practicle Explanation
Abhishek Sahu
 
Code Camp 06 Model View Presenter Architecture
Code Camp 06   Model View Presenter ArchitectureCode Camp 06   Model View Presenter Architecture
Code Camp 06 Model View Presenter Architecture
bitburner93
 
Angular2
Angular2Angular2
Angular2
kunalkumar376
 
VIPER Architecture
VIPER ArchitectureVIPER Architecture
VIPER Architecture
Ahmed Lotfy
 
Angular js presentation at Datacom
Angular js presentation at DatacomAngular js presentation at Datacom
Angular js presentation at Datacom
David Xi Peng Yang
 
AngularJs presentation
AngularJs presentation AngularJs presentation
AngularJs presentation
Phan Tuan
 
Angular Presentation
Angular PresentationAngular Presentation
Angular Presentation
Adam Moore
 
Front end development with Angular JS
Front end development with Angular JSFront end development with Angular JS
Front end development with Angular JS
Bipin
 
Angular js 1.3 presentation for fed nov 2014
Angular js 1.3 presentation for fed   nov 2014Angular js 1.3 presentation for fed   nov 2014
Angular js 1.3 presentation for fed nov 2014
Sarah Hudson
 
AngularJs (1.x) Presentation
AngularJs (1.x) PresentationAngularJs (1.x) Presentation
AngularJs (1.x) Presentation
Raghubir Singh
 
Angular js for Beginnners
Angular js for BeginnnersAngular js for Beginnners
Angular js for Beginnners
Santosh Kumar Kar
 
Model View Presenter presentation
Model View Presenter presentationModel View Presenter presentation
Model View Presenter presentation
Michael Cameron
 
Angular2 and TypeScript
Angular2 and TypeScriptAngular2 and TypeScript
Angular2 and TypeScript
David Giard
 
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
Dynamic Application Development by NodeJS ,AngularJS with OrientDBDynamic Application Development by NodeJS ,AngularJS with OrientDB
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
Apaichon Punopas
 
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
Will your code blend? : Toronto Code Camp 2010 : Barry GervinWill your code blend? : Toronto Code Camp 2010 : Barry Gervin
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
Barry Gervin
 
Break the monolith with (B)VIPER Modules
Break the monolith with (B)VIPER ModulesBreak the monolith with (B)VIPER Modules
Break the monolith with (B)VIPER Modules
Nicola Zaghini
 
angularJS Practicle Explanation
angularJS Practicle ExplanationangularJS Practicle Explanation
angularJS Practicle Explanation
Abhishek Sahu
 
Code Camp 06 Model View Presenter Architecture
Code Camp 06   Model View Presenter ArchitectureCode Camp 06   Model View Presenter Architecture
Code Camp 06 Model View Presenter Architecture
bitburner93
 
VIPER Architecture
VIPER ArchitectureVIPER Architecture
VIPER Architecture
Ahmed Lotfy
 
Angular js presentation at Datacom
Angular js presentation at DatacomAngular js presentation at Datacom
Angular js presentation at Datacom
David Xi Peng Yang
 

Similar to angularJs Workshop (20)

Introduction to AngularJs
Introduction to AngularJsIntroduction to AngularJs
Introduction to AngularJs
murtazahaveliwala
 
Angular.js Primer in Aalto University
Angular.js Primer in Aalto UniversityAngular.js Primer in Aalto University
Angular.js Primer in Aalto University
SC5.io
 
AngularJS Workshop
AngularJS WorkshopAngularJS Workshop
AngularJS Workshop
Gianluca Cacace
 
Intro to AngularJs
Intro to AngularJsIntro to AngularJs
Intro to AngularJs
SolTech, Inc.
 
Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
Suresh Patidar
 
AngularJS.part1
AngularJS.part1AngularJS.part1
AngularJS.part1
Andrey Kolodnitsky
 
Basics of AngularJS
Basics of AngularJSBasics of AngularJS
Basics of AngularJS
Filip Janevski
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
Ravi Mone
 
The AngularJS way
The AngularJS wayThe AngularJS way
The AngularJS way
Boyan Mihaylov
 
Angularjs
AngularjsAngularjs
Angularjs
Ynon Perek
 
Angular js 1.0-fundamentals
Angular js 1.0-fundamentalsAngular js 1.0-fundamentals
Angular js 1.0-fundamentals
Venkatesh Narayanan
 
ME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS Fundamentals
Aviran Cohen
 
AngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIAngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPI
Eric Wise
 
Angularjs basic part01
Angularjs basic part01Angularjs basic part01
Angularjs basic part01
Mohd Abdul Baquee
 
Angular js
Angular jsAngular js
Angular js
Hritesh Saha
 
Practical AngularJS
Practical AngularJSPractical AngularJS
Practical AngularJS
Wei Ru
 
AngularJS in practice
AngularJS in practiceAngularJS in practice
AngularJS in practice
Eugene Fidelin
 
AngularJS
AngularJSAngularJS
AngularJS
Srivatsan Krishnamachari
 
ANGULARJS introduction components services and directives
ANGULARJS   introduction components services and directivesANGULARJS   introduction components services and directives
ANGULARJS introduction components services and directives
SanthoshB77
 
Angular js
Angular jsAngular js
Angular js
Baldeep Sohal
 
Introduction to AngularJs
Introduction to AngularJsIntroduction to AngularJs
Introduction to AngularJs
murtazahaveliwala
 
Angular.js Primer in Aalto University
Angular.js Primer in Aalto UniversityAngular.js Primer in Aalto University
Angular.js Primer in Aalto University
SC5.io
 
AngularJS Workshop
AngularJS WorkshopAngularJS Workshop
AngularJS Workshop
Gianluca Cacace
 
Intro to AngularJs
Intro to AngularJsIntro to AngularJs
Intro to AngularJs
SolTech, Inc.
 
Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
Suresh Patidar
 
Basics of AngularJS
Basics of AngularJSBasics of AngularJS
Basics of AngularJS
Filip Janevski
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
Ravi Mone
 
The AngularJS way
The AngularJS wayThe AngularJS way
The AngularJS way
Boyan Mihaylov
 
Angularjs
AngularjsAngularjs
Angularjs
Ynon Perek
 
Angular js 1.0-fundamentals
Angular js 1.0-fundamentalsAngular js 1.0-fundamentals
Angular js 1.0-fundamentals
Venkatesh Narayanan
 
ME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS Fundamentals
Aviran Cohen
 
AngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIAngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPI
Eric Wise
 
Angularjs basic part01
Angularjs basic part01Angularjs basic part01
Angularjs basic part01
Mohd Abdul Baquee
 
Practical AngularJS
Practical AngularJSPractical AngularJS
Practical AngularJS
Wei Ru
 
AngularJS in practice
AngularJS in practiceAngularJS in practice
AngularJS in practice
Eugene Fidelin
 
ANGULARJS introduction components services and directives
ANGULARJS   introduction components services and directivesANGULARJS   introduction components services and directives
ANGULARJS introduction components services and directives
SanthoshB77
 
Ad

More from Ran Wahle (20)

Implementing promises with typescripts, step by step
Implementing promises with typescripts, step by stepImplementing promises with typescripts, step by step
Implementing promises with typescripts, step by step
Ran Wahle
 
HTML dialog element demonstration session
HTML dialog element demonstration sessionHTML dialog element demonstration session
HTML dialog element demonstration session
Ran Wahle
 
MicroFrontend With Iframes, dirty laundry that can be cleaned
MicroFrontend With Iframes, dirty laundry that can be cleanedMicroFrontend With Iframes, dirty laundry that can be cleaned
MicroFrontend With Iframes, dirty laundry that can be cleaned
Ran Wahle
 
Into React-DOM.pptx
Into React-DOM.pptxInto React-DOM.pptx
Into React-DOM.pptx
Ran Wahle
 
Lets go to the background
Lets go to the backgroundLets go to the background
Lets go to the background
Ran Wahle
 
Permissions api
Permissions apiPermissions api
Permissions api
Ran Wahle
 
Lets go vanilla
Lets go vanillaLets go vanilla
Lets go vanilla
Ran Wahle
 
Custom elements
Custom elements Custom elements
Custom elements
Ran Wahle
 
Web workers
Web workers Web workers
Web workers
Ran Wahle
 
Using legacy code with micro frontends
Using legacy code with micro frontendsUsing legacy code with micro frontends
Using legacy code with micro frontends
Ran Wahle
 
Ngrx one-effect
Ngrx one-effectNgrx one-effect
Ngrx one-effect
Ran Wahle
 
Angular migration
Angular migrationAngular migration
Angular migration
Ran Wahle
 
Javascript async / await Frontend-IL
Javascript async / await Frontend-ILJavascript async / await Frontend-IL
Javascript async / await Frontend-IL
Ran Wahle
 
Boost js state management
Boost js state managementBoost js state management
Boost js state management
Ran Wahle
 
Angular 2.0 change detection
Angular 2.0 change detectionAngular 2.0 change detection
Angular 2.0 change detection
Ran Wahle
 
Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0
Ran Wahle
 
Async patterns in javascript
Async patterns in javascriptAsync patterns in javascript
Async patterns in javascript
Ran Wahle
 
Angular js 2
Angular js 2Angular js 2
Angular js 2
Ran Wahle
 
Asyncawait in typescript
Asyncawait in typescriptAsyncawait in typescript
Asyncawait in typescript
Ran Wahle
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Angular%201%20to%20angular%202
Angular%201%20to%20angular%202
Ran Wahle
 
Implementing promises with typescripts, step by step
Implementing promises with typescripts, step by stepImplementing promises with typescripts, step by step
Implementing promises with typescripts, step by step
Ran Wahle
 
HTML dialog element demonstration session
HTML dialog element demonstration sessionHTML dialog element demonstration session
HTML dialog element demonstration session
Ran Wahle
 
MicroFrontend With Iframes, dirty laundry that can be cleaned
MicroFrontend With Iframes, dirty laundry that can be cleanedMicroFrontend With Iframes, dirty laundry that can be cleaned
MicroFrontend With Iframes, dirty laundry that can be cleaned
Ran Wahle
 
Into React-DOM.pptx
Into React-DOM.pptxInto React-DOM.pptx
Into React-DOM.pptx
Ran Wahle
 
Lets go to the background
Lets go to the backgroundLets go to the background
Lets go to the background
Ran Wahle
 
Permissions api
Permissions apiPermissions api
Permissions api
Ran Wahle
 
Lets go vanilla
Lets go vanillaLets go vanilla
Lets go vanilla
Ran Wahle
 
Custom elements
Custom elements Custom elements
Custom elements
Ran Wahle
 
Web workers
Web workers Web workers
Web workers
Ran Wahle
 
Using legacy code with micro frontends
Using legacy code with micro frontendsUsing legacy code with micro frontends
Using legacy code with micro frontends
Ran Wahle
 
Ngrx one-effect
Ngrx one-effectNgrx one-effect
Ngrx one-effect
Ran Wahle
 
Angular migration
Angular migrationAngular migration
Angular migration
Ran Wahle
 
Javascript async / await Frontend-IL
Javascript async / await Frontend-ILJavascript async / await Frontend-IL
Javascript async / await Frontend-IL
Ran Wahle
 
Boost js state management
Boost js state managementBoost js state management
Boost js state management
Ran Wahle
 
Angular 2.0 change detection
Angular 2.0 change detectionAngular 2.0 change detection
Angular 2.0 change detection
Ran Wahle
 
Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0
Ran Wahle
 
Async patterns in javascript
Async patterns in javascriptAsync patterns in javascript
Async patterns in javascript
Ran Wahle
 
Angular js 2
Angular js 2Angular js 2
Angular js 2
Ran Wahle
 
Asyncawait in typescript
Asyncawait in typescriptAsyncawait in typescript
Asyncawait in typescript
Ran Wahle
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Angular%201%20to%20angular%202
Angular%201%20to%20angular%202
Ran Wahle
 
Ad

Recently uploaded (20)

Key AI Technologies Used by Indian Artificial Intelligence Companies
Key AI Technologies Used by Indian Artificial Intelligence CompaniesKey AI Technologies Used by Indian Artificial Intelligence Companies
Key AI Technologies Used by Indian Artificial Intelligence Companies
Mypcot Infotech
 
How John started to like TDD (instead of hating it) (ViennaJUG, June'25)
How John started to like TDD (instead of hating it) (ViennaJUG, June'25)How John started to like TDD (instead of hating it) (ViennaJUG, June'25)
How John started to like TDD (instead of hating it) (ViennaJUG, June'25)
Nacho Cougil
 
COBOL Programming with VSCode - IBM Certificate
COBOL Programming with VSCode - IBM CertificateCOBOL Programming with VSCode - IBM Certificate
COBOL Programming with VSCode - IBM Certificate
VICTOR MAESTRE RAMIREZ
 
FME for Climate Data: Turning Big Data into Actionable Insights
FME for Climate Data: Turning Big Data into Actionable InsightsFME for Climate Data: Turning Big Data into Actionable Insights
FME for Climate Data: Turning Big Data into Actionable Insights
Safe Software
 
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
Neuralink TemplateeeeeeeeeeeeeeeeeeeeeeeeeeNeuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
alexandernoetzold
 
Agile Software Engineering Methodologies
Agile Software Engineering MethodologiesAgile Software Engineering Methodologies
Agile Software Engineering Methodologies
Gaurav Sharma
 
IMAGE CLASSIFICATION USING CONVOLUTIONAL NEURAL NETWORK.P.pptx
IMAGE CLASSIFICATION USING CONVOLUTIONAL NEURAL NETWORK.P.pptxIMAGE CLASSIFICATION USING CONVOLUTIONAL NEURAL NETWORK.P.pptx
IMAGE CLASSIFICATION USING CONVOLUTIONAL NEURAL NETWORK.P.pptx
usmanch7829
 
Topic 26 Security Testing Considerations.pptx
Topic 26 Security Testing Considerations.pptxTopic 26 Security Testing Considerations.pptx
Topic 26 Security Testing Considerations.pptx
marutnand8
 
zOS CommServer support for the Network Express feature on z17
zOS CommServer support for the Network Express feature on z17zOS CommServer support for the Network Express feature on z17
zOS CommServer support for the Network Express feature on z17
zOSCommserver
 
Revolutionize Your Insurance Workflow with Claims Management Software
Revolutionize Your Insurance Workflow with Claims Management SoftwareRevolutionize Your Insurance Workflow with Claims Management Software
Revolutionize Your Insurance Workflow with Claims Management Software
Insurance Tech Services
 
Build Smarter, Deliver Faster with Choreo - An AI Native Internal Developer P...
Build Smarter, Deliver Faster with Choreo - An AI Native Internal Developer P...Build Smarter, Deliver Faster with Choreo - An AI Native Internal Developer P...
Build Smarter, Deliver Faster with Choreo - An AI Native Internal Developer P...
WSO2
 
Scaling FME Flow on Demand with Kubernetes: A Case Study At Cadac Group SaaS ...
Scaling FME Flow on Demand with Kubernetes: A Case Study At Cadac Group SaaS ...Scaling FME Flow on Demand with Kubernetes: A Case Study At Cadac Group SaaS ...
Scaling FME Flow on Demand with Kubernetes: A Case Study At Cadac Group SaaS ...
Safe Software
 
14 Years of Developing nCine - An Open Source 2D Game Framework
14 Years of Developing nCine - An Open Source 2D Game Framework14 Years of Developing nCine - An Open Source 2D Game Framework
14 Years of Developing nCine - An Open Source 2D Game Framework
Angelo Theodorou
 
The rise of e-commerce has redefined how retailers operate—and reconciliation...
The rise of e-commerce has redefined how retailers operate—and reconciliation...The rise of e-commerce has redefined how retailers operate—and reconciliation...
The rise of e-commerce has redefined how retailers operate—and reconciliation...
Prachi Desai
 
Generative Artificial Intelligence and its Applications
Generative Artificial Intelligence and its ApplicationsGenerative Artificial Intelligence and its Applications
Generative Artificial Intelligence and its Applications
SandeepKS52
 
From Chaos to Clarity - Designing (AI-Ready) APIs with APIOps Cycles
From Chaos to Clarity - Designing (AI-Ready) APIs with APIOps CyclesFrom Chaos to Clarity - Designing (AI-Ready) APIs with APIOps Cycles
From Chaos to Clarity - Designing (AI-Ready) APIs with APIOps Cycles
Marjukka Niinioja
 
Marketo & Dynamics can be Most Excellent to Each Other – The Sequel
Marketo & Dynamics can be Most Excellent to Each Other – The SequelMarketo & Dynamics can be Most Excellent to Each Other – The Sequel
Marketo & Dynamics can be Most Excellent to Each Other – The Sequel
BradBedford3
 
How to Generate Financial Statements in QuickBooks Like a Pro (1).pdf
How to Generate Financial Statements in QuickBooks Like a Pro (1).pdfHow to Generate Financial Statements in QuickBooks Like a Pro (1).pdf
How to Generate Financial Statements in QuickBooks Like a Pro (1).pdf
QuickBooks Training
 
Essentials of Resource Planning in a Downturn
Essentials of Resource Planning in a DownturnEssentials of Resource Planning in a Downturn
Essentials of Resource Planning in a Downturn
OnePlan Solutions
 
Content Mate Web App Triples Content Managers‘ Productivity
Content Mate Web App Triples Content Managers‘ ProductivityContent Mate Web App Triples Content Managers‘ Productivity
Content Mate Web App Triples Content Managers‘ Productivity
Alex Vladimirovich
 
Key AI Technologies Used by Indian Artificial Intelligence Companies
Key AI Technologies Used by Indian Artificial Intelligence CompaniesKey AI Technologies Used by Indian Artificial Intelligence Companies
Key AI Technologies Used by Indian Artificial Intelligence Companies
Mypcot Infotech
 
How John started to like TDD (instead of hating it) (ViennaJUG, June'25)
How John started to like TDD (instead of hating it) (ViennaJUG, June'25)How John started to like TDD (instead of hating it) (ViennaJUG, June'25)
How John started to like TDD (instead of hating it) (ViennaJUG, June'25)
Nacho Cougil
 
COBOL Programming with VSCode - IBM Certificate
COBOL Programming with VSCode - IBM CertificateCOBOL Programming with VSCode - IBM Certificate
COBOL Programming with VSCode - IBM Certificate
VICTOR MAESTRE RAMIREZ
 
FME for Climate Data: Turning Big Data into Actionable Insights
FME for Climate Data: Turning Big Data into Actionable InsightsFME for Climate Data: Turning Big Data into Actionable Insights
FME for Climate Data: Turning Big Data into Actionable Insights
Safe Software
 
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
Neuralink TemplateeeeeeeeeeeeeeeeeeeeeeeeeeNeuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
alexandernoetzold
 
Agile Software Engineering Methodologies
Agile Software Engineering MethodologiesAgile Software Engineering Methodologies
Agile Software Engineering Methodologies
Gaurav Sharma
 
IMAGE CLASSIFICATION USING CONVOLUTIONAL NEURAL NETWORK.P.pptx
IMAGE CLASSIFICATION USING CONVOLUTIONAL NEURAL NETWORK.P.pptxIMAGE CLASSIFICATION USING CONVOLUTIONAL NEURAL NETWORK.P.pptx
IMAGE CLASSIFICATION USING CONVOLUTIONAL NEURAL NETWORK.P.pptx
usmanch7829
 
Topic 26 Security Testing Considerations.pptx
Topic 26 Security Testing Considerations.pptxTopic 26 Security Testing Considerations.pptx
Topic 26 Security Testing Considerations.pptx
marutnand8
 
zOS CommServer support for the Network Express feature on z17
zOS CommServer support for the Network Express feature on z17zOS CommServer support for the Network Express feature on z17
zOS CommServer support for the Network Express feature on z17
zOSCommserver
 
Revolutionize Your Insurance Workflow with Claims Management Software
Revolutionize Your Insurance Workflow with Claims Management SoftwareRevolutionize Your Insurance Workflow with Claims Management Software
Revolutionize Your Insurance Workflow with Claims Management Software
Insurance Tech Services
 
Build Smarter, Deliver Faster with Choreo - An AI Native Internal Developer P...
Build Smarter, Deliver Faster with Choreo - An AI Native Internal Developer P...Build Smarter, Deliver Faster with Choreo - An AI Native Internal Developer P...
Build Smarter, Deliver Faster with Choreo - An AI Native Internal Developer P...
WSO2
 
Scaling FME Flow on Demand with Kubernetes: A Case Study At Cadac Group SaaS ...
Scaling FME Flow on Demand with Kubernetes: A Case Study At Cadac Group SaaS ...Scaling FME Flow on Demand with Kubernetes: A Case Study At Cadac Group SaaS ...
Scaling FME Flow on Demand with Kubernetes: A Case Study At Cadac Group SaaS ...
Safe Software
 
14 Years of Developing nCine - An Open Source 2D Game Framework
14 Years of Developing nCine - An Open Source 2D Game Framework14 Years of Developing nCine - An Open Source 2D Game Framework
14 Years of Developing nCine - An Open Source 2D Game Framework
Angelo Theodorou
 
The rise of e-commerce has redefined how retailers operate—and reconciliation...
The rise of e-commerce has redefined how retailers operate—and reconciliation...The rise of e-commerce has redefined how retailers operate—and reconciliation...
The rise of e-commerce has redefined how retailers operate—and reconciliation...
Prachi Desai
 
Generative Artificial Intelligence and its Applications
Generative Artificial Intelligence and its ApplicationsGenerative Artificial Intelligence and its Applications
Generative Artificial Intelligence and its Applications
SandeepKS52
 
From Chaos to Clarity - Designing (AI-Ready) APIs with APIOps Cycles
From Chaos to Clarity - Designing (AI-Ready) APIs with APIOps CyclesFrom Chaos to Clarity - Designing (AI-Ready) APIs with APIOps Cycles
From Chaos to Clarity - Designing (AI-Ready) APIs with APIOps Cycles
Marjukka Niinioja
 
Marketo & Dynamics can be Most Excellent to Each Other – The Sequel
Marketo & Dynamics can be Most Excellent to Each Other – The SequelMarketo & Dynamics can be Most Excellent to Each Other – The Sequel
Marketo & Dynamics can be Most Excellent to Each Other – The Sequel
BradBedford3
 
How to Generate Financial Statements in QuickBooks Like a Pro (1).pdf
How to Generate Financial Statements in QuickBooks Like a Pro (1).pdfHow to Generate Financial Statements in QuickBooks Like a Pro (1).pdf
How to Generate Financial Statements in QuickBooks Like a Pro (1).pdf
QuickBooks Training
 
Essentials of Resource Planning in a Downturn
Essentials of Resource Planning in a DownturnEssentials of Resource Planning in a Downturn
Essentials of Resource Planning in a Downturn
OnePlan Solutions
 
Content Mate Web App Triples Content Managers‘ Productivity
Content Mate Web App Triples Content Managers‘ ProductivityContent Mate Web App Triples Content Managers‘ Productivity
Content Mate Web App Triples Content Managers‘ Productivity
Alex Vladimirovich
 

angularJs Workshop

  • 1. Š Copyright SELA Software & Education Labs, Ltd. | 14-18 Baruch Hirsch St., Bnei Brak, 51202 Israel | www.selagroup.com SELA DEVELOPER PRACTICE May 31st – June 4th, 2015 Ran Wahle AngularJS – from 0 to 60
  • 2. Agenda Introduction Modules and dependency injection Data binding, controllers and scopes Services Filters Directives Form validation Routing
  • 3. The Modern Web From web pages to web applications More and more logic is pushed to the client
  • 4. The Problem As we add more and more JavaScript, our application is getting:
  • 6. What Is AngularJS? An MV* framework for developing CRUD style web applications Developed by Google Works on all modern web browsers Open source (MIT license) No external dependencies
  • 8. Angular Building Blocks Module Module Module Scope Controller ServiceTemplate Filter Directive Two-Way Binding Dependency Injection Routing
  • 9. <!doctype html> <html data-ng-app> <head> </head> <body> <input type="text" data-ng-model="name" /> {{name}} </body> </html> Your first AngularJS page
  • 10. Module Divide application into small pieces Can contain controllers, services, directives, etc. Can depend on other modules Other modules can depend on it
  • 11. //Creating a module angular.module('yourModuleName', [ /*…dependencies…*/ ]); //Accessing a module angular.module('yourModuleName'); //Note: no dependencies array Creating a module
  • 12. Dependency Injection Each angular application has an $injector service Components are injected by the $injector There are several options for using dependency injection
  • 13. One option removes the responsibility of locating the dependency from the component. The dependency is simply handed to the component. In Angular each application has an injector that is responsible for construction and lookup of dependencies function SomeClass(greeter) { this.greeter = greeter; } SomeClass.prototype.doSomething = function(name) { this.greeter.greet(name); } Dependency Injection cont.
  • 14. Creating a component angular.module('yourModuleName').service('serviceName', function() { //service’s code }); Creating an Angular component Consuming the component angular.module('yourModuleName') .controller('controllerName', ['serviceName', function(serviceName) { //controller’s code });
  • 15. Š Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com Data binding Controllers, scopes and views
  • 16. AngularJS supports MV *- patterns Views HTML templates Controllers JavaScript functions Data Model $scope
  • 17. HTML templates An HTML element with Angular-related attributes Declarative Contains Angular-specific elements and attributes Contains expressions evaluated against scope properties
  • 18. <html> <head> </head> <body data-ng-app="myAppName"> <div data-ng-controller="myController"> <input data-ng-model="name" /> <button data-ng-click="greet()">Greet</button> </div> </body> </html> HTML template
  • 19. Controller A JavaScript constructor function Contains view related logic Can get and set data on the $scope Shouldn’t have any DOM related functionality Sets up the $scope initial state Associated with a template via the ng-controller directive
  • 20. angular.module('myAppName') .controller('myController', ['$scope', function($scope) { var greet = function() { alert('Hello ' + $scope.name); }; $scope.greet = greet; }]); Controller
  • 21. $scope The glue between the HTML template and the controller Hierarchical in the same way as HTML Hierarchy implemented using JavaScript prototypes The root scope is represented by the $rootScope service
  • 23. Services Reusable singleton objects Can be injected into controllers, filters, directives and other services Created only when needed There are many built-in services in AngularJS
  • 24. angular.module('myApp') .service('myService', [/*…dependencies…*/, function(/*…dependencies…*/) { //service logic here this.someMethod = function() {}; }]); angular.module('myApp') .controller('myController', ['myService', function(myService) { myService.someMetho(); }]); Creating and using a service
  • 27. Ajax using $http $http service is a built-in service in AngularJS Used for communicating with the server Wraps XMLHttpRequest Automatically serializes/deserializes JSON Supports request and response transformation Supports request and response interception
  • 28. $http.get('url') .success(function(response) { //handle the server's response }) .error(function(errorResponse) { //handle the server's error response }); $http.post('url', requestBody); $http.put('url', requestBody); $http.delete('url', requestBody); Using $http
  • 29. $http({ url: 'url', method: 'get', //or 'put', 'post', 'delete' params: {…}, //for get requests data: {…}, //for put or post requests }).success(…).error(…).finally(…); Using $http (Cont)
  • 30. The $resource Service An abstraction on top of the $http service for interaction with RESTful web services Depends on the ngResource module and requires the inclusion of the angular-resource.js script Receives a parameterized URL, with optional default values Returns an object with convenient methods (get, query, $save, $delete, …) Custom actions can be configured as well
  • 31. Using the $resource service angular.module('resourceDemo', ['ngResource']) .controller('questionsCtrl', function($scope) { var baseUrl = '/api/v1.0/questions/:id'; var Questions = $resource(baseUrl, {id: '@id'}); $scope.loadQuestions = function() { $scope.questions = Questions.query(); }; $scope.removeQuestion = function(question) { question.$remove(); }; });
  • 33. Filters Formats the value of an expression for display to the user {{ expression | filter }} {{ 10 | currency }} will display 10$ May have arguments {{ price | number:2 }} Chainable
  • 34. angular.module('myModule') .filter('digitToText', function() { var digitToText = [ 'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine' ]; return function(digit) { return digitToText[digit]; }; }); Create a custom filter
  • 36. The form directive Aggregates the state of all its input elements Sets CSS classes according to the state The default form action is automatically ignored Available to the scope as a property with the name of the form Contained input elements are also available by their names, as sub- properties of the form property
  • 37. The form directive Creates a formController The formController aggregates the state of all form controls The formController is available to the current scope by its name To submit the form using Ajax, respond to ng-submit or ng-click
  • 38. Built-in validation directives Angular provides the following validation directives: required – Checks that the field has a value min – Checks that the field value is greater than the given value max – Checks that the field value is lower than the given value minlength – Checks that the field value is longer than the given value maxlength – Checks that the field value is shorter than the given value pattern – Checks that the field value matches the given regular expression All of the above directives set a validation error identified by their name when the condition is not met
  • 39. The ngModel directive Provides a two way data binding between the input element and the model Provides automatic validation for common HTML5 input types (checkbox, email, number, text, url) Tracks the control’s state Sets CSS classes according to the state
  • 40. Note the usage of the novalidate attribute to disable the browser’s built-in validation <form name="form" novalidate> <div> <input type="text" name="title" ng-model="question.title" required /> </div> <div> <textarea name="content" ng-model="question.content" required> </textarea> </div> <button ng-click="addQuestion(question)”> Submit </button> </form> Using the form and ngModel directives
  • 42. Directives Custom HTML elements, attributes, classes and comments that are recognized by Angular Essentially extend the existing HTML vocabulary Creating new elements Adding behavior to existing elements Most of the things we’ve seen so far are built-in directives (ng-app, ng-controller, ng-repeat, ng- model, required, …)
  • 43. Creating custom directives Directives are registered on modules, with the module.directive function, which takes the directive name and a factory function The factory function should return a directive definition object (discussed in the following slides) It’s a best practice to prefix custom directives to prevent collision with other 3rd party directives, or a future standard
  • 44. The following code demonstrates the definition of a new directive, named myDirective Note that this is a only a skeleton with an empty directive definition object. We’ll fill this object with properties in the following slides. myModule.directive('myDirective', function() { return { }; }); Creating a custom directive
  • 45. Create a custom directive The object retuned can have the following properties: • link: a function that is called during the linking phase • template: an HTML template for the directive • templateUrl: a rooted path to an HTML template file • require: specifies a dependency on another directive • transclude: determines whether child elements should be included in the template • controller: used to share behavior and communicate with other directives
  • 47. Routing in Single Page Applications Unlike traditional web sites, in SPAs, the responsibility for rendering the view is on the client side We do, however, want to give the user the same features they are used to, such as: The browser’s navigation buttons The address bar for navigation The ability to bookmark specific pages How can we change the address bar without causing the browser to issue a new request?
  • 48. The $location service An abstraction on top of the window.location object Synchronized with the browser address bar and allows to watch or manipulate the URL Seamless integration with the HTML5 History API. Links are automatically rewritten to reflect the supported mode. <a href="/page1?id=123">link</a> /index.html#/page1?id=123 /page1?id=123
  • 49. The ui.router module Angular comes with a built-in router named ngRoute But most projects use the 3rd party AngularUI Router The AngularUI Router is packaged in its own module, named ui.router To use the router, perform the following steps: Install and reference the angular-ui-router.js script in the HTML Add the ui.router module as a dependency to your module
  • 50. Routes are registered in the module’s config function, by calling the $stateProvider.state method with a state name and a route object A default route can be registered with the $routeProvider.otherwise method The contents of the route object are discussed in the following slides myModule.config(function($stateProvider) { $stateProvider("page1", {url: '/page1', …}) .state("page2", {…}) .state("page3", {…}) }); Route registration
  • 51. The 3rd party uiView directive marks the place in which the new route’s template should be rendered Can be used as an element, or as an attribute on any element <body ng-app="myModule"> <div> <ul> <li><a ui-sref="page1">Page 1</a></li> <li><a ui-sref="page2">Page 2</a></li> </ul> </div> <div ui-view /> </body> The uiView directive
  • 53. Modules and dependency injection Data binding, controllers and scopes Services Filters Form validation Directives Routing Email: [email protected] Summary