Building the Front End with AngularJS

•

2 gostaram•784 visualizações

Session delivered at DrupalCon Barcelona 2015 about building an AngularJS web app with Drupal version 8 as the backend data store and content management system.

Tecnologia

Building the FrontEnd
in AngularJS
John Ennew MEng CEng MIET
Lead Developer, Deeson
ceng on drupal.org
@johnennew

User requests webpage
Server returns the web page

Content Management System
Drupal is …
Website delivery tool

Progressive / Hybrid
Website
* Home
* About
* Contact

Node & NPM
Node Package Manager
NodeJS
https://nodejs.org/en/

From the website:
https://nodejs.org/en/download/
Or from your OS package manager. e.g.
brew install node
sudo apt-get install nodejs
Check with:
node -v
v0.12.4
Node & NPM

JS Package Manager
Bower
npm install -g bower

Task runner
Grunt
npm install -g grunt-cli
Gulp Broccoli

Testing frameworks
npm install -g generator-karma

Building a web app with
AngularJS and Drupal 8

Drupal 8
Views module
RESTful Web Services module

$> mkdir angular-drupal8
$> cd angular-drupal8
$> npm install generator-angular
$> yo angular angular-drupal8
Scaffold your app

Clean URLs
http://example.com/#/about —> http://example.com/about
HTML5Mode

Drupal 7
Services module https://drupal.org/project/services
Restful module: https://drupal.org/project/restful
For Drupal GUI conﬁg
For code conﬁg

Drupal 7
Yeoman: https://github.com/Gizra/generator-hedley
* Drupal 7 backend
* Angular app client
* Behat tests

Thank you!
John Ennew MEng CEng MIET
Lead Developer, Deeson
(Our team is distributed and we are hiring)
ceng on drupal.org
@johnennew

CORS support
http://drupal8.devhttp://localhost:9000
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: http://localhost:9000

<meta name="fragment" content="!">
https://developers.google.com/webmasters/ajax-crawling/
docs/getting-started
SEO
http://my.domain.com/base/some/path/on/website?
_escaped_fragment_=

SEO
https://github.com/steeve/angular-seo
PhantomJS

Mais conteúdo relacionado

Mais procurados

Ionic adventures - Hybrid Mobile App Development rocksJuarez Filho

Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Ido Green

What's New in JHipsterLand - Devoxx Poland 2017Matt Raible

I gov. организация-фронтед-части.vasya_bh

Blazor Full-StackEd Charbeneau

The Hitchhiker's Guide to Building a Progressive Web AppChristopher Nguyen

Webpack and angularjsNir Kaufman

Behat sauceShashikant Jagtap

Blazor - An IntroductionJamieTaylor112

Bring Your Web App to the Next Level. Wprowadzenie do Progressive Web AppThe Software House

Blazor v1.1Juan Luis Guerrero Minero

AngularJS vs React JS vs Node JS: Which is Best For Web Development ?MarkupBox

Front End Development for Back End Developers - UberConf 2017Matt Raible

Architecture & Workflow of Modern Web AppsRasheed Waraich

Jaggery Introductory WebinarNuwan Bandara

웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스민태 김

Modern Web Application Development Workflow - EclipseCon US 2014Stéphane Bégaudeau

Angular 2 vs ReactIran Reyes Fleitas

Cross-platform Desktop application with AngularJS and build with Node-webkitWittawas Wisarnkanchana

WordPress as a Headless CMS - Bronson QuickWordCamp Sydney

Mais procurados (20)

Ionic adventures - Hybrid Mobile App Development rocks

Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)

What's New in JHipsterLand - Devoxx Poland 2017

I gov. организация-фронтед-части.

Blazor Full-Stack

The Hitchhiker's Guide to Building a Progressive Web App

Webpack and angularjs

Behat sauce

Blazor - An Introduction

Bring Your Web App to the Next Level. Wprowadzenie do Progressive Web App

Blazor v1.1

AngularJS vs React JS vs Node JS: Which is Best For Web Development ?

Front End Development for Back End Developers - UberConf 2017

Architecture & Workflow of Modern Web Apps

Jaggery Introductory Webinar

웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스

Modern Web Application Development Workflow - EclipseCon US 2014

Angular 2 vs React

Cross-platform Desktop application with AngularJS and build with Node-webkit

WordPress as a Headless CMS - Bronson Quick

Semelhante a Building the Front End with AngularJS

AngularJsAbdhesh Kumar

Angularjs 131211063348-phpapp01Arunangsu Sahu

Love at first VueDalibor Gogic

Angular jsKnoldus Inc.

Grunt.js and Yeoman, Continous IntegrationDavid Amend

