SlideShare une entreprise Scribd logo
1  sur  45
Télécharger pour lire hors ligne
AngularJS for Java 
Developers 
Loc Nguyen 
lochnguyen@gmail.com
<ng-selfie/> 
● Organizer of AngularJS-OC [angularjsoc.org, @angularjsoc] 
● Multi-platform SW geek => Java, Ruby, JavaScript, C#, Node 
● First an Ember fan (still am) 
● ~1.5 years of AngularJS experience => mostly consulting
Agenda 
● Thick client history 
● Current state of JS 
● MVC & Data binding 
● Components 
● Tooling 
● Resources
How to train your dragon JavaScript
Ship It™
Ambitious Web Applications™
AngularJS for Java Developers
AngularJS for Java Developers
AngularJS for Java Developers
AngularJS for Java Developers
The Model 
● Plain old Java(Script) objects – POJO! 
● No need to extend a hierarchy
class Member { 
String name = ""; 
boolean active = true; 
List<String> emails = new List<String>(); 
} 
var member = { 
name: '', 
active: true, 
emails: [] 
};
The View 
● Just plain HTML 
● Built-in directives similar to JSTL
// index.jsp 
<c:if test="${member.active}"> 
<c:out value="${member.name}"/> 
<ul> 
<c:forEach items="${member.emails}" var="email"> 
<li><c:out value="${email}"/></li> 
</c:forEach> 
</ul> 
</c:if> 
// index.html 
<div ng-if="member.active"> 
{{member.name}} 
<ul> 
<li ng-repeat="email in member.emails"> 
{{email}} 
</li> 
</ul> 
</div>
The Controller 
● Plain old JavaScript functions 
● Instantiated as needed 
● Inject dependencies 
● Figure out what the view needs, defer retrieval 
● $scope is the context 
o a view model
package ocjug.controllers; 
@Controller 
class MeetupController { 
function meetupController($scope) { 
$scope.person = { 
name: 'Loc', active: true, emails: [...] 
}; 
} 
public String index(Model model) { 
Member person = new Member(); 
member.name = "Loc"; 
member.active = true; 
member.emails = Arrays.asList(...); 
model.setAttribute("scope", member); 
} 
} 
angular.module('ocjug.controllers', []) 
.controller('MeetupController', meetupController);
Data Binding 
● $digest loop – Angular event loop 
● $watch list – what’s dirty? 
● http://codepen.io/anon/pen/EcoGd
Dependency Injection 
● Code to abstractions 
● Testing is so easy 
● SOLID 
● Put controllers on a diet
Services 
● Promote cleaner code 
● Organization and reusability 
● Shared business logic 
● Data retrieval 
● One instance in app 
● 3 ways to make a service!
package ocjug.services; 
@Service 
class MeetupSearchService { 
private final API_KEY = "abc123"; 
private final SEARCH_URI = "https://api.meetup.com/search"; 
@Autowired 
SomeHttpClient httpClient; 
public List<SearchResult> search(Map params) { 
// start pseudo-ing 
httpClient.queryParams(params).get(SEARCH_URI); 
} 
} 
Example
angular.module('ocjug.services', []) 
.factory('MeetupSearchSvc', function ($http) { 
var API_KEY = 'abc123'; 
var SEARCH_URI = 'https://api.meetup.com/search'; 
var search = function (queryParams) { 
return $http.get(SEARCH_URI, { params: queryParams 
}); 
}; 
return { 
search: search 
} 
});
Services 
.service() - invoke with the new keyword 
angular.module('ocjug.services', []) 
.service('MeetupSearchService', function ($http) { 
this.API = 'http://api.meetup.com/search'; 
this.search = function() { 
// ... 
} 
});
Services (cont) 
.factory() - always use a factory! 
angular.module('ocjug.services', []) 
.factory('MeetupSearchService', function ($http) { 
var API = 'http://api.meetup.com/search'; 
return { 
search: function (params) { 
// … 
} 
}; 
});
Services (cont) 
.provider() - configure before app starts 
angular.module('ocjug.services', []) 
.provider('MeetupSearchProvider', function () { 
var API = 'http://api.meetup.com/search'; 
this.REMEMBER_SEARCHES = false; 
this.$get = function ($http) { 
return { 
search: function (params) { 
// … 
if (this.REMEMBER_SEARCHES) ... 
} 
}; 
}; 
});
Services (cont) 
angular.module('ocjug', ['ocjug.services']) 
.config(function(MeetupSearchProviderProvider) { 
MeetupSearchProviderProvider.REMEMBER_SEARCHES = true; 
});
angular.module('ocjug.controllers', []) 
.controller('MemberSearchCtrl', function ($scope, $http) { 
$http.get('http://api.meetup.com/search?name=' + 
$scope.name); 
}) 
.controller('MeetupSearchCtrl', function ($scope, $http) { 
$http.get('http://api.meetup.com/search?meetup=' 
+ $scope.meetup); 
}); 
Extracting into a Service
var ocjug = angular.module('ocjug', ['ocjug.services']); 
function memberSearchCtrl ($scope, MeetupSearchSvc) { 
MeetupSearchSvc.search({ name: $scope.name }); 
} 
ocjug.controller(MemberSearchCtrl, memberSearchCtrl); 
function meetupSearchCtrl ($scope, MeetupSearchSvc) { 
MeetupSearchSvc.search({ meetup: $scope.meetup }); 
} 
ocjug.controller(MeetupSearchCtrl, meetupSearchCtrl);
Filters 
● Take an input to filter 
● Easily format data in templates 
● Uses the | character in {{ }} expression 
{{1.456 | number:2}} => 1.46 
{{'ocjug'| uppercase | limitTo:3}} => OCJ 
{{99.99 | currency:'USD$' }} => USD$99.99 
<div ng-repeat="m in movies | orderBy:'revenue'">
angular.module('ocjug.filters', []) 
.filter('asCentimeters', function () { 
return function (inches) { 
return inches * 2.54; 
}; 
}); 
{{2 | asCentimeters}} => 5.08
Directives 
● The killer feature of AngularJS 
● ...and the most complex API 
● Apply liberally
Directives 
● Built-in directives 
○ ng-show, ng-click, ng-repeat 
● Custom directives 
○ reusable widgets 
○ declarative programming 
○ wrap non Angular libraries
<div ng-repeat="picture in pictures"> 
<pic picture="picture" 
commentable="{{picture.approved}}"></pic> 
</div>
// picture.tpl.html 
<div> 
<img ng-src="picture.url"/> 
<div>{{picture.caption}}</div> 
<a ng-click="fbLike(picture)">Like</a> 
<ul> 
<li ng-repeat="comment in picture.comments | 
limitTo:3"> 
{{comment}} 
</li> 
</ul> 
<comment-form picture="picture"> … </comment-form> 
</div>
angular.module(ocjug.directives, ['ocjug.services']) 
.directive('pic', function(FbService) { 
return { 
templateUrl: 'picture.tpl.html', 
scope: { 
picture: '=', 
commentable: '@' 
}, 
link: function ($scope, el, attrs) { 
$scope.fbLike = function(picture) { 
FbService.like(picture.id); 
} 
} 
} 
});
angular.module(ocjug.directives, ['ocjug.services]) 
.directive('commentForm', function(CommentService) { 
return { 
templateUrl: 'comment.tpl.html', 
scope: { 
picture: '=' 
}, 
link: function ($scope, el, attrs) { 
$scope.submit = function(comment) { 
CommentService.create(comment); 
} 
} 
} 
});
Test and Tools 
● Unit tests - Karma 
● E2E - Protractor 
● Node based build tools 
o Grunt 
o Gulp
What’s missing? 
● SPA vs Islands of Richness 
● Async and promises 
● AJAX 
● Performance 
● Routing 
● Testing 
● Mobile 
● Integration
Resources 
UI-Router: github.com/angular-ui/ui-router 
Angular-UI: github.com/angular-ui 
Ionic: ionicframework.com 
Year of Moo: yearofmoo.com 
Style Guide: github.com/johnpapa/angularjs-styleguide
docs.angularjs.org/tutorial 
● Free! 
● Beginner
codeschool.com 
● Free! 
● Gamified learning 
● Beginner
egghead.io 
● AngularJS, 
● JavaScript, 
● D3.js 
● EcmaScript 6 
● NodeJS 
● ReactJS 
● $10m or $100/y 
https://egghead.io/pricing?dc=ng_socal 
Beginner – Advanced
pluralsight.com 
● $29 month 
● The most Angular courses 
● Deep coverage of JS 
● ...and .NET 
● Beginner – Advanced
$40 $23
AngularJS for Java Developers
angularjsoc.org 
meetup.com/AngularJS-OC

Contenu connexe

Tendances

Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIWorkshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIVisual Engineering
 
Difference between java script and jquery
Difference between java script and jqueryDifference between java script and jquery
Difference between java script and jqueryUmar Ali
 
Rethinking Best Practices
Rethinking Best PracticesRethinking Best Practices
Rethinking Best Practicesfloydophone
 
AngularJS Directives
AngularJS DirectivesAngularJS Directives
AngularJS DirectivesEyal Vardi
 
Angular js routing options
Angular js routing optionsAngular js routing options
Angular js routing optionsNir Kaufman
 
Angular Weekend
Angular WeekendAngular Weekend
Angular WeekendTroy Miles
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux IntroductionNikolaus Graf
 
The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014Matt Raible
 
AngularJS best-practices
AngularJS best-practicesAngularJS best-practices
AngularJS best-practicesHenry Tao
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenerytoddbr
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners WorkshopSathish VJ
 
Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework Yakov Fain
 

Tendances (20)

Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIWorkshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte II
 
Angularjs Basics
Angularjs BasicsAngularjs Basics
Angularjs Basics
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Difference between java script and jquery
Difference between java script and jqueryDifference between java script and jquery
Difference between java script and jquery
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
Rethinking Best Practices
Rethinking Best PracticesRethinking Best Practices
Rethinking Best Practices
 
AngularJS Directives
AngularJS DirectivesAngularJS Directives
AngularJS Directives
 
Angular js routing options
Angular js routing optionsAngular js routing options
Angular js routing options
 
AngularJS Best Practices
AngularJS Best PracticesAngularJS Best Practices
AngularJS Best Practices
 
Angular Weekend
Angular WeekendAngular Weekend
Angular Weekend
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
 
AngularJs
AngularJsAngularJs
AngularJs
 
Workshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte IWorkshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte I
 
The AngularJS way
The AngularJS wayThe AngularJS way
The AngularJS way
 
The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014
 
AngularJS best-practices
AngularJS best-practicesAngularJS best-practices
AngularJS best-practices
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
React on es6+
React on es6+React on es6+
React on es6+
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners Workshop
 
Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework
 

Similaire à AngularJS for Java Developers

Introduction of angular js
Introduction of angular jsIntroduction of angular js
Introduction of angular jsTamer Solieman
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosLearnimtactics
 
Webinar: AngularJS and the WordPress REST API
Webinar: AngularJS and the WordPress REST APIWebinar: AngularJS and the WordPress REST API
Webinar: AngularJS and the WordPress REST APIWP Engine UK
 
Webinar: AngularJS and the WordPress REST API
Webinar: AngularJS and the WordPress REST APIWebinar: AngularJS and the WordPress REST API
Webinar: AngularJS and the WordPress REST APIWP Engine
 
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
 
The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015Matt Raible
 
Introduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress DevelopersIntroduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress DevelopersCaldera Labs
 
Introducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and serverIntroducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and serverSpike Brehm
 
Coffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSCoffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSDeepu S Nath
 
AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014Dariusz Kalbarczyk
 

Similaire à AngularJS for Java Developers (20)

Introduction of angular js
Introduction of angular jsIntroduction of angular js
Introduction of angular js
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
 
Mini-Training: AngularJS
Mini-Training: AngularJSMini-Training: AngularJS
Mini-Training: AngularJS
 
Webinar: AngularJS and the WordPress REST API
Webinar: AngularJS and the WordPress REST APIWebinar: AngularJS and the WordPress REST API
Webinar: AngularJS and the WordPress REST API
 
Webinar: AngularJS and the WordPress REST API
Webinar: AngularJS and the WordPress REST APIWebinar: AngularJS and the WordPress REST API
Webinar: AngularJS and the WordPress REST API
 
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
 
The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015
 
Introduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress DevelopersIntroduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress Developers
 
AngularJs-training
AngularJs-trainingAngularJs-training
AngularJs-training
 
AngularJS and SPA
AngularJS and SPAAngularJS and SPA
AngularJS and SPA
 
Basics of AngularJS
Basics of AngularJSBasics of AngularJS
Basics of AngularJS
 
Get AngularJS Started!
Get AngularJS Started!Get AngularJS Started!
Get AngularJS Started!
 
Introducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and serverIntroducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and server
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Dive into AngularJS and directives
Dive into AngularJS and directivesDive into AngularJS and directives
Dive into AngularJS and directives
 
Angular js
Angular jsAngular js
Angular js
 
Coffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSCoffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JS
 
Angularjs
AngularjsAngularjs
Angularjs
 
Introduction to angular js
Introduction to angular jsIntroduction to angular js
Introduction to angular js
 
AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014
 

Dernier

Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
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
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampVICTOR MAESTRE RAMIREZ
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
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
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
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
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
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
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
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
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies
 
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
 
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
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
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
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 

Dernier (20)

Program with GUTs
Program with GUTsProgram with GUTs
Program with GUTs
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
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
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - Datacamp
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
Sustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire ThornewillSustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire Thornewill
 
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
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
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
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
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
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in Trivandrum
 
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
 
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...
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
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!
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 

AngularJS for Java Developers

  • 1. AngularJS for Java Developers Loc Nguyen lochnguyen@gmail.com
  • 2. <ng-selfie/> ● Organizer of AngularJS-OC [angularjsoc.org, @angularjsoc] ● Multi-platform SW geek => Java, Ruby, JavaScript, C#, Node ● First an Ember fan (still am) ● ~1.5 years of AngularJS experience => mostly consulting
  • 3. Agenda ● Thick client history ● Current state of JS ● MVC & Data binding ● Components ● Tooling ● Resources
  • 4. How to train your dragon JavaScript
  • 11. The Model ● Plain old Java(Script) objects – POJO! ● No need to extend a hierarchy
  • 12. class Member { String name = ""; boolean active = true; List<String> emails = new List<String>(); } var member = { name: '', active: true, emails: [] };
  • 13. The View ● Just plain HTML ● Built-in directives similar to JSTL
  • 14. // index.jsp <c:if test="${member.active}"> <c:out value="${member.name}"/> <ul> <c:forEach items="${member.emails}" var="email"> <li><c:out value="${email}"/></li> </c:forEach> </ul> </c:if> // index.html <div ng-if="member.active"> {{member.name}} <ul> <li ng-repeat="email in member.emails"> {{email}} </li> </ul> </div>
  • 15. The Controller ● Plain old JavaScript functions ● Instantiated as needed ● Inject dependencies ● Figure out what the view needs, defer retrieval ● $scope is the context o a view model
  • 16. package ocjug.controllers; @Controller class MeetupController { function meetupController($scope) { $scope.person = { name: 'Loc', active: true, emails: [...] }; } public String index(Model model) { Member person = new Member(); member.name = "Loc"; member.active = true; member.emails = Arrays.asList(...); model.setAttribute("scope", member); } } angular.module('ocjug.controllers', []) .controller('MeetupController', meetupController);
  • 17. Data Binding ● $digest loop – Angular event loop ● $watch list – what’s dirty? ● http://codepen.io/anon/pen/EcoGd
  • 18. Dependency Injection ● Code to abstractions ● Testing is so easy ● SOLID ● Put controllers on a diet
  • 19. Services ● Promote cleaner code ● Organization and reusability ● Shared business logic ● Data retrieval ● One instance in app ● 3 ways to make a service!
  • 20. package ocjug.services; @Service class MeetupSearchService { private final API_KEY = "abc123"; private final SEARCH_URI = "https://api.meetup.com/search"; @Autowired SomeHttpClient httpClient; public List<SearchResult> search(Map params) { // start pseudo-ing httpClient.queryParams(params).get(SEARCH_URI); } } Example
  • 21. angular.module('ocjug.services', []) .factory('MeetupSearchSvc', function ($http) { var API_KEY = 'abc123'; var SEARCH_URI = 'https://api.meetup.com/search'; var search = function (queryParams) { return $http.get(SEARCH_URI, { params: queryParams }); }; return { search: search } });
  • 22. Services .service() - invoke with the new keyword angular.module('ocjug.services', []) .service('MeetupSearchService', function ($http) { this.API = 'http://api.meetup.com/search'; this.search = function() { // ... } });
  • 23. Services (cont) .factory() - always use a factory! angular.module('ocjug.services', []) .factory('MeetupSearchService', function ($http) { var API = 'http://api.meetup.com/search'; return { search: function (params) { // … } }; });
  • 24. Services (cont) .provider() - configure before app starts angular.module('ocjug.services', []) .provider('MeetupSearchProvider', function () { var API = 'http://api.meetup.com/search'; this.REMEMBER_SEARCHES = false; this.$get = function ($http) { return { search: function (params) { // … if (this.REMEMBER_SEARCHES) ... } }; }; });
  • 25. Services (cont) angular.module('ocjug', ['ocjug.services']) .config(function(MeetupSearchProviderProvider) { MeetupSearchProviderProvider.REMEMBER_SEARCHES = true; });
  • 26. angular.module('ocjug.controllers', []) .controller('MemberSearchCtrl', function ($scope, $http) { $http.get('http://api.meetup.com/search?name=' + $scope.name); }) .controller('MeetupSearchCtrl', function ($scope, $http) { $http.get('http://api.meetup.com/search?meetup=' + $scope.meetup); }); Extracting into a Service
  • 27. var ocjug = angular.module('ocjug', ['ocjug.services']); function memberSearchCtrl ($scope, MeetupSearchSvc) { MeetupSearchSvc.search({ name: $scope.name }); } ocjug.controller(MemberSearchCtrl, memberSearchCtrl); function meetupSearchCtrl ($scope, MeetupSearchSvc) { MeetupSearchSvc.search({ meetup: $scope.meetup }); } ocjug.controller(MeetupSearchCtrl, meetupSearchCtrl);
  • 28. Filters ● Take an input to filter ● Easily format data in templates ● Uses the | character in {{ }} expression {{1.456 | number:2}} => 1.46 {{'ocjug'| uppercase | limitTo:3}} => OCJ {{99.99 | currency:'USD$' }} => USD$99.99 <div ng-repeat="m in movies | orderBy:'revenue'">
  • 29. angular.module('ocjug.filters', []) .filter('asCentimeters', function () { return function (inches) { return inches * 2.54; }; }); {{2 | asCentimeters}} => 5.08
  • 30. Directives ● The killer feature of AngularJS ● ...and the most complex API ● Apply liberally
  • 31. Directives ● Built-in directives ○ ng-show, ng-click, ng-repeat ● Custom directives ○ reusable widgets ○ declarative programming ○ wrap non Angular libraries
  • 32. <div ng-repeat="picture in pictures"> <pic picture="picture" commentable="{{picture.approved}}"></pic> </div>
  • 33. // picture.tpl.html <div> <img ng-src="picture.url"/> <div>{{picture.caption}}</div> <a ng-click="fbLike(picture)">Like</a> <ul> <li ng-repeat="comment in picture.comments | limitTo:3"> {{comment}} </li> </ul> <comment-form picture="picture"> … </comment-form> </div>
  • 34. angular.module(ocjug.directives, ['ocjug.services']) .directive('pic', function(FbService) { return { templateUrl: 'picture.tpl.html', scope: { picture: '=', commentable: '@' }, link: function ($scope, el, attrs) { $scope.fbLike = function(picture) { FbService.like(picture.id); } } } });
  • 35. angular.module(ocjug.directives, ['ocjug.services]) .directive('commentForm', function(CommentService) { return { templateUrl: 'comment.tpl.html', scope: { picture: '=' }, link: function ($scope, el, attrs) { $scope.submit = function(comment) { CommentService.create(comment); } } } });
  • 36. Test and Tools ● Unit tests - Karma ● E2E - Protractor ● Node based build tools o Grunt o Gulp
  • 37. What’s missing? ● SPA vs Islands of Richness ● Async and promises ● AJAX ● Performance ● Routing ● Testing ● Mobile ● Integration
  • 38. Resources UI-Router: github.com/angular-ui/ui-router Angular-UI: github.com/angular-ui Ionic: ionicframework.com Year of Moo: yearofmoo.com Style Guide: github.com/johnpapa/angularjs-styleguide
  • 40. codeschool.com ● Free! ● Gamified learning ● Beginner
  • 41. egghead.io ● AngularJS, ● JavaScript, ● D3.js ● EcmaScript 6 ● NodeJS ● ReactJS ● $10m or $100/y https://egghead.io/pricing?dc=ng_socal Beginner – Advanced
  • 42. pluralsight.com ● $29 month ● The most Angular courses ● Deep coverage of JS ● ...and .NET ● Beginner – Advanced

Notes de l'éditeur

  1. No API to learn for models! POJOS
  2. Use familiar markup