SlideShare a Scribd company logo
Dynamic content with
Angular
a journey with @filipbech
@IMPACTdigitaldk
Filip
@filipbech
🇩🇰
#weAreHiring #Denmark
https://www.facebook.com/groups/ngAarhus/
https://developers.google.com/experts/people/filip-bruun-bech-larsen
…enough about me
let’s use Angular for dynamic content
Why
• We build for CMS-editors, so we need Angular to
behave in that context
• When Angular2 (old name) was announced it
seemed so awesome…
Let’s do like angular 1
need to bootstrap a component
…but we have no root app?
Bootstrapping multiple
applications
• its a little harder to maintain state between
applications (but possible)
• the cms now needs to know what components are
angular-components, so they can all be
bootstrapped.(and their DOM-nodes if multiple of the
same component)
Initial data
• We need to feed data (settings, initial data) into
some of the components (from the cms), and put
content inside them.
Because
• Root-components cannot have inputs
• Root-components cannot use content-projection
(transclusion)
https://github.com/angular/angular/issues/1858
How about a <body>-
component then?
Eeeewwwww
• even though it works - it feels terrible and wrong!
• and we need the parser at runtime
• so no AOT and bad perf
We need a SPA
Single Page Application
• so we can also share state between routes
• animate route-changes
• and much more…
Demo-time
to heighten the suspense…
It starts with a router
…thats not very dynamic
We have too many routes
with no patterns
• “/“ is a frontpage
• “/om/os” is a content-page
• “/mejeri“ is a category-page
• “/mejeri/ost“ is a sub-category-page
• “/ost-i-skiver-mild-13-cheasy-200-g” is a product-page
So I talked to the Angular
team…
…let the CMS
output route-config
Two issues with that
approach
• Need to build and invalidate the bundle’s cache
every time an editor makes a change
• Users get stuck on the route-config they get at first
load
One route to rule them all
**-route + generic
PageComponent
Get the data in a
resolve
PageResolve is just a class with resolve(route)-method on it
In angular 1.x we could use templateFactory and
select a template based on the api-response
But we cannot do that in Angular 2+, because
there is no template-parser at runtime
All possible
PageComponents with
individual *ngIf’s
Eeeewwwww
Even though all the *ngIfs in the template are AOT
compiled into something more acceptable…
It still seems wrong to have it in the template!
but (for now) it
works…
until you navigate
around
(nothing happens)
you’re not changing the
route
just its options
(so: no new resolve, no new ngOnInit)
Refactoring
• Listen for route-changes and handle resolving data
manually
The problem cascades
• When we go from one product-detail-page to
another product-detail-page…
• Refactor init-logic into ngOnChanges
Then came rc4
ComponentFactoryResolver adds beauty
and power to generic components…
The theory
[generic-page]
directive
What components
should be available?
or (if you are building a lib)
ANALYSE_FOR_ENTRY_COMPONE
NTS
Watch Sean Landsmans talk from ngVikings:
https://opbeat.com/community/posts/understanding-aot-and-dynamic-components-in-angular-by-sean-landsman/
Sweeeet
all we ever wanted
Without all the ugly
we control components-instantiation, so
they can use regular ngOnInit
AOT
#justWorks
Add PageComponents to
ngModule entryComponents
Faster and lighter
Initial parse goes from 450ms to 250ms
Without AOT
With AOT
Same approach for the
dynamic content spots
Server Side Rendering
SEO, social previews
and
faster perceived load-
times
Angular Universal is so hot right now… (going into core)
Hard to wrap your
head around universal
The idea
• server.module and a client.module
• they both import the app.module
• server and client module then replaces the
dependencies (through the universal-module) that
are different with appropriate environment-versions
(eg. xhr or node-fetch, DOM or virtual-dom)
Can’t touch this (the
DOM)
(no window, querySelector, localstorage without wrappers)
browser.module.ts and node.module.ts
Maintaining state
we want to maintain state, so we don’t re-do all fetches
and calculations when the client boots up
enter UNIVERSAL_CACHE
We made it to nirvana
https://github.com/filipbech/ng2-dynamic-spa
Thank you
@filipbech
@IMPACTdigitaldk
I’ll tweet a link to the slides in a minute
Dynamic content with Angular

