Developing Single Page Applications on Plone using AngularJS

•

1 gefällt mir•1,098 views

Alin Voinea

A short introduction to using the AngularJS framework to simplify development of complex JS powered edit interfaces

Software

HI!
 OLIMPIU ROB
4+ years experience with Plone
~1 year experience with AngularJS

DEVELOPING SINGLE PAGE APPLICATIONS
ON PLONE USING
AngularJS

SPA CHALLENGES
DOM manipulation
Browser History
Routing
Module and view loading
Data binding
Caching
Input validation

JAVASCRIPT SOLUTIONS
Ember.js
ExtJS
React
Meteor
AngularJS

ANGULARJS AND PLONE
collective.js.angular
Bower

PLONE INTEGRATION
- Plone 5 productoli.areadme

VIEW CHAMELEON TEMPLATE
INTEGRATING STATIC RESOURCES

HOW DOES ADDING A HEADING WORK?
The template

HOW DOES ADDING A HEADING WORK?
The function inside the controller

USING THE TINYMCE PATTERN
THE ANGULAR DIRECTIVE

WHERE TO GO NEXT
Angular documentation site:
Code School's Shaping up with Angular.JS:
Angular's github page:
https://docs.angularjs.org/guide
http://campus.codeschool.com/courses/shaping-up-
with-angular-js/intro
https://github.com/angular/angular.js

Empfohlen

Novidades Angular 4.x e CLI Loiane Groner

European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...Sébastien Levert

DevOpsDays Cape Town 2018 - Serverless with Google App EngineGünter Grodotzki

SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure FunctionsSébastien Levert

Flex And RailsTony Hillerson

180929_NextBuild_From_Java_to_KotlinPaulien van Alst

Getting Started with the Angular 2 CLIJim Lynch

React vs angular (mobile first battle)Michael Haberman

Empfohlen

Novidades Angular 4.x e CLI Loiane Groner

European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...Sébastien Levert

DevOpsDays Cape Town 2018 - Serverless with Google App EngineGünter Grodotzki

SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure FunctionsSébastien Levert

Flex And RailsTony Hillerson

180929_NextBuild_From_Java_to_KotlinPaulien van Alst

Getting Started with the Angular 2 CLIJim Lynch

React vs angular (mobile first battle)Michael Haberman

Angular CLI : HelloWorldnikspatel007

Create Alexa Skills using IBM Watson Conversation and Apache OpenWhiskNiklas Heidloff

Jenkins automationAleksey Maksimov

RxJS: A Beginner & Expert's Perspective - ng-conf 2017Tracy Lee

Angular js full stack developmentDarius Riggins

Getting started with Angular CLISasha Vinčić

Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 MinutesTracy Lee

Developing webapp using Polymer : is it ready for production? or not?Jeongkyu Shin

Creating BananaJS with Angular 2, Angular CLI, and Material DesignTracy Lee

A Tale of 3 CLIs - Angular 2, Ember, and ReactTracy Lee

The Tale of 2 CLIs - Ember-cli and Angular-cliTracy Lee

A Practical Approach to React Native at All Things Open ConferenceTracy Lee

SharePoint Fest DC - SharePoint Framework, Angular and Azure FunctionsSébastien Levert

SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...Sébastien Levert

Craft effective API with GraphQL and Absinthe - Ihor KatkovElixir Club

201907_10 muhamad aldy b._status reportMuhamad Aldy Bintang

MAB meeting1 10 july 2019Muhamad Aldy Bintang

The Power of RxJS in Nativescript + AngularTracy Lee

Tiffanyp2nycdoe

Secondary School Offers for Sevenoaks StudentsSevenoaks ACE

DF1 - Py - Kalaidin - Introduction to Word Embeddings with PythonMoscowDataFest

DF1 - ML - Vorontsov - BigARTM Topic Modelling of Large Text CollectionsMoscowDataFest

Weitere ähnliche Inhalte

Was ist angesagt?

Angular CLI : HelloWorldnikspatel007

Create Alexa Skills using IBM Watson Conversation and Apache OpenWhiskNiklas Heidloff

Jenkins automationAleksey Maksimov

RxJS: A Beginner & Expert's Perspective - ng-conf 2017Tracy Lee

Angular js full stack developmentDarius Riggins

Getting started with Angular CLISasha Vinčić

Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 MinutesTracy Lee

Developing webapp using Polymer : is it ready for production? or not?Jeongkyu Shin

Creating BananaJS with Angular 2, Angular CLI, and Material DesignTracy Lee

A Tale of 3 CLIs - Angular 2, Ember, and ReactTracy Lee

The Tale of 2 CLIs - Ember-cli and Angular-cliTracy Lee

A Practical Approach to React Native at All Things Open ConferenceTracy Lee

SharePoint Fest DC - SharePoint Framework, Angular and Azure FunctionsSébastien Levert

SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...Sébastien Levert

