Intro to Angular.js & Zend2 for Front-End Web Applications
1. Intro to Angular.js & Zend2
for Front-End Web Applications
Adrian Esquivel
aesquivel@teckpert.com
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
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.
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.
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