SlideShare a Scribd company logo

Angularjs - lazy loading techniques

Nir Kaufman
Nir Kaufman
Nir KaufmanPrincipal Front-end Developer & consultant | Google Developer Expert at 500Tech

A presentation made for the AngularJS-IL meetup group that took place in jan 2014 at Google TLV Campus. its a demonstration of how to integrate requireJS with AngularJS to achieve lazy loading and registration of angular components after bootstrap. this slideshow contain a link for a working demo

Angularjs - lazy loading techniques

1 of 19
Download to read offline
Lazy Loading Techniques
Introduction

Nir Kaufman
nirkaufman@gmail.com

AngularJS infrastructures - lazy loading
techniques:
1. Introducing the lazy loading challenges with
AngularJS
2. Review a working demo project

nirkaufman@gmail.com
overview

AngularJS encourage us to break our code
into smaller pieces.

Modules
services
directives

controllers
filters

constants

nirkaufman@gmail.com
overview

Separating your code into multiple files considered
a best practice when building large apps with
angular.
Angular seed project:
❖

js/

angular.module('myApp.controllers', []).
■
■
■
■

❖

controllers.js
services.js
directives.js
filters.js

partials/
■ partial1.html
■ partial2.html

controller('MyCtrl1', function() {
})
.controller('MyCtrl2', function() {
});

nirkaufman@gmail.com
overview

We can define our modules as dependencies:
angular.module('myApp',['ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers',
’ngRoute’,
’ngResource’,
’ui.bootstrap’,
]).

nirkaufman@gmail.com
overview

but we must load all of our resources ahead:
<script src="lib/angular.js"></script>
<script src="lib/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
………………..
<script src="lib/angular-resource.js"></script>
<script src="lib/angular-bootstrap.js"></script>
<script src="lib/underscore.js"></script>
nirkaufman@gmail.com

Recommended

Domain Driven Design Development Spring Portfolio
Domain Driven Design Development Spring PortfolioDomain Driven Design Development Spring Portfolio
Domain Driven Design Development Spring PortfolioSrini Penchikala
 
Migration d'une Architecture Microservice vers une Architecture Event-Driven ...
Migration d'une Architecture Microservice vers une Architecture Event-Driven ...Migration d'une Architecture Microservice vers une Architecture Event-Driven ...
Migration d'une Architecture Microservice vers une Architecture Event-Driven ...Daniel Rene FOUOMENE PEWO
 
給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發Weizhong Yang
 
State of Micro Frontend
State of Micro FrontendState of Micro Frontend
State of Micro FrontendYugo Sakamoto
 
Extending kubernetes with CustomResourceDefinitions
Extending kubernetes with CustomResourceDefinitionsExtending kubernetes with CustomResourceDefinitions
Extending kubernetes with CustomResourceDefinitionsStefan Schimanski
 
Azure kubernetes service (aks)
Azure kubernetes service (aks)Azure kubernetes service (aks)
Azure kubernetes service (aks)Akash Agrawal
 
An Introduction To Jenkins
An Introduction To JenkinsAn Introduction To Jenkins
An Introduction To JenkinsKnoldus Inc.
 

More Related Content

What's hot

The WAF book (Web App Firewall )
The WAF book  (Web App Firewall )The WAF book  (Web App Firewall )
The WAF book (Web App Firewall )Lior Rotkovitch
 
Practical Microservice Architecture (edition 2022).pdf
Practical Microservice Architecture (edition 2022).pdfPractical Microservice Architecture (edition 2022).pdf
Practical Microservice Architecture (edition 2022).pdfAhmed Misbah
 
Introduction to microservices
Introduction to microservicesIntroduction to microservices
Introduction to microservicesAnil Allewar
 
Crossplane @ Mastering GitOps.pdf
Crossplane @ Mastering GitOps.pdfCrossplane @ Mastering GitOps.pdf
Crossplane @ Mastering GitOps.pdfQAware GmbH
 
Kubernetes Application Deployment with Helm - A beginner Guide!
Kubernetes Application Deployment with Helm - A beginner Guide!Kubernetes Application Deployment with Helm - A beginner Guide!
Kubernetes Application Deployment with Helm - A beginner Guide!Krishna-Kumar
 
Red hat ansible automation technical deck
Red hat ansible automation technical deckRed hat ansible automation technical deck
Red hat ansible automation technical deckJuraj Hantak
 
