SlideShare a Scribd company logo
1 of 27
Download to read offline
HTML enhanced for web apps!
Presented by - Murtaza Haveliwala
About Me
• Software/UI Developer @ Synerzip Softech
• 5+ years of development experience
o Java stack – Swing, Eclipse, J2EE, Tapestry etc.
o JavaScript stack – Jquery, YUI, XPCOM etc.
• Current interests – NodeJs, AngularJs & Polymer
• Contact:
o murtaza.sh@gmail.com
o LinkedIn: Murtaza Haveliwala
o facebook.com/murtaza.haveliwala
Agenda
• Why AngularJs?
• What is AngularJs?
• Getting started
o Anatomy of an Angular app
o MVC
o Data-binding
o Bindings, expressions, filters
o Directives
o Services
o Dependency Injections
• Demo
• Form Validation
• Custom Directives
• Best practices
• Q&A
Why AngularJs?
• Attempt to make static HTML  dynamic, easier and fun
• Flexible & extensible
• Well organized - highly modular
• Write less code
• Focus on testing – Jasmine, Karma, Protractor etc.
• Versatile - works well with other libraries
What is AngularJs?
• Framework
• Free & open source (MIT License)
• Current version – 1.2.16
• Vibrant & growing community – Good documentation, tons of articles & videos
available
o Project home page – angularjs.org
o Guide – docs.angularjs.org/guide
o API reference - docs.angularjs.org/api
• Browser support - IE8+*, Firefox , Chrome & Safari
• Whose using it? YouTube on PS3, Plunker, DoubleClick and many more
(builtwith.angularjs.org)
What is AngularJs?...
What is AngularJs?...
Other Modules
Services
angular-route.js
$resource$resource
Directives
ng-viewng-view
Services
angular-route.js
$resource$resource
Directives
ng-viewng-view
Third-party Modules
Services
$resource$resource
Directives
ng-viewng-view
Services
angular-ui.js
$resource$resource
Directives
ng-ving-grid
jqLiteAngular Core
Services Directives Filters
$injector $injector$scope$injector ng-modelng-repeat $inJectorcurrencydate
Getting Started..
Anatomy of an Angular App
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<script src="js/libs/angular.js"></script>
</head>
<body ng-app>
<div>
<input type="text" ng-model="myString" />
{{ myString }}
</div>
</body>
</html>
Basic
Anatomy of an Angular App
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<script src="js/libs/angular.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app>
<div ng-controller=“MyController”>
<input type="text" ng-model="myString" />
{{ myString }}
</div>
</body>
</html>
Better
// app.js
function MyController($scope) {
$scope.myString = „hello world!‟;
}
Anatomy of an Angular App
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<script src="js/libs/angular.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app=“myApp”>
<div ng-controller=“MyController”>
<input type="text" ng-model="myString" />
{{ myString }}
</div>
</body>
</html>
Even better
// app.js
var myApp = angular.module('myApp', []);
myApp.controller(„MyController‟, [„$scope‟, function($scope) {
$scope.myString = „hello world!‟;
}]);
MVC
Model View ControllerTheory:
Plain Object HTML Plain FunctionAngular World:
$scope <... ng-controller=“MyCtrl”> function MyCtrl ($scope)Syntax:
Think of:
Data-binding
• View is an instant projection of the model
• Eliminates need of event binding and handling
• Achieved through
o ng-model directive,
o $scope object
o {{ }} bindings,
o $watch method
o etc..
automatic
Bindings, Expressions
• Binding – {{ <expression> | filter | orderBy }}
o To be used in Views/HTML.
• Expressions –
o JavaScript *like* code-snippets – {{ 1 + 2 }}, {{ ‘hello World!’ }}
o Evaluated against a ‘$scope’ object – {{ a + b }}, {{ user.name }}, {{ items[index] }}, {{
doSomething() }}
o *Cannot* use conditionals, loops & exceptions
• Filters – Data formatters
o lowercase, currency, date & any custom-filters
• orderBy – Sorts filtered result-set
Directives
Used to teach HTML new tricks
ng-app
ng-repeat ng-class
ng-disabled ng-show ng-click
ng-model
ng-checked
ng-controller
ng-dblclick
ng-href
ng-submit
ng-transclude ng-change
Many more!
ng-if
ng-init
ng-form
Directives
• Used to
o Create new tags or attributes – tabs, accordions, ng-repeat, ng-app, ng-disabled etc.
o Extend other HTML attributes with more capabilities – required, type, input etc.
o Abstract repetitive markups via ng-include, ng-transclude and ng-view
• Can be expressed as a
o Tag – <my-directive></my-directive>
o Attribute – ng-app, ng-controller, ng-model, ng-disabled
o Class – one of the className in an element’s ‘class’ attribute
o (HTML) Comment – <!-- my-directive -->
• No magic, implemented purely using JS and HTML 
Mini
Demo
Basic Anatomy
Data-binding, Directives & Filters
Services
• Reusable business logic, independent of views
• Can be used by controllers and other services/components
• Defined like this –
• Many flavors – factories , services & providers
o Mainly differ in their creational pattern
angular.module('myModule', []).
factory('greeter', function(someDependency) {
// do some initialization here, any internal methods,
// if required
return {
myMethod: function(text) {
return text.toUpperCase();
}
};
});
Dependency Injections (DI)
• Creates and wires objects/functions
• Freedom from creating and managing services, internal
dependencies
o No need of doing ‘new’ for components
o No more inter-dependency management
• Handled by ‘Injector’ sub-system
• All services, modules registered via Ids – $scope, $http, greeter
etc.
o Modules assist in registering their own components
o Crucial in writing unit and end-to-end tests
• Angular sub-system != requireJS/ AMD.js
Demo
Simple TODO App
Single Page App - TODO App
Ajax Serviced TODO App
Form Validation
• Make use of these validation directives -
o required, type, ng-minlength, ng-maxlength, ng-pattern
o Your own custom directive
• Start by - adding ‘name’ attribute to ‘form’ and ‘form elements’
• Angular attaches these properties to form and form elements
• Accessed as
o Form: <form name>.<property>
o Individual form element: <form name>.<element name>.<property>
• Applies these styling classes –
o .ng-valid, .ng-invalid, .ng-pristine, .ng-dirty
o .ng-invalid-required, .ng-valid-max-length, etc.
• Use ‘novalidate’ attribute to stop HTML5 auto validation
Custom Directives
angular.module('myModule', []).
directive('myDirective', function() {
return {
restrict: 'A', // < E | A | C | M >
template: '<div>...some more markup...</div>',
templateUrl: 'my-directive-template.html',
replace: false,
transclude: true, // < false | true >
scope: { // < true | false | {} >
'localFoo': '@foo' // < @ | @attribute>
'localBar': '=info' // < = | =attribute | =? attribute>
'myProp': '&expression' // < & | &attribute >
},
controller: function($scope, myDepedencies, ...) {...},
require: 'myOtherDirective' // prefix - < (no prefix) | ? | ^ | ?^ >
link: function postLink(scope, iElement, iAttrs, otherController, ... ) { ... }
};
});
<my-directive attribute=“some attribute” ..>
<span>text</span>
<div ng-transclude />
</my-directive>
Best Practices
• In HTML templates/views,
o Use Directives for abstracting common markups, extensions
o Do not use complex expressions in bindings. Move them to Controllers
o Optimize use of bindings. Lesser, the faster your application gets
• In Controllers,
o Keep them light. Use Services to offload functionality
o No DOM manipulations! Delegate them to directives
• In Directives,
o Prefer using directives as tag names or attributes over classes and comments
o Do not use ‘ng-’ prefix for your directives
o Create isolate scopes to avoid accidental overrides of properties
o Notify Angular about direct changes on DOM, via $scope.$apply
• Create modules to group controllers, services, directives etc.
• Test (unit & E2E) each component – Services, Controllers, Directives etc.
Best Practices..
• Use $inject pattern for defining components.
o Avoids breakages when minifying
• Do not create $ and $$ prefixed APIs
o Could lead to collisions
• Prefer ‘data-’ prefix when using directives
Questions?
References
• Articles
o AngularJS official guide
o Use AngularJS to power your application
o Why does AngularJS rock?
o Rapid prototyping with AngularJs
o AngularJs Form Validation
• Videos
o Official YouTube channel
o AngularJs Fundamentals in 60-ish minutes
o Writing Directives
o Introduction to AngularJs Unit Testing
o End to End testing of AngularJs apps with Protractor
Thank you!