More Related Content

What's hot

The Bleeding Edge - Whats New in Angular 2
The Bleeding Edge - Whats New in Angular 2The Bleeding Edge - Whats New in Angular 2
The Bleeding Edge - Whats New in Angular 2
Lohith Goudagere Nagaraj
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Polidea
 
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
Sébastien Levert
 
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
Sébastien Levert
 
Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI
Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPIMarkup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI
Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI
c4rl
 
EEF : Sexy Properties, Wizards and Views - EclipseCon 11
EEF : Sexy Properties, Wizards and Views - EclipseCon 11EEF : Sexy Properties, Wizards and Views - EclipseCon 11
EEF : Sexy Properties, Wizards and Views - EclipseCon 11Chauvin Mariot
 
A Gentle Introduction to GoOnRails
A Gentle Introduction to GoOnRailsA Gentle Introduction to GoOnRails
A Gentle Introduction to GoOnRails
Bin Joy
 
SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure Functions
SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure FunctionsSharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure Functions
SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure Functions
Sébastien Levert
 
An Intro to Angular 2
An Intro to Angular 2An Intro to Angular 2
An Intro to Angular 2
Ron Heft
 
Backslant or python templates engines design guidelines.
Backslant or python templates engines design guidelines.Backslant or python templates engines design guidelines.
Backslant or python templates engines design guidelines.
Mikhail Krivushin
 
Angular 2 Essential Training
Angular 2 Essential Training Angular 2 Essential Training
Angular 2 Essential Training
Patrick Schroeder
 
Dynamic input tables lwc vs aura vs. visualforce
Dynamic input tables  lwc vs aura vs. visualforceDynamic input tables  lwc vs aura vs. visualforce
Dynamic input tables lwc vs aura vs. visualforce
Mike Tetlow
 
Angular 2 - An Introduction
Angular 2 - An IntroductionAngular 2 - An Introduction
Angular 2 - An Introduction
NexThoughts Technologies
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?
Troy Miles
 
Say hello world with angular 5
Say hello world with angular 5Say hello world with angular 5
Say hello world with angular 5
Abhishek Mallick
 
Into to GraphQL
Into to GraphQLInto to GraphQL
Into to GraphQL
shobot
 
GMF : Create your graphical DSL - EclipseCon 11
GMF : Create your graphical DSL - EclipseCon 11GMF : Create your graphical DSL - EclipseCon 11
GMF : Create your graphical DSL - EclipseCon 11Chauvin Mariot
 
EclipseCon-Europe 2013: Making the Eclipse IDE fun again
EclipseCon-Europe 2013: Making the Eclipse IDE fun againEclipseCon-Europe 2013: Making the Eclipse IDE fun again
EclipseCon-Europe 2013: Making the Eclipse IDE fun again
martinlippert
 
ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET
Troy Miles
 

What's hot (20)

The Bleeding Edge - Whats New in Angular 2
The Bleeding Edge - Whats New in Angular 2The Bleeding Edge - Whats New in Angular 2
The Bleeding Edge - Whats New in Angular 2
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
 
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
 
Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI
Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPIMarkup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI
Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI
 
EEF : Sexy Properties, Wizards and Views - EclipseCon 11
EEF : Sexy Properties, Wizards and Views - EclipseCon 11EEF : Sexy Properties, Wizards and Views - EclipseCon 11
EEF : Sexy Properties, Wizards and Views - EclipseCon 11
 
A Gentle Introduction to GoOnRails
A Gentle Introduction to GoOnRailsA Gentle Introduction to GoOnRails
A Gentle Introduction to GoOnRails
 
SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure Functions
SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure FunctionsSharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure Functions
SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure Functions
 
Suggestatron
SuggestatronSuggestatron
Suggestatron
 