Craft effective API with GraphQL and Absinthe - Ihor KatkovElixir Club

201907_10 muhamad aldy b._status reportMuhamad Aldy Bintang

MAB meeting1 10 july 2019Muhamad Aldy Bintang

The Power of RxJS in Nativescript + AngularTracy Lee

Was ist angesagt? (18)

Angular CLI : HelloWorld

Create Alexa Skills using IBM Watson Conversation and Apache OpenWhisk

Jenkins automation

RxJS: A Beginner & Expert's Perspective - ng-conf 2017

Angular js full stack development

Getting started with Angular CLI

Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes

Developing webapp using Polymer : is it ready for production? or not?

Creating BananaJS with Angular 2, Angular CLI, and Material Design

A Tale of 3 CLIs - Angular 2, Ember, and React

The Tale of 2 CLIs - Ember-cli and Angular-cli

A Practical Approach to React Native at All Things Open Conference

SharePoint Fest DC - SharePoint Framework, Angular and Azure Functions

SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...

Craft effective API with GraphQL and Absinthe - Ihor Katkov

201907_10 muhamad aldy b._status report

MAB meeting1 10 july 2019

The Power of RxJS in Nativescript + Angular

Andere mochten auch

Tiffanyp2nycdoe

Secondary School Offers for Sevenoaks StudentsSevenoaks ACE

DF1 - Py - Kalaidin - Introduction to Word Embeddings with PythonMoscowDataFest

DF1 - ML - Vorontsov - BigARTM Topic Modelling of Large Text CollectionsMoscowDataFest

plone.apigilforcada

Conference PefNet in CZMiss. Antónia FICOVÁ, Engineer. (Not yet Dr.)

15 fotos bettas 2012Aquatic Alzira

Resume - Jarod M Wachtel (PA)Jarod Wachtel

Оптимизация производительности PythonPyNSK

TravellingAbroadSlideShowWinnia

Основы языка Питон: типы данных, операторыTheoretical mechanics department

Backtesting Trading Strategies with Reraviv

R in finance: Introduction to R and Its Applications in FinanceLiang C. Zhang (張良丞)

Andere mochten auch (13)

Tiffanyp2

Secondary School Offers for Sevenoaks Students

DF1 - Py - Kalaidin - Introduction to Word Embeddings with Python

DF1 - ML - Vorontsov - BigARTM Topic Modelling of Large Text Collections

plone.api

Conference PefNet in CZ

15 fotos bettas 2012

Resume - Jarod M Wachtel (PA)

Оптимизация производительности Python

TravellingAbroadSlideShow

Основы языка Питон: типы данных, операторы

Backtesting Trading Strategies with R

R in finance: Introduction to R and Its Applications in Finance

Ähnlich wie Developing Single Page Applications on Plone using AngularJS

Angular 7 training_topicsAmanCSE1

Common design principles and design patterns in automation testingKMS Technology

Single page applications with AngularJSRumesh Hapuarachchi

End to-End SPA Development Using ASP.NET and AngularJSGil Fink

Angular jsFelixits

Create responsive websites with Django, REST and AngularJSHannes Hapke

Say hello world with angular 5Abhishek Mallick

Building Desktop RIAs With PHP And JavaScriptfunkatron

React, GraphQL и Relay - вполне себе нормальный компонентный подход (nodkz)Pavel Chertorogov

Angular & Webpack — Nir Kaufman500Tech

Webpack and angularjsNir Kaufman

Frontend 'vs' Backend Getting the Right MixBob Paulin

AngularYan Justino

Making share point rock with angular and reactJoseph Jorden

AngularJS One Day WorkshopShyam Seshadri

Ionic framework one day trainingTroy Miles

AngularJS Fundamentals + WebAPIEric Wise

Build your website with angularjs and web apisChalermpon Areepong

AngularJS Introduction (Talk given on Aug 5 2013)Abhishek Anand

Ähnlich wie Developing Single Page Applications on Plone using AngularJS (20)

Angular 7 training_topics

Common design principles and design patterns in automation testing

Single page applications with AngularJS

End to-End SPA Development Using ASP.NET and AngularJS

Angular js

Create responsive websites with Django, REST and AngularJS

Say hello world with angular 5

Building Desktop RIAs With PHP And JavaScript

React, GraphQL и Relay - вполне себе нормальный компонентный подход (nodkz)

Angular & Webpack — Nir Kaufman

Webpack and angularjs

Frontend 'vs' Backend Getting the Right Mix

Angular

Making share point rock with angular and react

AngularJS One Day Workshop

Ionic framework one day training

AngularJS Fundamentals + WebAPI

Build your website with angularjs and web apis

AngularJS Introduction (Talk given on Aug 5 2013)

Mehr von Alin Voinea

EEA & Eau de Web Front-end add-ons - Plone conference 2023 Alin Voinea