Introduction to Docker - 2017
Introduction to Docker - 2017Introduction to Docker - 2017
Introduction to Docker - 2017Docker, Inc.
 
Ansible presentation
Ansible presentationAnsible presentation
Ansible presentationSuresh Kumar
 
Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...
Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...
Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...Edureka!
 
API design-first and Microservices
API design-first and MicroservicesAPI design-first and Microservices
API design-first and MicroservicesSven Bernhardt
 
Apache Camel K - Copenhagen v2
Apache Camel K - Copenhagen v2Apache Camel K - Copenhagen v2
Apache Camel K - Copenhagen v2Claus Ibsen
 
Understanding MicroSERVICE Architecture with Java & Spring Boot
Understanding MicroSERVICE Architecture with Java & Spring BootUnderstanding MicroSERVICE Architecture with Java & Spring Boot
Understanding MicroSERVICE Architecture with Java & Spring BootKashif Ali Siddiqui
 
Micro Front-End & Microservices - Plansoft
Micro Front-End & Microservices - PlansoftMicro Front-End & Microservices - Plansoft
Micro Front-End & Microservices - PlansoftMiki Lombardi
 

What's hot (20)

The WAF book (Web App Firewall )
The WAF book  (Web App Firewall )The WAF book  (Web App Firewall )
The WAF book (Web App Firewall )
 
Practical Microservice Architecture (edition 2022).pdf
Practical Microservice Architecture (edition 2022).pdfPractical Microservice Architecture (edition 2022).pdf
Practical Microservice Architecture (edition 2022).pdf
 
Micro frontend
Micro frontendMicro frontend
Micro frontend
 
Introduction to microservices
Introduction to microservicesIntroduction to microservices
Introduction to microservices
 
Vue.js
Vue.jsVue.js
Vue.js
 
Crossplane @ Mastering GitOps.pdf
Crossplane @ Mastering GitOps.pdfCrossplane @ Mastering GitOps.pdf
Crossplane @ Mastering GitOps.pdf
 
Introduction to helm
Introduction to helmIntroduction to helm
Introduction to helm
 
Springboot Microservices
Springboot MicroservicesSpringboot Microservices
Springboot Microservices
 
Kubernetes Application Deployment with Helm - A beginner Guide!
Kubernetes Application Deployment with Helm - A beginner Guide!Kubernetes Application Deployment with Helm - A beginner Guide!
Kubernetes Application Deployment with Helm - A beginner Guide!
 
Red hat ansible automation technical deck
Red hat ansible automation technical deckRed hat ansible automation technical deck
Red hat ansible automation technical deck
 
Introduction to Docker - 2017
Introduction to Docker - 2017Introduction to Docker - 2017
Introduction to Docker - 2017
 
Ansible presentation
Ansible presentationAnsible presentation
Ansible presentation
 
Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...
Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...
Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...
 
API design-first and Microservices
API design-first and MicroservicesAPI design-first and Microservices
API design-first and Microservices
 
Apache Camel K - Copenhagen v2
Apache Camel K - Copenhagen v2Apache Camel K - Copenhagen v2
Apache Camel K - Copenhagen v2
 
Understanding MicroSERVICE Architecture with Java & Spring Boot
Understanding MicroSERVICE Architecture with Java & Spring BootUnderstanding MicroSERVICE Architecture with Java & Spring Boot
Understanding MicroSERVICE Architecture with Java & Spring Boot
 
Api Gateway
Api GatewayApi Gateway
Api Gateway
 
Micro Front-End & Microservices - Plansoft
Micro Front-End & Microservices - PlansoftMicro Front-End & Microservices - Plansoft
Micro Front-End & Microservices - Plansoft
 
Introduction Node.js
Introduction Node.jsIntroduction Node.js
Introduction Node.js
 
Jenkins CI presentation
Jenkins CI presentationJenkins CI presentation
Jenkins CI presentation
 

Viewers also liked

Angular js - 10 reasons to choose angularjs
Angular js - 10 reasons to choose angularjs Angular js - 10 reasons to choose angularjs
Angular js - 10 reasons to choose angularjs Nir Kaufman
 
AngularJS - Overcoming performance issues. Limits.
AngularJS - Overcoming performance issues. Limits.AngularJS - Overcoming performance issues. Limits.
AngularJS - Overcoming performance issues. Limits.Dragos Mihai Rusu
 
AngularJS performance & production tips
AngularJS performance & production tipsAngularJS performance & production tips
AngularJS performance & production tipsNir Kaufman
 
Javascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & AngularJavascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & AngularErik Guzman
 
29 Essential AngularJS Interview Questions
29 Essential AngularJS Interview Questions29 Essential AngularJS Interview Questions
29 Essential AngularJS Interview QuestionsArc & Codementor
 
Redux with angular 2 - workshop 2016
Redux with angular 2 - workshop 2016Redux with angular 2 - workshop 2016
Redux with angular 2 - workshop 2016Nir Kaufman
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS ArchitectureEyal Vardi
 
Data Structures in javaScript 2015
Data Structures in javaScript 2015Data Structures in javaScript 2015
Data Structures in javaScript 2015Nir Kaufman
 
redux and angular - up and running
redux and angular - up and runningredux and angular - up and running
redux and angular - up and runningNir Kaufman
 
Up & running with ECMAScript6
Up & running with ECMAScript6Up & running with ECMAScript6
Up & running with ECMAScript6Nir Kaufman
 
Angular Pipes Workshop
Angular Pipes WorkshopAngular Pipes Workshop
Angular Pipes WorkshopNir Kaufman
 
AngularJSの高速化
AngularJSの高速化AngularJSの高速化
AngularJSの高速化Kon Yuichi
 
How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!Nir Kaufman
 
Angularjs - Unit testing introduction
Angularjs - Unit testing introductionAngularjs - Unit testing introduction
Angularjs - Unit testing introductionNir Kaufman
 
Angular2 workshop
Angular2 workshopAngular2 workshop
Angular2 workshopNir Kaufman
 
Webpack and angularjs
Webpack and angularjsWebpack and angularjs
Webpack and angularjsNir Kaufman
 
AngularJS - Services
AngularJS - ServicesAngularJS - Services
AngularJS - ServicesNir Kaufman
 
SPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST API
SPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST APISPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST API
SPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST APIEric Shupps
 

Viewers also liked (20)

Angular js - 10 reasons to choose angularjs
Angular js - 10 reasons to choose angularjs Angular js - 10 reasons to choose angularjs
Angular js - 10 reasons to choose angularjs
 
AngularJS - Overcoming performance issues. Limits.
AngularJS - Overcoming performance issues. Limits.AngularJS - Overcoming performance issues. Limits.
AngularJS - Overcoming performance issues. Limits.
 
AngularJS performance & production tips
AngularJS performance & production tipsAngularJS performance & production tips
AngularJS performance & production tips
 
Javascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & AngularJavascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & Angular
 
29 Essential AngularJS Interview Questions
29 Essential AngularJS Interview Questions29 Essential AngularJS Interview Questions
29 Essential AngularJS Interview Questions
 
Redux with angular 2 - workshop 2016
Redux with angular 2 - workshop 2016Redux with angular 2 - workshop 2016
Redux with angular 2 - workshop 2016
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
Data Structures in javaScript 2015
Data Structures in javaScript 2015Data Structures in javaScript 2015
Data Structures in javaScript 2015
 
redux and angular - up and running
redux and angular - up and runningredux and angular - up and running
redux and angular - up and running
 
Up & running with ECMAScript6
Up & running with ECMAScript6Up & running with ECMAScript6
Up & running with ECMAScript6
 
Solid angular
Solid angularSolid angular
Solid angular
 
Angular Pipes Workshop
Angular Pipes WorkshopAngular Pipes Workshop
Angular Pipes Workshop
 
AngularJSの高速化
AngularJSの高速化AngularJSの高速化
AngularJSの高速化
 
How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!
 
Angularjs - Unit testing introduction
Angularjs - Unit testing introductionAngularjs - Unit testing introduction
Angularjs - Unit testing introduction
 
Angular2 workshop
Angular2 workshopAngular2 workshop
Angular2 workshop
 
Webstorm
WebstormWebstorm
Webstorm
 
Webpack and angularjs
Webpack and angularjsWebpack and angularjs
Webpack and angularjs
 
AngularJS - Services
AngularJS - ServicesAngularJS - Services
AngularJS - Services
 
SPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST API
SPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST APISPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST API
SPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST API
 

Similar to Angularjs - lazy loading techniques

Front end development with Angular JS
Front end development with Angular JSFront end development with Angular JS
Front end development with Angular JSBipin
 
Angular js routing options
Angular js routing optionsAngular js routing options
Angular js routing optionsNir Kaufman
 
