building the front end with angularjs
TRANSCRIPT
Building the FrontEndin AngularJS
John Ennew MEng CEng MIET Lead Developer, Deeson
ceng on drupal.org @johnennew
What is AngularJS?
User requests webpage
Server returns the web page
Content Management System
Drupal is …
Website delivery tool
Constructing the model
Different Models
Backend
Frontend
API
Fully Decoupled
Progressive / Hybrid
Website* Home * About * Contact
Admin
User Search API
Why AngularJS?
Before you begin …
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
Scaffolding tool
sudo npm install -g yo
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
Anatomy of an Angular JS Application
Model
View Controller
Clean URLs
http://example.com/#/about —> http://example.com/about
HTML5Mode
Installing other modules
Drupal 7
Services module https://drupal.org/project/services
Restful module: https://drupal.org/project/restful
For Drupal GUI config
For code config
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
Wait! What about SEO?
<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