Intro to Angular.js & Zend2 for Front-End Web Applications
Download as PPTX, PDF6 likes8,713 views
This document provides an introduction to using Angular.js and Zend2 for front-end web applications. It discusses the benefits of the MVC architecture and introduces key concepts for both frameworks. For Angular.js, it covers data binding, controllers, directives, and services. For Zend2, it discusses models, views, controllers, modules, and events. The presenter demonstrates a sample application integrating Angular.js and Zend2 and provides tips for developing applications with these technologies.
Intro to Angular.js & Zend2 for Front-End Web Applications
- 1. Intro to Angular.js & Zend2 for Front-End Web Applications Adrian Esquivel [email protected] Chief Expert
- 2. About Me • • • • • Grew up in Miami Computer Engineering @UF Defense and security 7 Years Chief Expert @TECKpert since 2009 Leading engineering teams for 10+ years
- 3. Outline • • • • • Background Intro to Zend2 Intro to Angular.JS Demo Q&A
- 4. Background: What is MVC? • Stands for “Model-View-Controller”. • Architecture representation data based on user interaction.
- 5. Background: Why MVC? • Modularize the user interface. • Consolidate front end code (HTML5). • Different skill sets in development (front/back). • Smaller front end code footprint. • Take advantage of cloud architecture.
- 6. Background: PHP & JS Frameworks PHP Zend Symfony CodeIgniter CakePHP JavaScript Angular.js Ember.js Backbone.js
- 7. Intro to Zend2: History • Started by graduates of Technion, Israeli hightech university, in 1997. • Zend Technologies established in 1999. • Opened US office in 2004 and established offices worldwide. • Commercial products from IDE to Server software, security and certification.
- 8. Intro to Zend2: Benefits • • • • • • Based on PHP 5.3+. 100% Object-Oriented. Flexible components and full-featured stack. Autoloading and dependency injection. Modules Event manager.
- 9. Intro to Zend2: Models • • • • • Single object or collection of objects. Represents logical layer. Contains application logic (i.e. business logic). Manages data - stores, manipulates, responds. Nothing to do with a user interface.
- 10. Intro to Zend2: Views • Visual representations of a model. • Here’s where all your front end code is (HTML, JS, CSS). • Zend2 file format: .phtml.
- 11. Intro to Zend2: Controllers • • • • • Interprets user action. Link between the model and view. Changes the state of the model and view. Manages the output. Always name files with “*Controller”. – E.g. MapController.php • Minimize code in controller with modules and events.
- 12. Intro to Zend2: Modules • Basic unit of ZF2. • Collection of code and other files that solves specific problem. • Contains namespace and class file (module.php)
- 13. Intro to Zend2: Events • Events are actions. • A Listener is a callback that reacts to an event. • Event manager is an object that pulls together listeners for one or more events.
- 14. Intro to Zend2: How to Start • Download latest package (2.2.5). – https://packages.zendframework.com/ • Start with a skeleton application. – http://framework.zend.com/manual/2.2/en/userguide/skeleton-application.html • Build something simple.
- 15. Intro to Angular.JS: History • Released in 2009. • Backed by Google. • Checkout apps built with Angular.js at builtwith.angularjs.org.
- 16. Intro to Angular.JS: Benefits • • • • • Based on MVC. Breaks away from DOM manipulation. Supports two way data binding. Works well with other libraries. Easy to test.
- 17. Intro to Angular.JS: How to Start • Download – http://angularjs.org/ • Watch tutorials and case studies. – http://docs.angularjs.org/tutorial – http://builtwith.angularjs.org/ • Install it in Zend2 skeleton app.
- 18. Intro to Angular.JS: Data Binding • Syncs data between model and view components. • Does this automatically. • Traditional templates bind data one way. • Angular binds data two ways – keeps the model in sync (single-source) and the view as a snapshot. • Great for testing.
- 19. Intro to Angular.JS: Controllers • Respond to events. • Gather data. • NEVER interacts with DOM
- 20. Intro to Angular.JS: Directives • Markers on elements. – <input data-ng:model=“Hello"> • Tells Angular on “compilation” to modify behavior on the element • Used for DOM interaction and manipulation. • Angular has built in directives
- 21. Intro to Angular.JS: Services • Can handle complex business logic. • Bring services to the client side. • Objects or functions that execute tasks for components (i.e. controller) that depend on it.
- 22. Intro to Angular.JS: Other Components • Expressions. • Forms and Filters.
- 24. Final Notes: Target Applications • • • • Dashboard applications. Single-page applications. Map interfaces. Chart/Graph interfaces. Pretty much any kind of UI…
- 25. Final Notes: Tips • • • • • Develop your application stack with Zend2. Use HTML5 and CSS3. Create web and mobile views. Use Angular.js to be “device-agnostic”. Make use of operations, events, and bindings.
- 26. Other Concepts • MOVE - “Models-Operations-Views-Events”. • SOLID - Single responsibility, Open-closed, Liskov substitution, Interface segregation and Dependency inversion
- 28. Announcement We’re building teams @TECKpert Visit www.teckpert.com/careers
- 29. Questions?