A Story about AngularJS modularization development
A Story about AngularJS modularization developmentA Story about AngularJS modularization development
A Story about AngularJS modularization developmentJohannes Weber
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
 
Angular presentation
Angular presentationAngular presentation
Angular presentationMatus Szabo
 
Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIWorkshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIVisual Engineering
 
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
 
Building a dashboard using AngularJS
Building a dashboard using AngularJSBuilding a dashboard using AngularJS
Building a dashboard using AngularJSRajthilakMCA
 
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
 
Introduction of angular js
Introduction of angular jsIntroduction of angular js
Introduction of angular jsTamer Solieman
 
Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIWorkshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIVisual Engineering
 
Angularjs 131211063348-phpapp01
Angularjs 131211063348-phpapp01Angularjs 131211063348-phpapp01
Angularjs 131211063348-phpapp01Arunangsu Sahu
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development GuideNitin Giri
 

Similar to Angularjs - lazy loading techniques (20)

Front end development with Angular JS
Front end development with Angular JSFront end development with Angular JS
Front end development with Angular JS
 
Angular js routing options
Angular js routing optionsAngular js routing options
Angular js routing options
 
A Story about AngularJS modularization development
A Story about AngularJS modularization developmentA Story about AngularJS modularization development
A Story about AngularJS modularization development
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
 
Angular js
Angular jsAngular js
Angular js
 
Angular presentation
Angular presentationAngular presentation
Angular presentation
 
Angular Js Basics
Angular Js BasicsAngular Js Basics
Angular Js Basics
 
Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIWorkshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte II
 
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
 
Building a dashboard using AngularJS
Building a dashboard using AngularJSBuilding a dashboard using AngularJS
Building a dashboard using AngularJS
 
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
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
 
Introduction of angular js
Introduction of angular jsIntroduction of angular js
Introduction of angular js
 
Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIWorkshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte III
 
Angular js-crash-course
Angular js-crash-courseAngular js-crash-course
Angular js-crash-course
 
Angular js
Angular jsAngular js
Angular js
 
Angular JS Basics.
Angular JS Basics.Angular JS Basics.
Angular JS Basics.
 
AngularJs
AngularJsAngularJs
AngularJs
 
Angularjs 131211063348-phpapp01
Angularjs 131211063348-phpapp01Angularjs 131211063348-phpapp01
Angularjs 131211063348-phpapp01
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development Guide
 

More from Nir Kaufman

Angular Dependency Injection
Angular Dependency InjectionAngular Dependency Injection
Angular Dependency InjectionNir Kaufman
 
Angular Prestige: Less-known API and techniques
Angular Prestige: Less-known API and techniquesAngular Prestige: Less-known API and techniques
Angular Prestige: Less-known API and techniquesNir Kaufman
 
Angular CLI custom builders
Angular CLI custom buildersAngular CLI custom builders
Angular CLI custom buildersNir Kaufman
 
Electronic music 101 for developers
Electronic music 101 for developersElectronic music 101 for developers
Electronic music 101 for developersNir Kaufman
 
Nestjs MasterClass Slides
Nestjs MasterClass SlidesNestjs MasterClass Slides
Nestjs MasterClass SlidesNir Kaufman
 
Redux pattens - JSHeroes 2018
Redux pattens - JSHeroes 2018Redux pattens - JSHeroes 2018
Redux pattens - JSHeroes 2018Nir Kaufman
 
Angular EE - Special Workshop by Nir Kaufman
Angular EE - Special Workshop by Nir KaufmanAngular EE - Special Workshop by Nir Kaufman
Angular EE - Special Workshop by Nir KaufmanNir Kaufman
 
Boosting Angular runtime performance
Boosting Angular runtime performanceBoosting Angular runtime performance
Boosting Angular runtime performanceNir Kaufman
 
Decorators in js
Decorators in jsDecorators in js
Decorators in jsNir Kaufman
 
Styling recipes for Angular components
Styling recipes for Angular componentsStyling recipes for Angular components
Styling recipes for Angular componentsNir Kaufman
 
Introduction To Angular's reactive forms
Introduction To Angular's reactive formsIntroduction To Angular's reactive forms
Introduction To Angular's reactive formsNir Kaufman
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready Nir Kaufman
 

More from Nir Kaufman (13)

Angular Dependency Injection
Angular Dependency InjectionAngular Dependency Injection
Angular Dependency Injection
 
