The A1 "AngularJS 1 Kick Start"
Download as PPTX, PDF1 like295 views
This document provides an overview of AngularJS including: - Setting up a development environment with text editors like Sublime Text - AngularJS core concepts like directives, data binding, modules, controllers, routing, and services - Best practices for structuring AngularJS applications into modular, maintainable code including recommendations for file/folder organization - Demos are included to illustrate key AngularJS features
The A1 "AngularJS 1 Kick Start"
- 1. Devcon Summit 2016 Christian John Felix
- 2. “The A1” Christian John Felix Kick Start
- 3. It takes the front end development to the next level. Why AngularJS?
- 4. Two things before you start: 1. Text Editor • Download Sublimetext 3 • Others • Brackets etc. • Atom, • Notepad ++, • Dreamweaver, • VSCode, • Visual Studio 2015 (Community Edition) 2. AngularJS • Download AngularJS 1 (Library)
- 5. https://angularjs.org Click to DOWNLOAD the library
- 6. https://www.sublimetext.com/3 Or type in google sublimetext 3 then click the first link and read the instructions.
- 7. The Basics
- 8. Directive and Data Binding
- 9. • AngularJS Data-Binding in Angular apps is the automatic synchronization of data between the model and view components. • AngularJS Directives are extended HTML attributes with the prefix ng- .
- 11. DEMO
- 12. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-app directive initializes an AngularJS application.
- 14. Module - A module is a collection of services, directives, controllers, filters, and configuration information.
- 15. Controller - controls the flow of data in the application. A controller is defined using ng-controller directive.
- 16. DEMO
- 17. Routing
- 18. The ngRoute module helps your application to become a Single Page Application. INJECTED ng-view is the directive that angular uses as a container to switch between views. NOTE: Your application needs a container to put the content provided by the routing.
- 19. DEMO
- 20. Service
- 21. Services - Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.
- 22. DEMO
- 23. Different emotional feelings using AngularJS
- 24. I owe you Controller! First encounter with data binding and controller Data Binding ROCKS!
- 25. First encounter with Services
- 26. DI (Dependency Injection) WHO ARE YOU!!!!!
- 27. I’m DONE! Going back to JQEURY!
- 28. When you or your team understand how it works!
- 29. When building a large scale app You need to plan.
- 31. AngularJS is a MVW “Model View Whatever”
- 32. app/ controllers/ services/ views/ directives/ filters/ By Type • OK for demo or start up • Not advisable on a large scale app. • Hard to maintain.
- 34. When your application grows.
- 35. When your application grows.
- 36. Where is that controller!
- 37. app/ app.js config.js customer/ filter.js orders/ products/ service.js By Feature • Good way to start. • Based on user story. • Much better than by type.
- 38. When your application grows.
- 39. Combining the two app/ app.js config.js customer/ controllers/ services/ views/ orders/ controllers/ services/ views/ products/ controllers/ services/ views/ By feature & by type • Manageable and maintainable. • Easier to locate the files. • Easier to work with another feature.
- 42. customer module customer/ customer.module.js controllers/ views/ services/ order module order/ order.module.js controllers/ views/ services/ Main module product module product/ product.module.js controllers/ views/ services/ INJECTED
- 44. customer module product module package module reports module order module Different Modules with Different Developers
- 45. Code Pattern
- 46. AngularJS https://angularjs.org/ AngularJS Style Guide https://github.com/johnpapa/angular-styleguid Block UI https://github.com/McNull/angular-block-ui ToastR https://github.com/Foxandxss/angular-toastr $http Promises http://blog.ninja-squad.com/2015/05/28/angularjs-promises/ Bootstrap https://getbootstrap.com
- 47. TIPS
- 48. To God be the Glory #HappyCoding #angularjsPH
- 49. END