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.

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

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

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

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 config
For code config

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?

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