Angular Prestige: Less-known API and techniques
Angular Prestige: Less-known API and techniquesAngular Prestige: Less-known API and techniques
Angular Prestige: Less-known API and techniques
 
Angular CLI custom builders
Angular CLI custom buildersAngular CLI custom builders
Angular CLI custom builders
 
Electronic music 101 for developers
Electronic music 101 for developersElectronic music 101 for developers
Electronic music 101 for developers
 
Nestjs MasterClass Slides
Nestjs MasterClass SlidesNestjs MasterClass Slides
Nestjs MasterClass Slides
 
Redux pattens - JSHeroes 2018
Redux pattens - JSHeroes 2018Redux pattens - JSHeroes 2018
Redux pattens - JSHeroes 2018
 
Angular EE - Special Workshop by Nir Kaufman
Angular EE - Special Workshop by Nir KaufmanAngular EE - Special Workshop by Nir Kaufman
Angular EE - Special Workshop by Nir Kaufman
 
Boosting Angular runtime performance
Boosting Angular runtime performanceBoosting Angular runtime performance
Boosting Angular runtime performance
 
Decorators in js
Decorators in jsDecorators in js
Decorators in js
 
Styling recipes for Angular components
Styling recipes for Angular componentsStyling recipes for Angular components
Styling recipes for Angular components
 
Introduction To Angular's reactive forms
Introduction To Angular's reactive formsIntroduction To Angular's reactive forms
Introduction To Angular's reactive forms
 
Angular redux
Angular reduxAngular redux
Angular redux
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready
 

Recently uploaded

21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERNRonnelBaroc
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...shaiyuvasv
 
H3 Platform CXL Solution_Memory Fabric Forum.pptx
H3 Platform CXL Solution_Memory Fabric Forum.pptxH3 Platform CXL Solution_Memory Fabric Forum.pptx
H3 Platform CXL Solution_Memory Fabric Forum.pptxMemory Fabric Forum
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfSafe Software
 
My self introduction to know others abut me
My self  introduction to know others abut meMy self  introduction to know others abut me
My self introduction to know others abut meManoj Prabakar B
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxMaarten Balliauw
 
Breaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologyBreaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologySafe Software
 
5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!
5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!
5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!XfilesPro
 
Enhancing SaaS Performance: A Hands-on Workshop for Partners
Enhancing SaaS Performance: A Hands-on Workshop for PartnersEnhancing SaaS Performance: A Hands-on Workshop for Partners
Enhancing SaaS Performance: A Hands-on Workshop for PartnersThousandEyes
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolProduct School
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringMassimo Talia
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVARobert McDermott
 
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxLeveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxVotarikari Shravan
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, GoogleISPMAIndia
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys VasylievFwdays
 
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17Ana-Maria Mihalceanu
 
2024 February Patch Tuesday
2024 February Patch Tuesday2024 February Patch Tuesday
2024 February Patch TuesdayIvanti
 
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Umar Saif
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Adrian Sanabria
 

Recently uploaded (20)

21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
 
H3 Platform CXL Solution_Memory Fabric Forum.pptx
H3 Platform CXL Solution_Memory Fabric Forum.pptxH3 Platform CXL Solution_Memory Fabric Forum.pptx
H3 Platform CXL Solution_Memory Fabric Forum.pptx
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
 
My self introduction to know others abut me
My self  introduction to know others abut meMy self  introduction to know others abut me
My self introduction to know others abut me
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptx
 
Breaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologyBreaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI Technology
 
5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!
5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!
5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!
 
Enhancing SaaS Performance: A Hands-on Workshop for Partners
Enhancing SaaS Performance: A Hands-on Workshop for PartnersEnhancing SaaS Performance: A Hands-on Workshop for Partners
Enhancing SaaS Performance: A Hands-on Workshop for Partners
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product School
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineering
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVA
 
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxLeveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
 
5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev
 
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
 
2024 February Patch Tuesday
2024 February Patch Tuesday2024 February Patch Tuesday
2024 February Patch Tuesday
 
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
 

