Angular meetup
Upcoming SlideShare
Loading in...5
×
 

Angular meetup

on

  • 787 views

Maintainable javascript applications with angularjs and requirejs

Maintainable javascript applications with angularjs and requirejs

Statistics

Views

Total Views
787
Views on SlideShare
787
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Angular meetup Angular meetup Presentation Transcript

  • AngularJSMeetup 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 Stack5 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!
  • PrinciplesEach 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 SetupAll 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 herebootstrap.js – manually start up the application
  • Configuration
  • ControllerEditLinkController TextService(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