More Related Content

What's hot

AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS BasicsRavi Mone
 
AngularJS intro
AngularJS introAngularJS intro
AngularJS introdizabl
 
AngularJS custom directive
AngularJS custom directiveAngularJS custom directive
AngularJS custom directiveNascenia IT
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project Elad Hirsch
 
Custom AngularJS Directives
Custom AngularJS DirectivesCustom AngularJS Directives
Custom AngularJS Directivesyprodev
 
Angular JS tutorial
Angular JS tutorialAngular JS tutorial
Angular JS tutorialcncwebworld
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - IntroductionSagar Acharya
 
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 OrientDBApaichon Punopas
 
Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework Sakthi Bro
 
Getting Started with Angular JS
Getting Started with Angular JSGetting Started with Angular JS
Getting Started with Angular JSAkshay Mathur
 
Introduction to single page application with angular js
Introduction to single page application with angular jsIntroduction to single page application with angular js
Introduction to single page application with angular jsMindfire Solutions
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular jsAayush Shrestha
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners WorkshopSathish VJ
 

What's hot (20)

AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
AngularJS intro
AngularJS introAngularJS intro
AngularJS intro
 
AngularJS custom directive
AngularJS custom directiveAngularJS custom directive
AngularJS custom directive
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
 
Custom AngularJS Directives
Custom AngularJS DirectivesCustom AngularJS Directives
Custom AngularJS Directives
 
