Angular meetup
description
Transcript of Angular meetup
![Page 1: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/1.jpg)
AngularJS Meetup
Intilery.com
![Page 2: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/2.jpg)
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
![Page 3: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/3.jpg)
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)
![Page 4: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/4.jpg)
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
![Page 5: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/5.jpg)
Intilery.com
• Demo
![Page 6: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/6.jpg)
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!
![Page 7: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/7.jpg)
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
![Page 8: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/8.jpg)
RequireJS Setup
All code at https://github.com/cymantic/angular-require-testacular
![Page 9: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/9.jpg)
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
![Page 10: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/10.jpg)
<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
![Page 11: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/11.jpg)
app.js – first non-library to load, we define our module here
bootstrap.js – manually start up the application
![Page 12: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/12.jpg)
Configuration
![Page 13: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/13.jpg)
![Page 14: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/14.jpg)
Controller
TextServiceEditLinkController
(modal)MergeTagSvc
DataModelRsrc
AlignmentMenuSvc
SelectionMgrSvc
PasteMgrSvc
FormattingMgrSvc
![Page 15: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/15.jpg)
Text Inspector Controller
![Page 16: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/16.jpg)
Text Content Svc – bound to the content editable element we are editing
![Page 17: Angular meetup](https://reader035.fdocuments.us/reader035/viewer/2022062300/55498b2eb4c90583678b50e7/html5/thumbnails/17.jpg)
Merge Tag Service