An Intro to Angular 2
An Intro to Angular 2An Intro to Angular 2
An Intro to Angular 2
 
Backslant or python templates engines design guidelines.
Backslant or python templates engines design guidelines.Backslant or python templates engines design guidelines.
Backslant or python templates engines design guidelines.
 
Angular 2 Essential Training
Angular 2 Essential Training Angular 2 Essential Training
Angular 2 Essential Training
 
Dynamic input tables lwc vs aura vs. visualforce
Dynamic input tables  lwc vs aura vs. visualforceDynamic input tables  lwc vs aura vs. visualforce
Dynamic input tables lwc vs aura vs. visualforce
 
Angular 2 - An Introduction
Angular 2 - An IntroductionAngular 2 - An Introduction
Angular 2 - An Introduction
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?
 
Say hello world with angular 5
Say hello world with angular 5Say hello world with angular 5
Say hello world with angular 5
 
Into to GraphQL
Into to GraphQLInto to GraphQL
Into to GraphQL
 
GMF : Create your graphical DSL - EclipseCon 11
GMF : Create your graphical DSL - EclipseCon 11GMF : Create your graphical DSL - EclipseCon 11
GMF : Create your graphical DSL - EclipseCon 11
 
EclipseCon-Europe 2013: Making the Eclipse IDE fun again
EclipseCon-Europe 2013: Making the Eclipse IDE fun againEclipseCon-Europe 2013: Making the Eclipse IDE fun again
EclipseCon-Europe 2013: Making the Eclipse IDE fun again
 
ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET
 

Viewers also liked

Observables - the why, what & how
Observables - the why, what & howObservables - the why, what & how
Observables - the why, what & how
Filip Bruun Bech-Larsen
 
Creating a social movement
Creating a social movementCreating a social movement
Creating a social movement
Helen Bevan
 
10 Tips for failing at microservices
10 Tips for failing at microservices10 Tips for failing at microservices
10 Tips for failing at microservices
David Schmitz
 
Project EU XXI: Future Europe: Social Europe™, Digital Europe™, Green Europe™...
Project EU XXI: Future Europe: Social Europe™, Digital Europe™, Green Europe™...Project EU XXI: Future Europe: Social Europe™, Digital Europe™, Green Europe™...
Project EU XXI: Future Europe: Social Europe™, Digital Europe™, Green Europe™...
Azamat Abdoullaev
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
Aymeric Bouillat
 
The surprising stats and facts every school leader needs to know about IRIS C...
The surprising stats and facts every school leader needs to know about IRIS C...The surprising stats and facts every school leader needs to know about IRIS C...
The surprising stats and facts every school leader needs to know about IRIS C...
IRIS Connect
 
10 Things You Didn’t Know About Mobile Email from Litmus & HubSpot
 10 Things You Didn’t Know About Mobile Email from Litmus & HubSpot 10 Things You Didn’t Know About Mobile Email from Litmus & HubSpot
10 Things You Didn’t Know About Mobile Email from Litmus & HubSpot
HubSpot
 
How to Earn the Attention of Today's Buyer
How to Earn the Attention of Today's BuyerHow to Earn the Attention of Today's Buyer
How to Earn the Attention of Today's Buyer
HubSpot
 
25 Discovery Call Questions
25 Discovery Call Questions25 Discovery Call Questions
25 Discovery Call Questions
HubSpot
 