Angular JS tutorial
Angular JS tutorialAngular JS tutorial
Angular JS tutorial
 
Angular Directives
Angular DirectivesAngular Directives
Angular Directives
 
Angular js 1.3 basic tutorial
Angular js 1.3 basic tutorialAngular js 1.3 basic tutorial
Angular js 1.3 basic tutorial
 
Angular js
Angular jsAngular js
Angular js
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - Introduction
 
AngularJS Best Practices
AngularJS Best PracticesAngularJS Best Practices
AngularJS Best Practices
 
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
 
Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework
 
Angular js 1.0-fundamentals
Angular js 1.0-fundamentalsAngular js 1.0-fundamentals
Angular js 1.0-fundamentals
 
Getting Started with Angular JS
Getting Started with Angular JSGetting Started with Angular JS
Getting Started with Angular JS
 
Angular js
Angular jsAngular js
Angular js
 
Introduction to single page application with angular js
Introduction to single page application with angular jsIntroduction to single page application with angular js
Introduction to single page application with angular js
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular js
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners Workshop
 
Angular js
Angular jsAngular js
Angular js
 

Viewers also liked

Building Modern Web Apps with AngularJS
Building Modern Web Apps with AngularJSBuilding Modern Web Apps with AngularJS
Building Modern Web Apps with AngularJSRaveen Perera
 
Angular 1.5 Components
Angular 1.5 ComponentsAngular 1.5 Components
Angular 1.5 ComponentsJosé Barbosa
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSM R Rony
 
Componentes en angularjs 1.5
Componentes en angularjs 1.5Componentes en angularjs 1.5
Componentes en angularjs 1.5Hugo Biarge
 
FrontEnd platform based on AngularJS
FrontEnd platform based on AngularJSFrontEnd platform based on AngularJS
FrontEnd platform based on AngularJSEgor Miasnikov
 
Angularjs 131211063348-phpapp01
Angularjs 131211063348-phpapp01Angularjs 131211063348-phpapp01
Angularjs 131211063348-phpapp01Arunangsu Sahu
 
AngularJS vs jQuery
AngularJS vs jQueryAngularJS vs jQuery
AngularJS vs jQueryPayPal
 
Angular js presentation at Datacom
Angular js presentation at DatacomAngular js presentation at Datacom
Angular js presentation at DatacomDavid Xi Peng Yang
 
Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Maxime Bernard
 
Scope demystified - AngularJS
Scope demystified - AngularJSScope demystified - AngularJS
Scope demystified - AngularJSSumanth krishna
 
Creating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web ComponentsCreating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web ComponentsRachael L Moore
 
AngularJS : Superheroic JavaScript MVW Framework
AngularJS : Superheroic JavaScript MVW FrameworkAngularJS : Superheroic JavaScript MVW Framework
AngularJS : Superheroic JavaScript MVW FrameworkEdureka!
 
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)Gary Arora
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS ArchitectureEyal Vardi
 

Viewers also liked (19)

Building Modern Web Apps with AngularJS
Building Modern Web Apps with AngularJSBuilding Modern Web Apps with AngularJS
Building Modern Web Apps with AngularJS
 
