AngularJS Meetup

Intilery.com

About Me

• Founder and CEO of Intilery.com• Previously the CIO of The Hut group• And before that, 10 years as chief architect of

Moneysupermarket.com

Intilery.com – App Stack

5 parts: • UI/Web app dashboard (angular)• UI/Web app email designer (angular)• App Backend• A data collector/segmenter/analytics &

personalisation engine• An email Sender (think mail chimp)

Intilery.com – Tech Stack

• Web apps – Angular, jQuery, Require (lots of libs) talks to Java using JSON

• App backend – Java, Jersey, Spring IOC, Guava, Mongo, MySQL

• Collector – Java event pipeline, twitter storm (like), rules engine, elastic search, MySQL

• Emailer – Java, Spring Quartz, StringTemplate• Env - AWS

Intilery.com

• Demo

RequireJS + AngularJS

Maintainable JavaScript Application = oxymoron?

Apply the same principles of good software engineering to angularjs apps.

JavaScript is very flexible, very easy to write undisciplined code (and architecture) – be strict!

Principles

Each file should contain one (and one only) component – directive, filter, service, controller, view etc.

Split out components into smaller components (each own file).

Spilt out the app into smaller apps – We use our API’s to integrate app.

Use RequireJS to manage the dependencies and loading of libs and your components

RequireJS Setup

All code at https://github.com/cymantic/angular-require-testacular

Directory Structureindex.html (the require script tag goes here)--libs

--angular--jquery--require

require-jquery.js (jQuery loaded here)--domReady (needed in some browsers when scripts loaded before dom is ready)

--scripts (your components)--controller--directives--filters--resources--servicesapp.js (angular module of app defined here)bootstrap.js (manual bootstrapping of the app)main.js (require configuration and route configuration)

--styles--templates--views

<script data-main="./scripts/main.js" src="libs/require/require-jquery.js"></script>(we are not yet optimizing the files into a single file – todo before beta launch)

main.js

app.js – first non-library to load, we define our module here

bootstrap.js – manually start up the application

Configuration

Controller

TextServiceEditLinkController

(modal)MergeTagSvc

DataModelRsrc

AlignmentMenuSvc

SelectionMgrSvc

PasteMgrSvc

FormattingMgrSvc

Text Inspector Controller

Text Content Svc – bound to the content editable element we are editing

Merge Tag Service