angular.js: do it right
DESCRIPTION
Everyone wants to write good code. Everyone is trying to invent a pony world. Despite the efforts, the questions continuously appearing. We're putting ourselves into black boxes, build walls and bridges, instead of simple solution. It's time to become a good architectTRANSCRIPT
- 1. AngularJS: Do it right Eugene Zharkov
2. Renzo Piano You can put down a bad book; you can avoid listening to bad music; but you cannot miss the ugly structure of your project 3. 1. What is basic structure of any project at the beginning ? 4. angular-seed or any angular example 5. app/ all of the les to be used in production css/ css les img/ image les index.html app layout le (the main html template le of the app) js/ javascript les app.js application controllers.js application controllers directives.js application directives lters.js custom angular lters services.js custom angular services lib/ angular and 3rd party javascript libraries partials/ angular view partials (partial html templates) cong/ cong les for running unit tests with Testacular/Karma scripts/ handy shell/js/ruby scripts (run unit tests and dev server) test/ test source les and libraries 6. The basic shop logic 7. Login (Twitter, Facebook, Google) Registration Home Widgets Shopping Cart Search Product Payment (PayPal, Credit Card.. ) 8. controllers/ LoginController.js RegistrationController.js HomeController.js ShoppingCartController.js SearchController.js ProductController.js PaymentController.js 9. Dont do that 10. ng-boilerplate 11. ng-boilerplate/ |- grunt-tasks/ |- karma/ |- src/ | |- app/ | | |- | |- assets/ | | |- | |- common/ | | |- | |- less/ | | |- main.less |- vendor/ | |- angular-bootstrap/ | |- bootstrap/ | |- placeholders/ |- .bowerrc 12. FEATURE-BASED MODULARIZATION 13. src/ app/ about/ about.js about.html home/ home.js! home.less! home.spec.js! home.html! app.js app.spec.js assets/ components/ less/ index.html 14. Keep going 15. Herman Hertzberger If you think you cant make the project better with your work, at least make sure you dont make it worse. 16. 2. Build & Automate 17. Gulp Grunt Brunch.io make? PowerShell (@@) 18. How about to avoid using jQueryfor awhile? 19. Your component is complex? OK. Use jQuery. 20. You want to: Show text Show/hide blocks Replace content Handle event to jQuery 21. angular.copy angular.element angular.equals angular.extend angular.forEach angular.fromJson angular.identity angular.isArray angular.isDate angular.isDened angular.isElement angular.isFunction angular.isObject angular.isString angular.isUndened angular.lowercase angular.noop angular.toJson angular.uppercase 22. Libraries Twitter Bootstrap AngularUI-Bootstrap AngularUI UI-Router Restangular 23. UI-Router 24. UI-Router 25. Restangular 26. Directives, its easy 27. Testing 28. Unit Testing Jasmine Mocha QUniT Integration Testing Karma CasperJS 29. Unit Tests 30. Integration Tests 31. Mocking Services 32. Emilio Ambasz When a developer is asked what his best project is, he usually answers, The next one. 33. Its! ! ! beautiful Your application now 34. @2j2e! ! @2j2e! ! [email protected] Questions? Need a help with your project? Ping me.