Angularjs - lazy loading techniques

  • 2. Introduction Nir Kaufman nirkaufman@gmail.com AngularJS infrastructures - lazy loading techniques: 1. Introducing the lazy loading challenges with AngularJS 2. Review a working demo project nirkaufman@gmail.com
  • 3. overview AngularJS encourage us to break our code into smaller pieces. Modules services directives controllers filters constants nirkaufman@gmail.com
  • 4. overview Separating your code into multiple files considered a best practice when building large apps with angular. Angular seed project: ❖ js/ angular.module('myApp.controllers', []). ■ ■ ■ ■ ❖ controllers.js services.js directives.js filters.js partials/ ■ partial1.html ■ partial2.html controller('MyCtrl1', function() { }) .controller('MyCtrl2', function() { }); nirkaufman@gmail.com
  • 5. overview We can define our modules as dependencies: angular.module('myApp',['ngRoute', 'myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', ’ngRoute’, ’ngResource’, ’ui.bootstrap’, ]). nirkaufman@gmail.com
  • 6. overview but we must load all of our resources ahead: <script src="lib/angular.js"></script> <script src="lib/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script> <script src="js/filters.js"></script> <script src="js/directives.js"></script> ……………….. <script src="lib/angular-resource.js"></script> <script src="lib/angular-bootstrap.js"></script> <script src="lib/underscore.js"></script> nirkaufman@gmail.com
  • 7. overview All components must register against our module on bootstrap. otherwise we can't use them. Error: Argument ‘myController’ is not a function, got undefined register Lazy Loading Angular components nirkaufman@gmail.com
  • 8. solution We need to answer those 3 questions in order to solve this challenge: ● How to lazy load scripts async ? ● How to register our components against our module after bootstrap? ● When & where the actual loading occurs? nirkaufman@gmail.com
  • 9. loading RequireJS provides a clean way to load and manage dependencies for our applications. <script data-main="main" src="require.js"></script> define(function () { // module code }) require([‘module’], function (module) { // use this module }) http://requirejs.org/ nirkaufman@gmail.com
  • 10. register Components register against the module in the config phase using providers. For instance, we can register our controller manually using the ‘$controllerProvider’: angular.module('moduleName', []) .config(function($controllerProvider) { $controllerProvider.register('Ctrl', function () { // controller code }) }); nirkaufman@gmail.com
  • 11. register All components can be registered with their matching provider methods: // services can register with $provide $provide.service() $provide.factory(), $provide.value(), $provide.constant(), // other components use specific providers $controllerProvider.resgister() $animateProvider.resgister() $filterProvider.resgister() $compileProvider.directive() nirkaufman@gmail.com
  • 12. register we need to hold a reference to this provider in order to use it later in our code: var app = angular.module('moduleName', []) .config(function($controllerProvider) { app.loadController = $controllerProvider.register; }) }); app.loadController(‘someCtrl’, function ($scope) {}) nirkaufman@gmail.com
  • 13. when to load Where in the application should the actual loading take place? ● when routing to a view - $routeProvider ● when loading content - <ng-include> ● in response to event - like click or hover nirkaufman@gmail.com
  • 14. routing The route object contain a ‘resolve’ property that can accept a map of promises and wait for them to resolve before performing the route angular.module('moduleName', []) .config(function($routeProvider) { $routeProvider.when('/', { templateUrl: 'view.html', controller : 'controller.js', resolve : // promise }) }) }); nirkaufman@gmail.com
  • 15. routing If every view managed by a controller we can reflect that in our project structure by packing them together & come up with naming conventions: ❖ views ➢ view-name ■ view-name.html ■ view-name.js .controller(‘viewNameCtrl’, …. ➢ another-view ■ another-view-name.html ■ another-view-name.js nirkaufman@gmail.com
  • 16. events We can load our dependencies as a reaction to an event. we can be creative and load our resources depending on the user behaviour: ● load only when a user start to fill a form ● load by mouse position ● load when a response comming back from the server nirkaufman@gmail.com
  • 17. modules What about module loading? ocLazyLoad is probably the best solution for lazy loading angular modules (for now): ● Dependencies are automatically loaded ● Debugger like (no eval code) ● The ability to mix normal boot and load on demand ● Load via the service or the directive ● Use your own async loader (requireJS, script.js ...) https://github.com/ocombe/ocLazyLoad nirkaufman@gmail.com
  • 18. summary Lazy loading in Angular can be achived today with minimum effort. to keep our loading infrastructure flexible: 1. keep the loading logic in separated services this will make our life easier when this feature will be officially supported 2. use naming conventions this way developers can integrate more easily when moving between projects nirkaufman@gmail.com
  • 19. summary Thank You! Demo project source code: https://github.com/nirkaufman/lazyLoadingDemo nirkaufman@gmail.com