Intro to Angular.js & Zend2 for Front-End Web Applications
Intro to Angular.js & Zend2
for Front-End Web Applications
Grew up in Miami
Computer Engineering @UF
Defense and security 7 Years
Chief Expert @TECKpert since 2009
Leading engineering teams for 10+ years
Intro to Zend2
Intro to Angular.JS
Background: What is MVC?
• Stands for “Model-View-Controller”.
• Architecture representation data based on
Background: Why MVC?
• Modularize the user interface.
• Consolidate front end code (HTML5).
• Different skill sets in development
• Smaller front end code footprint.
• Take advantage of cloud architecture.
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
• Commercial products from IDE to Server
software, security and certification.
Intro to Zend2: Benefits
Based on PHP 5.3+.
Flexible components and full-featured stack.
Autoloading and dependency injection.
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.
Intro to Zend2: Views
• Visual representations of a model.
• Here’s where all your front end code is (HTML,
• Zend2 file format: .phtml.
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
Intro to Zend2: Modules
• Basic unit of ZF2.
• Collection of code and other files that solves
• Contains namespace and class file
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.
Intro to Zend2: How to Start
• Download latest package (2.2.5).
• Start with a skeleton application.
• Build something simple.
Intro to Angular.JS: History
• Released in 2009.
• Backed by Google.
• Checkout apps built with Angular.js at
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.
Intro to Angular.JS: How to Start
• Watch tutorials and case studies.
• Install it in Zend2 skeleton app.
Intro to Angular.JS: Data Binding
• Syncs data between model and view
• 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
• Great for testing.
Intro to Angular.JS: Controllers
• Respond to events.
• Gather data.
• NEVER interacts with DOM
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
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.
Intro to Angular.JS: Other Components
• Forms and Filters.
Final Notes: Target Applications
Pretty much any kind of UI…
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.
• MOVE - “Models-Operations-Views-Events”.
• SOLID - Single responsibility, Open-closed,
Liskov substitution, Interface segregation and