Modern Prospecting Techniques for Connecting with Prospects (from Sales Hacke...
Modern Prospecting Techniques for Connecting with Prospects (from Sales Hacke...Modern Prospecting Techniques for Connecting with Prospects (from Sales Hacke...
Modern Prospecting Techniques for Connecting with Prospects (from Sales Hacke...
HubSpot
 
Class 1: Email Marketing Certification course: Email Marketing and Your Business
Class 1: Email Marketing Certification course: Email Marketing and Your BusinessClass 1: Email Marketing Certification course: Email Marketing and Your Business
Class 1: Email Marketing Certification course: Email Marketing and Your Business
HubSpot
 
Behind the Scenes: Launching HubSpot Tokyo
Behind the Scenes: Launching HubSpot TokyoBehind the Scenes: Launching HubSpot Tokyo
Behind the Scenes: Launching HubSpot Tokyo
HubSpot
 
HubSpot Diversity Data 2016
HubSpot Diversity Data 2016HubSpot Diversity Data 2016
HubSpot Diversity Data 2016
HubSpot
 
Why People Block Ads (And What It Means for Marketers and Advertisers) [New R...
Why People Block Ads (And What It Means for Marketers and Advertisers) [New R...Why People Block Ads (And What It Means for Marketers and Advertisers) [New R...
Why People Block Ads (And What It Means for Marketers and Advertisers) [New R...
HubSpot
 
What is Inbound Recruiting?
What is Inbound Recruiting?What is Inbound Recruiting?
What is Inbound Recruiting?
HubSpot
 
Add the Women Back: Wikipedia Edit-a-Thon
Add the Women Back: Wikipedia Edit-a-ThonAdd the Women Back: Wikipedia Edit-a-Thon
Add the Women Back: Wikipedia Edit-a-Thon
HubSpot
 
Frontend development of the (current) future
Frontend development of the (current) futureFrontend development of the (current) future
Frontend development of the (current) future
Filip Bruun Bech-Larsen
 
Cloud conf keynote - Orchestrating Least Privilege
Cloud conf keynote - Orchestrating Least PrivilegeCloud conf keynote - Orchestrating Least Privilege
Cloud conf keynote - Orchestrating Least Privilege
Diogo Mónica
 
CA Helps Customers Implement DevOps
CA Helps Customers Implement DevOpsCA Helps Customers Implement DevOps
CA Helps Customers Implement DevOps
CA Technologies
 
Softchoice Discovery Series: Cloud Cost Governance
Softchoice Discovery Series: Cloud Cost GovernanceSoftchoice Discovery Series: Cloud Cost Governance
Softchoice Discovery Series: Cloud Cost Governance
Softchoice Corporation
 

Viewers also liked (20)

Observables - the why, what & how
Observables - the why, what & howObservables - the why, what & how
Observables - the why, what & how
 
Creating a social movement
Creating a social movementCreating a social movement
Creating a social movement
 
10 Tips for failing at microservices
10 Tips for failing at microservices10 Tips for failing at microservices
10 Tips for failing at microservices
 
Project EU XXI: Future Europe: Social Europe™, Digital Europe™, Green Europe™...
Project EU XXI: Future Europe: Social Europe™, Digital Europe™, Green Europe™...Project EU XXI: Future Europe: Social Europe™, Digital Europe™, Green Europe™...
Project EU XXI: Future Europe: Social Europe™, Digital Europe™, Green Europe™...
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
 
The surprising stats and facts every school leader needs to know about IRIS C...
The surprising stats and facts every school leader needs to know about IRIS C...The surprising stats and facts every school leader needs to know about IRIS C...
The surprising stats and facts every school leader needs to know about IRIS C...
 
10 Things You Didn’t Know About Mobile Email from Litmus & HubSpot
 10 Things You Didn’t Know About Mobile Email from Litmus & HubSpot 10 Things You Didn’t Know About Mobile Email from Litmus & HubSpot
10 Things You Didn’t Know About Mobile Email from Litmus & HubSpot
 
How to Earn the Attention of Today's Buyer
How to Earn the Attention of Today's BuyerHow to Earn the Attention of Today's Buyer
How to Earn the Attention of Today's Buyer
 
25 Discovery Call Questions
25 Discovery Call Questions25 Discovery Call Questions
25 Discovery Call Questions
 
Modern Prospecting Techniques for Connecting with Prospects (from Sales Hacke...
Modern Prospecting Techniques for Connecting with Prospects (from Sales Hacke...Modern Prospecting Techniques for Connecting with Prospects (from Sales Hacke...
Modern Prospecting Techniques for Connecting with Prospects (from Sales Hacke...
 
Class 1: Email Marketing Certification course: Email Marketing and Your Business
Class 1: Email Marketing Certification course: Email Marketing and Your BusinessClass 1: Email Marketing Certification course: Email Marketing and Your Business
Class 1: Email Marketing Certification course: Email Marketing and Your Business
 
Behind the Scenes: Launching HubSpot Tokyo
Behind the Scenes: Launching HubSpot TokyoBehind the Scenes: Launching HubSpot Tokyo
Behind the Scenes: Launching HubSpot Tokyo
 
HubSpot Diversity Data 2016
HubSpot Diversity Data 2016HubSpot Diversity Data 2016
HubSpot Diversity Data 2016
 
Why People Block Ads (And What It Means for Marketers and Advertisers) [New R...
Why People Block Ads (And What It Means for Marketers and Advertisers) [New R...Why People Block Ads (And What It Means for Marketers and Advertisers) [New R...
Why People Block Ads (And What It Means for Marketers and Advertisers) [New R...
 
What is Inbound Recruiting?
What is Inbound Recruiting?What is Inbound Recruiting?
What is Inbound Recruiting?
 
Add the Women Back: Wikipedia Edit-a-Thon
Add the Women Back: Wikipedia Edit-a-ThonAdd the Women Back: Wikipedia Edit-a-Thon
Add the Women Back: Wikipedia Edit-a-Thon
 
Frontend development of the (current) future
Frontend development of the (current) futureFrontend development of the (current) future
Frontend development of the (current) future
 
Cloud conf keynote - Orchestrating Least Privilege
Cloud conf keynote - Orchestrating Least PrivilegeCloud conf keynote - Orchestrating Least Privilege
Cloud conf keynote - Orchestrating Least Privilege
 
CA Helps Customers Implement DevOps
CA Helps Customers Implement DevOpsCA Helps Customers Implement DevOps
CA Helps Customers Implement DevOps
 
Softchoice Discovery Series: Cloud Cost Governance
Softchoice Discovery Series: Cloud Cost GovernanceSoftchoice Discovery Series: Cloud Cost Governance
Softchoice Discovery Series: Cloud Cost Governance
 

Similar to Dynamic content with Angular

The future of templating and frameworks
The future of templating and frameworksThe future of templating and frameworks
The future of templating and frameworks
Filip Bruun Bech-Larsen
 
Whats next in templating
Whats next in templatingWhats next in templating
Whats next in templating
Filip Bruun Bech-Larsen
 
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure FunctionsEuropean Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
Sébastien Levert
 
Whats next in templating
Whats next in templatingWhats next in templating
Whats next in templating
Filip Bruun Bech-Larsen
 
European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...
European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...
European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...
Sébastien Levert
 
Creating a SPA blog withAngular and Cloud Firestore
Creating a SPA blog withAngular and Cloud FirestoreCreating a SPA blog withAngular and Cloud Firestore
Creating a SPA blog withAngular and Cloud Firestore
TMME - TECH MEETUP FOR MYANMAR ENGINEERS IN JP
 
Onion Architecture and the Blog
Onion Architecture and the BlogOnion Architecture and the Blog
Onion Architecture and the Blog
barryosull
 
Building a blog with an Onion Architecture
Building a blog with an Onion ArchitectureBuilding a blog with an Onion Architecture
Building a blog with an Onion Architecture
Barry O Sullivan
 
SharePoint Framework, Angular and Azure Functions
SharePoint Framework, Angular and Azure FunctionsSharePoint Framework, Angular and Azure Functions
SharePoint Framework, Angular and Azure Functions
Sébastien Levert
 
Angular 2 - How we got here?
Angular 2 - How we got here?Angular 2 - How we got here?
Angular 2 - How we got here?
Marios Fakiolas
 
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
Sébastien Levert
 
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
Sébastien Levert
 
AngularConf2016 - A leap of faith !?
AngularConf2016 - A leap of faith !?AngularConf2016 - A leap of faith !?
AngularConf2016 - A leap of faith !?
Alessandro Giorgetti
 
Angular2 with type script
Angular2 with type scriptAngular2 with type script
Angular2 with type script
Ravi Mone
 
Evolving your api architecture with the strangler pattern
Evolving your api architecture with the strangler patternEvolving your api architecture with the strangler pattern
Evolving your api architecture with the strangler pattern
dwcarter74
 
How Does Angular Work?
How Does Angular Work?How Does Angular Work?
How Does Angular Work?
Albiorix Technology
 
Angular interview questions
Angular interview questionsAngular interview questions
Angular interview questions
Goa App
 
Angular 2
Angular 2Angular 2
Angular Best Practices To Build Clean and Performant Web Applications
Angular Best Practices To Build Clean and Performant Web ApplicationsAngular Best Practices To Build Clean and Performant Web Applications
Angular Best Practices To Build Clean and Performant Web Applications
Albiorix Technology
 

Similar to Dynamic content with Angular (20)

The future of templating and frameworks
The future of templating and frameworksThe future of templating and frameworks
The future of templating and frameworks
 
Whats next in templating
Whats next in templatingWhats next in templating
Whats next in templating
 
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure FunctionsEuropean Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
 
Whats next in templating
Whats next in templatingWhats next in templating
Whats next in templating
 
European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...
European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...
European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...
 
Creating a SPA blog withAngular and Cloud Firestore
Creating a SPA blog withAngular and Cloud FirestoreCreating a SPA blog withAngular and Cloud Firestore
Creating a SPA blog withAngular and Cloud Firestore
 
Onion Architecture and the Blog
Onion Architecture and the BlogOnion Architecture and the Blog
Onion Architecture and the Blog
 
Building a blog with an Onion Architecture
Building a blog with an Onion ArchitectureBuilding a blog with an Onion Architecture
Building a blog with an Onion Architecture
 
SharePoint Framework, Angular and Azure Functions
SharePoint Framework, Angular and Azure FunctionsSharePoint Framework, Angular and Azure Functions
SharePoint Framework, Angular and Azure Functions
 
Angular 2 - How we got here?
Angular 2 - How we got here?Angular 2 - How we got here?
Angular 2 - How we got here?
 
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
 
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
 
AngularConf2016 - A leap of faith !?
AngularConf2016 - A leap of faith !?AngularConf2016 - A leap of faith !?
AngularConf2016 - A leap of faith !?
 
Angular2 with type script
Angular2 with type scriptAngular2 with type script
Angular2 with type script
 
speach
speachspeach
speach
 
Evolving your api architecture with the strangler pattern
Evolving your api architecture with the strangler patternEvolving your api architecture with the strangler pattern
Evolving your api architecture with the strangler pattern
 
How Does Angular Work?
How Does Angular Work?How Does Angular Work?
How Does Angular Work?
 
Angular interview questions
Angular interview questionsAngular interview questions
Angular interview questions
 
Angular 2
Angular 2Angular 2
Angular 2
 
Angular Best Practices To Build Clean and Performant Web Applications
Angular Best Practices To Build Clean and Performant Web ApplicationsAngular Best Practices To Build Clean and Performant Web Applications
Angular Best Practices To Build Clean and Performant Web Applications
 

More from Filip Bruun Bech-Larsen

Webcomponents from 0-100 - with Google's Lit
Webcomponents from 0-100 - with Google's LitWebcomponents 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 friendWebcomponents 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 HeadlessContent as a Service with Umbraco Headless
Content as a Service with Umbraco Headless
Filip Bruun Bech-Larsen
 
Frameworks and webcomponents
Frameworks and webcomponentsFrameworks and webcomponents
Frameworks and webcomponents
Filip Bruun Bech-Larsen
 
Whats next in clientside templating
Whats next in clientside templatingWhats next in clientside templating
Whats next in clientside templating
Filip Bruun Bech-Larsen
 
Whats next in clientside templating
Whats next in clientside templatingWhats next in clientside templating
Whats next in clientside templating
Filip Bruun Bech-Larsen
 
Future of the Web
Future of the WebFuture of the Web
Future of the Web
Filip Bruun Bech-Larsen
 
Diversity at impact
Diversity at impactDiversity at impact
Diversity at impact
Filip Bruun Bech-Larsen
 
The Future of the web
The Future of the webThe Future of the web
The Future of the web
Filip Bruun Bech-Larsen
 
Frontend development of the (current) future
Frontend development of the (current) futureFrontend 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 2017Commerce and the browser in 2017
Commerce and the browser in 2017
Filip Bruun Bech-Larsen
 
Frontend State of the union
Frontend State of the unionFrontend State of the union
Frontend State of the union
Filip Bruun Bech-Larsen
 
AngularJS best practices
AngularJS best practicesAngularJS best practices
AngularJS best practices
Filip Bruun Bech-Larsen
 
Angular2 workshop
Angular2 workshopAngular2 workshop
Angular2 workshop
Filip Bruun Bech-Larsen
 
Progressive Web Apps og Payment Request
Progressive Web Apps og Payment RequestProgressive Web Apps og Payment Request
Progressive Web Apps og Payment Request
Filip Bruun Bech-Larsen
 
Spangulumbraco
SpangulumbracoSpangulumbraco
Spangulumbraco
Filip Bruun Bech-Larsen
 
Web development post io2016
Web development post io2016Web development post io2016
Web development post io2016
Filip Bruun Bech-Larsen
 
Observables in angular2
Observables in angular2Observables in angular2
Observables in angular2
Filip Bruun Bech-Larsen
 
Frontender in-2016
Frontender in-2016Frontender in-2016
Frontender in-2016
Filip Bruun Bech-Larsen
 
[DK] SPA med angular
[DK] SPA med angular[DK] SPA med angular
[DK] SPA med 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 LitWebcomponents 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 friendWebcomponents are your frameworks best friend
Webcomponents are your frameworks best friend
 
Content as a Service with Umbraco Headless
Content as a Service with Umbraco HeadlessContent as a Service with Umbraco Headless
Content as a Service with Umbraco Headless
 
Frameworks and webcomponents
Frameworks and webcomponentsFrameworks and webcomponents
Frameworks and webcomponents
 
Whats next in clientside templating
Whats next in clientside templatingWhats next in clientside templating
Whats next in clientside templating
 
Whats next in clientside templating
Whats next in clientside templatingWhats next in clientside templating
Whats next in clientside templating
 
Future of the Web
Future of the WebFuture of the Web
Future of the Web
 
Diversity at impact
Diversity at impactDiversity at impact
Diversity at impact
 
The Future of the web
The Future of the webThe Future of the web
The Future of the web
 
Frontend development of the (current) future
Frontend development of the (current) futureFrontend development of the (current) future
Frontend development of the (current) future
 
Commerce and the browser in 2017
Commerce and the browser in 2017Commerce and the browser in 2017
Commerce and the browser in 2017
 
Frontend State of the union
Frontend State of the unionFrontend State of the union
Frontend State of the union
 
AngularJS best practices
AngularJS best practicesAngularJS best practices
AngularJS best practices
 
Angular2 workshop
Angular2 workshopAngular2 workshop
Angular2 workshop
 
Progressive Web Apps og Payment Request
Progressive Web Apps og Payment RequestProgressive Web Apps og Payment Request
Progressive Web Apps og Payment Request
 
Spangulumbraco
SpangulumbracoSpangulumbraco
Spangulumbraco
 
Web development post io2016
Web development post io2016Web development post io2016
Web development post io2016
 
Observables in angular2
Observables in angular2Observables in angular2
Observables in angular2
 
Frontender in-2016
Frontender in-2016Frontender in-2016
Frontender in-2016
 
[DK] SPA med angular
[DK] SPA med angular[DK] SPA med angular
[DK] SPA med angular
 

Recently uploaded

PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
g2nightmarescribd
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 

Recently uploaded (20)

PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 

Dynamic content with Angular