EEA Faceted Navigation and Plone 6.pdfAlin Voinea

EEA Volto Add-ons - Plone Conference 2020Alin Voinea

Plone 6 / Volto Dexterity Content Types - Schema & LayoutAlin Voinea

Docker & rancherAlin Voinea

Continuous Delivery/Deployment w/ Gitflow, Docker, Jenkins and RancherAlin Voinea

Faceted navigation in Plone 5Alin Voinea

Docker and ploneAlin Voinea

Plone and dockerAlin Voinea

Kotti CMS 101Alin Voinea

Responsive design in ploneAlin Voinea

Plone and dockerAlin Voinea

Display eea’s semantic content with elasticsearch and node.js applications sh...Alin Voinea

New EEA Plone Add-onsAlin Voinea

Python eggs (RO)Alin Voinea

Data visualization in ploneAlin Voinea

Mehr von Alin Voinea (16)

EEA & Eau de Web Front-end add-ons - Plone conference 2023

EEA Faceted Navigation and Plone 6.pdf

EEA Volto Add-ons - Plone Conference 2020

Plone 6 / Volto Dexterity Content Types - Schema & Layout

Docker & rancher

Continuous Delivery/Deployment w/ Gitflow, Docker, Jenkins and Rancher

Faceted navigation in Plone 5

Docker and plone

Plone and docker

Kotti CMS 101

Responsive design in plone

Plone and docker

Display eea’s semantic content with elasticsearch and node.js applications sh...

New EEA Plone Add-ons

Python eggs (RO)

Data visualization in plone

Kürzlich hochgeladen

call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️Delhi Call girls

A Secure and Reliable Document Management System is Essential.docxComplianceQuest1

Right Money Management App For Your Financial GoalsJhone kinadey

CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️anilsa9823

Optimizing AI for immediate response in Smart CCTVshikhaohhpro

Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Steffen Staab

The Ultimate Test Automation Guide_ Best Practices and Tips.pdfkalichargn70th171

CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female serviceanilsa9823

Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...OnePlan Solutions

Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...MyIntelliSource, Inc.

W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...panagenda

Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfkalichargn70th171

Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...MyIntelliSource, Inc.

CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE9953056974 Low Rate Call Girls In Saket, Delhi NCR

Hand gesture recognition PROJECT PPT.pptxbodapatigopi8531

Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsAlberto González Trastoy

TECUNIQUE: Success Stories: IT Service providermohitmore19

Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...kellynguyen01

Microsoft AI Transformation Partner Playbook.pdfWilly Marroquin (WillyDevNET)

The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...ICS

Kürzlich hochgeladen (20)

call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️

A Secure and Reliable Document Management System is Essential.docx

Right Money Management App For Your Financial Goals

CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️

Optimizing AI for immediate response in Smart CCTV

Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...

The Ultimate Test Automation Guide_ Best Practices and Tips.pdf

CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service

Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...

Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...

W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...

Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf

Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...

CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE

Hand gesture recognition PROJECT PPT.pptx

Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications

TECUNIQUE: Success Stories: IT Service provider

Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...

Microsoft AI Transformation Partner Playbook.pdf

The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...

Developing Single Page Applications on Plone using AngularJS

1. HI!  OLIMPIU ROB 4+ years experience with Plone ~1 year experience with AngularJS

2. DEVELOPING SINGLE PAGE APPLICATIONS ON PLONE USING AngularJS

3. SINGLE PAGE APPLICATIONS

4. SPA CHALLENGES DOM manipulation Browser History Routing Module and view loading Data binding Caching Input validation

5. JAVASCRIPT SOLUTIONS Ember.js ExtJS React Meteor AngularJS

7. FIRST DEMO

8. HOW IT WAS MADE

9. FILE STRUCTURE

10. INDEX.HTML JS:

11. ROUTES

12. FACTORY

13. CONTROLLERS

14. KITTENZ.HTML

15. DETAILS.HTML

16. ANGULARJS AND PLONE collective.js.angular Bower

17. A MORE USEFUL DEMO

18. PLONE INTEGRATION - Plone 5 productoli.areadme

19. VIEW CHAMELEON TEMPLATE INTEGRATING STATIC RESOURCES

20. VIEW CHAMELEON TEMPLATE INITIAL DATA

21. THE FACTORY

22. THE HEADING LISTING

23. HOW DOES ADDING A HEADING WORK? The template

24. HOW DOES ADDING A HEADING WORK? The function inside the controller

25. USING THE TINYMCE PATTERN THE TEMPLATE

26. USING THE TINYMCE PATTERN THE ANGULAR DIRECTIVE

27. ANGULARJS IN THE FUTURE

28. WHERE TO GO NEXT Angular documentation site: Code School's Shaping up with Angular.JS: Angular's github page: https://docs.angularjs.org/guide http://campus.codeschool.com/courses/shaping-up- with-angular-js/intro https://github.com/angular/angular.js

29. QUESTIONS?