Angular 1.5 Components
Angular 1.5 ComponentsAngular 1.5 Components
Angular 1.5 Components
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
 
Componentes en angularjs 1.5
Componentes en angularjs 1.5Componentes en angularjs 1.5
Componentes en angularjs 1.5
 
FrontEnd platform based on AngularJS
FrontEnd platform based on AngularJSFrontEnd platform based on AngularJS
FrontEnd platform based on AngularJS
 
Dependency injection
Dependency injectionDependency injection
Dependency injection
 
Intro to AngularJS
Intro to AngularJS Intro to AngularJS
Intro to AngularJS
 
Angularjs 131211063348-phpapp01
Angularjs 131211063348-phpapp01Angularjs 131211063348-phpapp01
Angularjs 131211063348-phpapp01
 
AngularJS vs jQuery
AngularJS vs jQueryAngularJS vs jQuery
AngularJS vs jQuery
 
Dive into AngularJS and directives
Dive into AngularJS and directivesDive into AngularJS and directives
Dive into AngularJS and directives
 
AngularJs
AngularJsAngularJs
AngularJs
 
Angular js presentation at Datacom
Angular js presentation at DatacomAngular js presentation at Datacom
Angular js presentation at Datacom
 
Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?
 
Scope demystified - AngularJS
Scope demystified - AngularJSScope demystified - AngularJS
Scope demystified - AngularJS
 
Creating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web ComponentsCreating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web Components
 
AngularJS : Superheroic JavaScript MVW Framework
AngularJS : Superheroic JavaScript MVW FrameworkAngularJS : Superheroic JavaScript MVW Framework
AngularJS : Superheroic JavaScript MVW Framework
 
AngularJS
AngularJSAngularJS
AngularJS
 
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 

Similar to Introduction to AngularJs

Angularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupAngularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupGoutam Dey
 
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 conceptsSuresh Patidar
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala
 
End to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJSEnd to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJSGil Fink
 
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...Angular training - Day 3 - custom directives, $http, $resource, setup with ye...
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...murtazahaveliwala
 
AngularJS One Day Workshop
AngularJS One Day WorkshopAngularJS One Day Workshop
AngularJS One Day WorkshopShyam Seshadri
 
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.comWhen to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.comPerfomatix Solutions
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to conceptsAbhishek Sur
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development GuideNitin Giri
 
Exploring AngularJS - Liju Pillai
Exploring AngularJS - Liju PillaiExploring AngularJS - Liju Pillai
Exploring AngularJS - Liju PillaiLiju Pillai
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSTom Borger
 
Angular patterns
Angular patternsAngular patterns
Angular patternsPremkumar M
 
Angular presentation
Angular presentationAngular presentation
Angular presentationMatus Szabo
 

Similar to Introduction to AngularJs (20)

Angularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupAngularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetup
 
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
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
 
End to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJSEnd to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJS
 
Mini-Training: AngularJS
Mini-Training: AngularJSMini-Training: AngularJS
Mini-Training: AngularJS
 
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...Angular training - Day 3 - custom directives, $http, $resource, setup with ye...
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...
 
AngularJS
AngularJSAngularJS
AngularJS
 
AngularJS One Day Workshop
AngularJS One Day WorkshopAngularJS One Day Workshop
AngularJS One Day Workshop
 
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.comWhen to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
 
Angular js for Beginnners
Angular js for BeginnnersAngular js for Beginnners
Angular js for Beginnners
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
Angular js
Angular jsAngular js
Angular js
 
Angular js
Angular jsAngular js
Angular js
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development Guide
 
Exploring AngularJS - Liju Pillai
Exploring AngularJS - Liju PillaiExploring AngularJS - Liju Pillai
Exploring AngularJS - Liju Pillai
 
Introduction to Angular Js
Introduction to Angular JsIntroduction to Angular Js
Introduction to Angular Js
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMS
 
Angular patterns
Angular patternsAngular patterns
Angular patterns
 
AngularJS Workshop
AngularJS WorkshopAngularJS Workshop
AngularJS Workshop
 
Angular presentation
Angular presentationAngular presentation
Angular presentation
 

Recently uploaded

Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Projectwajrcs
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Jaydeep Chhasatia
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?AmeliaSmith90
 
20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기Chiwon Song
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsJaydeep Chhasatia
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntelliSource Technologies
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9Jürgen Gutsch
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Neo4j
 
Kubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxKubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxPrakarsh -
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 

Recently uploaded (20)

Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?
 
20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptx
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
Sustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire ThornewillSustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire Thornewill
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!
 
Kubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxKubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptx
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
Program with GUTs
Program with GUTsProgram with GUTs
Program with GUTs
 

Introduction to AngularJs

  • 1. HTML enhanced for web apps! Presented by - Murtaza Haveliwala
  • 2. About Me • Software/UI Developer @ Synerzip Softech • 5+ years of development experience o Java stack – Swing, Eclipse, J2EE, Tapestry etc. o JavaScript stack – Jquery, YUI, XPCOM etc. • Current interests – NodeJs, AngularJs & Polymer • Contact: o murtaza.sh@gmail.com o LinkedIn: Murtaza Haveliwala o facebook.com/murtaza.haveliwala
  • 3. Agenda • Why AngularJs? • What is AngularJs? • Getting started o Anatomy of an Angular app o MVC o Data-binding o Bindings, expressions, filters o Directives o Services o Dependency Injections • Demo • Form Validation • Custom Directives • Best practices • Q&A
  • 4. Why AngularJs? • Attempt to make static HTML  dynamic, easier and fun • Flexible & extensible • Well organized - highly modular • Write less code • Focus on testing – Jasmine, Karma, Protractor etc. • Versatile - works well with other libraries
  • 5. What is AngularJs? • Framework • Free & open source (MIT License) • Current version – 1.2.16 • Vibrant & growing community – Good documentation, tons of articles & videos available o Project home page – angularjs.org o Guide – docs.angularjs.org/guide o API reference - docs.angularjs.org/api • Browser support - IE8+*, Firefox , Chrome & Safari • Whose using it? YouTube on PS3, Plunker, DoubleClick and many more (builtwith.angularjs.org)
  • 7. What is AngularJs?... Other Modules Services angular-route.js $resource$resource Directives ng-viewng-view Services angular-route.js $resource$resource Directives ng-viewng-view Third-party Modules Services $resource$resource Directives ng-viewng-view Services angular-ui.js $resource$resource Directives ng-ving-grid jqLiteAngular Core Services Directives Filters $injector $injector$scope$injector ng-modelng-repeat $inJectorcurrencydate
  • 9. Anatomy of an Angular App <!DOCTYPE html> <html> <head> <title>My App</title> <script src="js/libs/angular.js"></script> </head> <body ng-app> <div> <input type="text" ng-model="myString" /> {{ myString }} </div> </body> </html> Basic
  • 10. Anatomy of an Angular App <!DOCTYPE html> <html> <head> <title>My App</title> <script src="js/libs/angular.js"></script> <script src="js/app.js"></script> </head> <body ng-app> <div ng-controller=“MyController”> <input type="text" ng-model="myString" /> {{ myString }} </div> </body> </html> Better // app.js function MyController($scope) { $scope.myString = „hello world!‟; }
  • 11. Anatomy of an Angular App <!DOCTYPE html> <html> <head> <title>My App</title> <script src="js/libs/angular.js"></script> <script src="js/app.js"></script> </head> <body ng-app=“myApp”> <div ng-controller=“MyController”> <input type="text" ng-model="myString" /> {{ myString }} </div> </body> </html> Even better // app.js var myApp = angular.module('myApp', []); myApp.controller(„MyController‟, [„$scope‟, function($scope) { $scope.myString = „hello world!‟; }]);
  • 12. MVC Model View ControllerTheory: Plain Object HTML Plain FunctionAngular World: $scope <... ng-controller=“MyCtrl”> function MyCtrl ($scope)Syntax: Think of:
  • 13. Data-binding • View is an instant projection of the model • Eliminates need of event binding and handling • Achieved through o ng-model directive, o $scope object o {{ }} bindings, o $watch method o etc.. automatic
  • 14. Bindings, Expressions • Binding – {{ <expression> | filter | orderBy }} o To be used in Views/HTML. • Expressions – o JavaScript *like* code-snippets – {{ 1 + 2 }}, {{ ‘hello World!’ }} o Evaluated against a ‘$scope’ object – {{ a + b }}, {{ user.name }}, {{ items[index] }}, {{ doSomething() }} o *Cannot* use conditionals, loops & exceptions • Filters – Data formatters o lowercase, currency, date & any custom-filters • orderBy – Sorts filtered result-set
  • 15. Directives Used to teach HTML new tricks ng-app ng-repeat ng-class ng-disabled ng-show ng-click ng-model ng-checked ng-controller ng-dblclick ng-href ng-submit ng-transclude ng-change Many more! ng-if ng-init ng-form
  • 16. Directives • Used to o Create new tags or attributes – tabs, accordions, ng-repeat, ng-app, ng-disabled etc. o Extend other HTML attributes with more capabilities – required, type, input etc. o Abstract repetitive markups via ng-include, ng-transclude and ng-view • Can be expressed as a o Tag – <my-directive></my-directive> o Attribute – ng-app, ng-controller, ng-model, ng-disabled o Class – one of the className in an element’s ‘class’ attribute o (HTML) Comment – <!-- my-directive --> • No magic, implemented purely using JS and HTML 
  • 18. Services • Reusable business logic, independent of views • Can be used by controllers and other services/components • Defined like this – • Many flavors – factories , services & providers o Mainly differ in their creational pattern angular.module('myModule', []). factory('greeter', function(someDependency) { // do some initialization here, any internal methods, // if required return { myMethod: function(text) { return text.toUpperCase(); } }; });
  • 19. Dependency Injections (DI) • Creates and wires objects/functions • Freedom from creating and managing services, internal dependencies o No need of doing ‘new’ for components o No more inter-dependency management • Handled by ‘Injector’ sub-system • All services, modules registered via Ids – $scope, $http, greeter etc. o Modules assist in registering their own components o Crucial in writing unit and end-to-end tests • Angular sub-system != requireJS/ AMD.js
  • 20. Demo Simple TODO App Single Page App - TODO App Ajax Serviced TODO App
  • 21. Form Validation • Make use of these validation directives - o required, type, ng-minlength, ng-maxlength, ng-pattern o Your own custom directive • Start by - adding ‘name’ attribute to ‘form’ and ‘form elements’ • Angular attaches these properties to form and form elements • Accessed as o Form: <form name>.<property> o Individual form element: <form name>.<element name>.<property> • Applies these styling classes – o .ng-valid, .ng-invalid, .ng-pristine, .ng-dirty o .ng-invalid-required, .ng-valid-max-length, etc. • Use ‘novalidate’ attribute to stop HTML5 auto validation
  • 22. Custom Directives angular.module('myModule', []). directive('myDirective', function() { return { restrict: 'A', // < E | A | C | M > template: '<div>...some more markup...</div>', templateUrl: 'my-directive-template.html', replace: false, transclude: true, // < false | true > scope: { // < true | false | {} > 'localFoo': '@foo' // < @ | @attribute> 'localBar': '=info' // < = | =attribute | =? attribute> 'myProp': '&expression' // < & | &attribute > }, controller: function($scope, myDepedencies, ...) {...}, require: 'myOtherDirective' // prefix - < (no prefix) | ? | ^ | ?^ > link: function postLink(scope, iElement, iAttrs, otherController, ... ) { ... } }; }); <my-directive attribute=“some attribute” ..> <span>text</span> <div ng-transclude /> </my-directive>
  • 23. Best Practices • In HTML templates/views, o Use Directives for abstracting common markups, extensions o Do not use complex expressions in bindings. Move them to Controllers o Optimize use of bindings. Lesser, the faster your application gets • In Controllers, o Keep them light. Use Services to offload functionality o No DOM manipulations! Delegate them to directives • In Directives, o Prefer using directives as tag names or attributes over classes and comments o Do not use ‘ng-’ prefix for your directives o Create isolate scopes to avoid accidental overrides of properties o Notify Angular about direct changes on DOM, via $scope.$apply • Create modules to group controllers, services, directives etc. • Test (unit & E2E) each component – Services, Controllers, Directives etc.
  • 24. Best Practices.. • Use $inject pattern for defining components. o Avoids breakages when minifying • Do not create $ and $$ prefixed APIs o Could lead to collisions • Prefer ‘data-’ prefix when using directives
  • 26. References • Articles o AngularJS official guide o Use AngularJS to power your application o Why does AngularJS rock? o Rapid prototyping with AngularJs o AngularJs Form Validation • Videos o Official YouTube channel o AngularJs Fundamentals in 60-ish minutes o Writing Directives o Introduction to AngularJs Unit Testing o End to End testing of AngularJs apps with Protractor