• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Angular meetup

Angular meetup



Maintainable javascript applications with angularjs and requirejs

Maintainable javascript applications with angularjs and requirejs



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
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