OSDC.no 2015 introduction to node.js workshopleffen

Webconf nodejs-production-architectureBen Lin

Build RESTful API Using Express JSCakra Danu Sedayu

Building Massive AngularJS AppsGordon Bockus

Angularjs Tutorial for Beginnersrajkamaltibacademy

Modern Web Application Development Workflow - EclipseCon Europe 2014Stéphane Bégaudeau

Frontend WorkflowDelphiCon

10 things you should know about djangoAdieu

Angular4 getting startedTejinderMakkar

Create Restful Web Application With Node.js Express FrameworkEdureka!

Tutorial: Develop Mobile Applications with AngularJSPhilipp Burgmer

Complete MVC on NodeJSHüseyin BABAL

From React to React Native - Things I wish I knew when I startedsparkfabrik

Build single page applications using AngularJS on AEMAdobeMarketingCloud

Semelhante a Building the Front End with AngularJS (20)

AngularJs

Angularjs 131211063348-phpapp01

Love at first Vue

Angular js

Grunt.js and Yeoman, Continous Integration

OSDC.no 2015 introduction to node.js workshop

Webconf nodejs-production-architecture

Build RESTful API Using Express JS

Building Massive AngularJS Apps

Angularjs Tutorial for Beginners

Modern Web Application Development Workflow - EclipseCon Europe 2014

Frontend Workflow

10 things you should know about django

Angular4 getting started

Create Restful Web Application With Node.js Express Framework

Tutorial: Develop Mobile Applications with AngularJS

Complete MVC on NodeJS

From React to React Native - Things I wish I knew when I started

Build single page applications using AngularJS on AEM

Último

Anypoint Exchange: It’s Not Just a Repo!Manik S Magar

Search Engine Optimization SEO PDF for 2024.pdfRankYa

Install Stable Diffusion in windows machinePadma Pradeep

Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited

Powerpoint exploring the locations used in television show Time Clashcharlottematthew16

AI as an Interface for Commercial BuildingsMemoori

Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University

Story boards and shot lists for my a level piececharlottematthew16

"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays

Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation

The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2

Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB

Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz

Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz

Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge

My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada

DMCC Future of Trade Web3 - Special EditionDubai Multi Commodity Centre

Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos

Building the Front End with AngularJS

1. Building the FrontEnd in AngularJS John Ennew MEng CEng MIET Lead Developer, Deeson ceng on drupal.org @johnennew

2. What is AngularJS?

3. User requests webpage Server returns the web page

4. Content Management System Drupal is … Website delivery tool

5. Constructing the model

6. Different Models

7. Backend Frontend API Fully Decoupled

8. Progressive / Hybrid Website * Home * About * Contact

9. Admin User Search API

10. Why AngularJS?

11. Why AngularJS? http://ngmodules.org

12.

13. Before you begin …

14. Node & NPM Node Package Manager NodeJS https://nodejs.org/en/

15. From the website: https://nodejs.org/en/download/ Or from your OS package manager. e.g. brew install node sudo apt-get install nodejs Check with: node -v v0.12.4 Node & NPM

16. JS Package Manager Bower npm install -g bower

17. Task runner Grunt npm install -g grunt-cli Gulp Broccoli

18. Scaffolding tool sudo npm install -g yo

19. Testing frameworks npm install -g generator-karma

20. Building a web app with AngularJS and Drupal 8

21. Drupal 8 Views module RESTful Web Services module

22.

23. $> mkdir angular-drupal8 $> cd angular-drupal8 $> npm install generator-angular $> yo angular angular-drupal8 Scaffold your app

24. Anatomy of an Angular JS Application

25. Model View Controller

26.

27. Clean URLs http://example.com/#/about —> http://example.com/about HTML5Mode

28. Installing other modules

29. Drupal 7 Services module https://drupal.org/project/services Restful module: https://drupal.org/project/restful For Drupal GUI conﬁg For code conﬁg

30. Drupal 7 Yeoman: https://github.com/Gizra/generator-hedley * Drupal 7 backend * Angular app client * Behat tests

31. Thank you! John Ennew MEng CEng MIET Lead Developer, Deeson (Our team is distributed and we are hiring) ceng on drupal.org @johnennew

32. CORS support http://drupal8.devhttp://localhost:9000 Access-Control-Allow-Origin: * Access-Control-Allow-Origin: http://localhost:9000

33. Wait! What about SEO?

34.

35. <meta name="fragment" content="!"> https://developers.google.com/webmasters/ajax-crawling/ docs/getting-started SEO http://my.domain.com/base/some/path/on/website? _escaped_fragment_=

36. SEO https://github.com/steeve/angular-seo PhantomJS