AngularJS Brownbag
- 2. So what it is? • Open-source JavaScript framework • Created and maintained by Google • SPA – Single Page Application • Psuedo MVC • Complete client-side solution (data-binding, templating, form validation, routing etc) • TDD – Test Driven Development • Regular JavaScript objects
- 3. Gaining Steam Google Trends: http://goo.gl/FvrsuP
- 4. Why do I care? • Simplifies application development • Decouples DOM manipulation from app logic • Built with testing in mind • Reduces amount of JavaScript code • Clean looking and easy to read HTML • Can integrate with existing apps • Extensibility using directives
- 6. Hello World! jQuery AngularJS
- 7. Controllers • MVC – communication between the model and the view • Control the data • Defined by ng-controller • Example
- 8. Directives • Most important components of any AngularJS application • Built-in directives (ng-repeat, ng-show, ng-click) • Reusable components • Roll your own • Examples
- 9. Services • The M in MVC • Handles the data; interacts with REST • Your base object classes you create • Keeps the controllers clean • Reusability, dependency injection • Ajax, JSON • Promises instead of callbacks • Example (Todo app)
- 10. Useful Tools • Yeoman – helps you kickstart new projects, prescribing best practices and tools etc • AngularUI – AngularJS add-on utilities and directives (UI-Bootstrap, UI-Router, UI-Grid) • Bootstrap – mobile first front end framework • UnderscoreJS – useful JavaScript library • Jasmine – JavaScript testing framework • Karma – Javascript test runner
- 11. Questions • Examples are on Github: http://github.com/ccasad/angularjs-brownbag