• Like
Intro to Angular.js & Zend2  for Front-End Web Applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Intro to Angular.js & Zend2 for Front-End Web Applications

  • 1,285 views
Published

Intro to how to use Zend2 and Angular to create front end web applications.

Intro to how to use Zend2 and Angular to create front end web applications.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,285
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
9
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 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.
  • 23. Demo http://angular-test.teckpert.com Download Sample Code: https://dl.dropboxusercontent.com/u/1183493/Intro%20t o%20AngularJS%20and%20ZF2.zip
  • 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
  • 27. End of Presentation
  • 28. Announcement We’re building teams @TECKpert Visit www.teckpert.com/careers
  • 29. Questions?