Submit Search
Upload
AngularJS best practices
•
Download as PPTX, PDF
•
1 like
•
713 views
F
Filip Bruun Bech-Larsen
Follow
Slides from a talk at ngAarhus on how you can still build great stuff with AngularJS.
Read less
Read more
Technology
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 45
Download now
Recommended
Javascript void
Javascript void
AbhishekMondal42
Es6 features part 1
Es6 features part 1
Madhu Sudhan Subedi
Design patterns in web testing automation with WebDriver
Design patterns in web testing automation with WebDriver
Mikalai Alimenkou
Javascript
Javascript
Program in Interdisciplinary Computing
Javascript interview questions and answers
Javascript interview questions and answers
FeedGoCode
Everything You Need To Know About AngularJS
Everything You Need To Know About AngularJS
Sina Mirhejazi
Django Patterns - Pycon India 2014
Django Patterns - Pycon India 2014
arunvr
Java design patterns
Java design patterns
Brian Zitzow
Recommended
Javascript void
Javascript void
AbhishekMondal42
Es6 features part 1
Es6 features part 1
Madhu Sudhan Subedi
Design patterns in web testing automation with WebDriver
Design patterns in web testing automation with WebDriver
Mikalai Alimenkou
Javascript
Javascript
Program in Interdisciplinary Computing
Javascript interview questions and answers
Javascript interview questions and answers
FeedGoCode
Everything You Need To Know About AngularJS
Everything You Need To Know About AngularJS
Sina Mirhejazi
Django Patterns - Pycon India 2014
Django Patterns - Pycon India 2014
arunvr
Java design patterns
Java design patterns
Brian Zitzow
AngularJS Best Practices
AngularJS Best Practices
Betclic Everest Group Tech Team
AngularJS best-practices
AngularJS best-practices
Henry Tao
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Litmus
New Features in Angular 1.5
New Features in Angular 1.5
Kenichi Kanai
CSS Best practice
CSS Best practice
Russ Weakley
Css best practices style guide and tips
Css best practices style guide and tips
Chris Love
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web Design
Brad Frost
CSS3 Media Queries
CSS3 Media Queries
Russ Weakley
Media queries and frameworks
Media queries and frameworks
Nicole Ryan
The Art of AngularJS in 2015
The Art of AngularJS in 2015
Matt Raible
AngularJS Best Practices
AngularJS Best Practices
Narek Mamikonyan
Reusable Apps
Reusable Apps
DjangoCon2008
* DJANGO - The Python Framework - Low Kian Seong, Developer
* DJANGO - The Python Framework - Low Kian Seong, Developer
Linuxmalaysia Malaysia
Nicholas Gustilo "Clean Android: building great mobile apps"
Nicholas Gustilo "Clean Android: building great mobile apps"
IT Event
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)
Alex Ross
Software Development with PHP & Laravel
Software Development with PHP & Laravel
Juan Victor Minaya León
BDD with SpecFlow and Selenium
BDD with SpecFlow and Selenium
Liraz Shay
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular App
Katy Slemon
ITARC15 Workshop - Architecting a Large Software Project - Lessons Learned
ITARC15 Workshop - Architecting a Large Software Project - Lessons Learned
João Pedro Martins
Architecting a Large Software Project - Lessons Learned
Architecting a Large Software Project - Lessons Learned
João Pedro Martins
Angular 2 overview in 60 minutes
Angular 2 overview in 60 minutes
Loiane Groner
Dust.js
Dust.js
Yevgeniy Brikman
More Related Content
Viewers also liked
AngularJS Best Practices
AngularJS Best Practices
Betclic Everest Group Tech Team
AngularJS best-practices
AngularJS best-practices
Henry Tao
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Litmus
New Features in Angular 1.5
New Features in Angular 1.5
Kenichi Kanai
CSS Best practice
CSS Best practice
Russ Weakley
Css best practices style guide and tips
Css best practices style guide and tips
Chris Love
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web Design
Brad Frost
CSS3 Media Queries
CSS3 Media Queries
Russ Weakley
Media queries and frameworks
Media queries and frameworks
Nicole Ryan
The Art of AngularJS in 2015
The Art of AngularJS in 2015
Matt Raible
AngularJS Best Practices
AngularJS Best Practices
Narek Mamikonyan
Viewers also liked
(11)
AngularJS Best Practices
AngularJS Best Practices
AngularJS best-practices
AngularJS best-practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
New Features in Angular 1.5
New Features in Angular 1.5
CSS Best practice
CSS Best practice
Css best practices style guide and tips
Css best practices style guide and tips
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web Design
CSS3 Media Queries
CSS3 Media Queries
Media queries and frameworks
Media queries and frameworks
The Art of AngularJS in 2015
The Art of AngularJS in 2015
AngularJS Best Practices
AngularJS Best Practices
Similar to AngularJS best practices
Reusable Apps
Reusable Apps
DjangoCon2008
* DJANGO - The Python Framework - Low Kian Seong, Developer
* DJANGO - The Python Framework - Low Kian Seong, Developer
Linuxmalaysia Malaysia
Nicholas Gustilo "Clean Android: building great mobile apps"
Nicholas Gustilo "Clean Android: building great mobile apps"
IT Event
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)
Alex Ross
Software Development with PHP & Laravel
Software Development with PHP & Laravel
Juan Victor Minaya León
BDD with SpecFlow and Selenium
BDD with SpecFlow and Selenium
Liraz Shay
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular App
Katy Slemon
ITARC15 Workshop - Architecting a Large Software Project - Lessons Learned
ITARC15 Workshop - Architecting a Large Software Project - Lessons Learned
João Pedro Martins
Architecting a Large Software Project - Lessons Learned
Architecting a Large Software Project - Lessons Learned
João Pedro Martins
Angular 2 overview in 60 minutes
Angular 2 overview in 60 minutes
Loiane Groner
Dust.js
Dust.js
Yevgeniy Brikman
Angular Rebooted: Components Everywhere - Carlo Bonamico, Sonia Pini - Codemo...
Angular Rebooted: Components Everywhere - Carlo Bonamico, Sonia Pini - Codemo...
Codemotion
Angular Rebooted: Components Everywhere
Angular Rebooted: Components Everywhere
Carlo Bonamico
Onion Architecture with S#arp
Onion Architecture with S#arp
Gary Pedretti
Introduction to AngularJs
Introduction to AngularJs
murtazahaveliwala
Carlo Bonamico, Sonia Pini - So you want to build your (Angular) Component Li...
Carlo Bonamico, Sonia Pini - So you want to build your (Angular) Component Li...
Codemotion
Build Your Own Angular Component Library
Build Your Own Angular Component Library
Carlo Bonamico
Taming the Legacy Beast: Turning wild old code into a sleak new thoroughbread.
Taming the Legacy Beast: Turning wild old code into a sleak new thoroughbread.
Chris Laning
Survive the Chaos - S4H151 - SAP TechED Barcelona 2017 - Lecture
Survive the Chaos - S4H151 - SAP TechED Barcelona 2017 - Lecture
Rainer Winkler
ElggCamp Santiago> For Developers!
ElggCamp Santiago> For Developers!
Condiminds
Similar to AngularJS best practices
(20)
Reusable Apps
Reusable Apps
* DJANGO - The Python Framework - Low Kian Seong, Developer
* DJANGO - The Python Framework - Low Kian Seong, Developer
Nicholas Gustilo "Clean Android: building great mobile apps"
Nicholas Gustilo "Clean Android: building great mobile apps"
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)
Software Development with PHP & Laravel
Software Development with PHP & Laravel
BDD with SpecFlow and Selenium
BDD with SpecFlow and Selenium
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular App
ITARC15 Workshop - Architecting a Large Software Project - Lessons Learned
ITARC15 Workshop - Architecting a Large Software Project - Lessons Learned
Architecting a Large Software Project - Lessons Learned
Architecting a Large Software Project - Lessons Learned
Angular 2 overview in 60 minutes
Angular 2 overview in 60 minutes
Dust.js
Dust.js
Angular Rebooted: Components Everywhere - Carlo Bonamico, Sonia Pini - Codemo...
Angular Rebooted: Components Everywhere - Carlo Bonamico, Sonia Pini - Codemo...
Angular Rebooted: Components Everywhere
Angular Rebooted: Components Everywhere
Onion Architecture with S#arp
Onion Architecture with S#arp
Introduction to AngularJs
Introduction to AngularJs
Carlo Bonamico, Sonia Pini - So you want to build your (Angular) Component Li...
Carlo Bonamico, Sonia Pini - So you want to build your (Angular) Component Li...
Build Your Own Angular Component Library
Build Your Own Angular Component Library
Taming the Legacy Beast: Turning wild old code into a sleak new thoroughbread.
Taming the Legacy Beast: Turning wild old code into a sleak new thoroughbread.
Survive the Chaos - S4H151 - SAP TechED Barcelona 2017 - Lecture
Survive the Chaos - S4H151 - SAP TechED Barcelona 2017 - Lecture
ElggCamp Santiago> For Developers!
ElggCamp Santiago> For Developers!
More from Filip Bruun Bech-Larsen
Webcomponents from 0-100 - with Google's Lit
Webcomponents from 0-100 - with Google's Lit
Filip Bruun Bech-Larsen
Webcomponents are your frameworks best friend
Webcomponents are your frameworks best friend
Filip Bruun Bech-Larsen
Content as a Service with Umbraco Headless
Content as a Service with Umbraco Headless
Filip Bruun Bech-Larsen
Frameworks and webcomponents
Frameworks and webcomponents
Filip Bruun Bech-Larsen
Whats next in clientside templating
Whats next in clientside templating
Filip Bruun Bech-Larsen
Whats next in clientside templating
Whats next in clientside templating
Filip Bruun Bech-Larsen
Angular ❤️ CMS from #AngularUp
Angular ❤️ CMS from #AngularUp
Filip Bruun Bech-Larsen
Whats next in templating
Whats next in templating
Filip Bruun Bech-Larsen
The future of templating and frameworks
The future of templating and frameworks
Filip Bruun Bech-Larsen
Whats next in templating
Whats next in templating
Filip Bruun Bech-Larsen
Future of the Web
Future of the Web
Filip Bruun Bech-Larsen
Diversity at impact
Diversity at impact
Filip Bruun Bech-Larsen
Angular ❤️CMS
Angular ❤️CMS
Filip Bruun Bech-Larsen
The Future of the web
The Future of the web
Filip Bruun Bech-Larsen
Building a dynamic SPA website with Angular
Building a dynamic SPA website with Angular
Filip Bruun Bech-Larsen
Frontend development of the (current) future
Frontend development of the (current) future
Filip Bruun Bech-Larsen
Commerce and the browser in 2017
Commerce and the browser in 2017
Filip Bruun Bech-Larsen
Frontend State of the union
Frontend State of the union
Filip Bruun Bech-Larsen
Frontend development of the (current) future
Frontend development of the (current) future
Filip Bruun Bech-Larsen
Dynamic content with Angular
Dynamic content with Angular
Filip Bruun Bech-Larsen
More from Filip Bruun Bech-Larsen
(20)
Webcomponents from 0-100 - with Google's Lit
Webcomponents from 0-100 - with Google's Lit
Webcomponents are your frameworks best friend
Webcomponents are your frameworks best friend
Content as a Service with Umbraco Headless
Content as a Service with Umbraco Headless
Frameworks and webcomponents
Frameworks and webcomponents
Whats next in clientside templating
Whats next in clientside templating
Whats next in clientside templating
Whats next in clientside templating
Angular ❤️ CMS from #AngularUp
Angular ❤️ CMS from #AngularUp
Whats next in templating
Whats next in templating
The future of templating and frameworks
The future of templating and frameworks
Whats next in templating
Whats next in templating
Future of the Web
Future of the Web
Diversity at impact
Diversity at impact
Angular ❤️CMS
Angular ❤️CMS
The Future of the web
The Future of the web
Building a dynamic SPA website with Angular
Building a dynamic SPA website with Angular
Frontend development of the (current) future
Frontend development of the (current) future
Commerce and the browser in 2017
Commerce and the browser in 2017
Frontend State of the union
Frontend State of the union
Frontend development of the (current) future
Frontend development of the (current) future
Dynamic content with Angular
Dynamic content with Angular
Recently uploaded
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Dropbox
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
Nanddeep Nachan
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
Khem
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Juan lago vázquez
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
apidays
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Zilliz
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Khushali Kathiriya
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
The Digital Insurer
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Zilliz
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
apidays
Recently uploaded
(20)
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
AngularJS best practices
1.
Supercharging AngularJS lessons learnt, experiences,
best practices… for building modern AngularJS 1.x apps @IMPACTdigitaldk
2.
AngularJS and Angular
3.
Filip
4.
#weAreHiring #Denmark
5.
https://developers.google.com/experts/people/filip-bruun-bech-larsen
6.
lets talk about AngularJS
7.
Why best practices •
for better apps • less errors • better performance • better team-work • more fun • to get closer to ng2
8.
Change your vocabulary •
Components (element-selector + template) • Directives (attribute-selector + never template)
9.
think of your
app as a tree of components
10.
A tree of
components my-app app-navigationcontact-list contact-item toggle-favorite contact-item toggle-favorite contact-item toggle-favorite
11.
12.
Think in Smart/Dumb stateful stateless
13.
Data down and
events up
14.
15.
Business logic and
data live in services when you are calling $http from a component - you are doing it wrong
16.
go for consistency
in data-calls so probably async, if any of it is…
17.
Treat directives like components don’t
use link(), don’t use replace
18.
$scope
19.
What is it
with scope inheritance/isolation and performance
20.
don’t use scope/$scope go
for ctrlAs-syntax (default on components) if you really need an event-system, scope can be ok
21.
when things are slow…you
are probably doing it wrong
22.
don’t ever $watch $doCheck()
does it better, but you should probably refactor
23.
$apply is the
root of all evil ng-* event-listeners, $http, $q.resolve, $q.reject, $timeout,
24.
default to ::bindings upgrade
only as needed or maybe just put the data in the template-string directly
25.
26.
One-time is not one-way
27.
one-way bindings are a
special input-binding its almost like two way bindings (=), except for when you change the reference from inside the component. http://codepen.io/filipbech/pen/pNLPdN
28.
{{avoidThese}} use ng-bind so
the expression is cached
29.
and don’t use
ng-include subcomponents are almost twice as fast
30.
Remember to do
clean-up remove event/message listeners and pointers in $onDestroy
31.
http://codepen.io/filipbech/pen/gLegyx?editors=0010
32.
Watch out for
filters in your template they are run more often than you think
33.
http://codepen.io/filipbech/pen/qqomQQ?editors=0010
34.
ng-repeat use trackBy and
::binding
35.
Consider typescript for ES6
and for the types
36.
Consider Observables with RxJS
5
37.
what about modules angular
modules, es6-modules, AMD etc…
38.
Manage your state consistently consider
redux, observables or roll your own system
39.
files, methods, variables,
etc. Avoid ng and $ in your own names Commit to a naming-scheme
40.
DI on separate
lines so you’ll have pretty diffs
41.
Use the newest angularJS-release
42.
AngularJS in production obviously concat,
minify, gzip, etc… but also: use provided .min bundle, disable debug info, disable comment/class directive https://docs.angularjs.org/guide/production
43.
so what do
you think… questions, thoughts, comments?
44.
Thank you I’ll tweet
a link to the slides in a minute @IMPACTdigitaldk @filipbech
Download now