Lone StarPHP 2013 - Building Web Apps from a New Angle
•
6 gefällt mir•6,454 views
AngularJS is a new JavaScript framework, backed by Google, for building powerful, complex and rich client-side web applications. We will go over the features and basics of building a web application with AngularJS and we will demonstrate how to communitate with a REST server built with PHP.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Lone StarPHP 2013 - Building Web Apps from a New Angle
Ähnlich wie Lone StarPHP 2013 - Building Web Apps from a New Angle (20)
Mehr von Pablo Godel
Mehr von Pablo Godel (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Lone StarPHP 2013 - Building Web Apps from a New Angle
- 1. Pablo Godel @pgodel - lonestarphp.com June 28th 2013 - Dallas, TX https://joind.in/8695 Building Web Apps from a New Angle Friday, June 28, 13
- 2. Who Am I? ⁃ Born in Argentina, living in the US since 1999 ⁃ PHP & Symfony developer ⁃ Founder of the original PHP mailing list in spanish ⁃ Parrilla Lover ⁃ Co-founder of ServerGrove Friday, June 28, 13
- 3. Friday, June 28, 13
- 4. Friday, June 28, 13
- 5. ⁃ Founded ServerGrove Networks in 2005 ⁃ Provider of web hosting specialized in PHP, Symfony, ZendFramework, MongoDB and others ⁃ Servers in USA and Europe! ServerGrove! Friday, June 28, 13
- 6. Very active open source supporter through code contributions and usergroups/conference sponsoring Community is our teacher Friday, June 28, 13
- 7. In the beginning there was HTML... Friday, June 28, 13
- 8. Friday, June 28, 13
- 9. Then it came JavaScript Friday, June 28, 13
- 10. Then it came JavaScript and it was not cool... Friday, June 28, 13
- 11. It was Important Business! Friday, June 28, 13
- 12. It was Serious Business! Friday, June 28, 13
- 13. It was Serious Business! Friday, June 28, 13
- 14. Very Important Uses Friday, June 28, 13
- 15. Image Rollovers! Friday, June 28, 13
- 16. http://joemaller.com/javascript/simpleroll/simpleroll_example.html Image Rollovers! Friday, June 28, 13
- 17. Friday, June 28, 13
- 18. And then came AJAX... Friday, June 28, 13
- 19. AJAX saved the Internets! Friday, June 28, 13
- 20. 2004 - 2006 Friday, June 28, 13
- 21. Friday, June 28, 13
- 22. New Breed of JS Frameworks Friday, June 28, 13
- 23. Friday, June 28, 13
- 24. An introduction to •100% JavaScript Framework •MVC •Opinionated •Modular & Extensible •Services & Dependency Injection •Simple yet powerful Templating •Data-binding heaven •Input validations •Animations! (new) •Testable •Many more awesome stuff... Friday, June 28, 13
- 25. •Single Page Apps •Responsive & Dynamic •Real-time & Interactive •Rich UI •User Friendly •I18n and L10n •Cross-platform - Desktop/Mobile •Animations •Control with Voice Commands What can we do? An introduction to Friday, June 28, 13
- 26. <!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/ 1.0.6/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html> Templates Friday, June 28, 13
- 27. <!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/ 1.0.6/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html> Templates & Directives Friday, June 28, 13
- 28. •ng-app •ng-controller •ng-model •ng-bind •ng-repeat •ng-show & ng-hide •your custom directives •any more more... http://docs.angularjs.org/api/ng Directives Friday, June 28, 13
- 29. ng-app <html> ... <body> ... <div ng-app> ... </div> Bootstraps the app and defines its root. One per HTML document. Directives <html> ... <body ng-app> ... <html ng-app> ... Friday, June 28, 13
- 30. ng-controller <html ng-app> <body> <div ng-controller=”TestController”> Hello {{name}} </div> <script> function TestController($scope) { $scope.name = ‘Pablo’; } </script> </body> </html> Defines which controller (function) will be linked to the view. Directives Friday, June 28, 13
- 31. ng-model <html ng-app> <body> <div> <input type=”text” ng-model=”name” /> <input type=”textarea” ng-model=”notes” /> <input type=”checkbox” ng-model=”notify” /> </div> </body> </html> Defines two-way data binding with input, select, textarea. Directives Friday, June 28, 13
- 32. ng-bind <html ng-app> <body> <div> <div ng-bind=”name”></div> {{name}} <!- less verbose --> </div> </body> </html> Replaces the text content of the specified HTML element with the value of a given expression, and updates the content when the value of that expression changes. Directives Friday, June 28, 13
- 33. ng-repeat <html ng-app> <body> <div> <ul> <li ng-repeat="item in items"> {{$index}}: {{item.name}} </li> </ul> </div> </body> </html> Instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key. Directives Friday, June 28, 13
- 34. ng-show & ng-hide <html ng-app> <body> <div> Click me: <input type="checkbox" ng-model="checked"><br/> <span ng-show="checked">Yes!</span> <span ng-hide="checked">Hidden.</span> </div> </body> </html> Show or hide a portion of the DOM tree (HTML) conditionally. Directives Friday, June 28, 13
- 35. Custom Directives <html ng-app> <body> <div> Date format: <input ng-model="format"> <hr/> Current time is: <span my-current-time="format"></span> </div> </body> </html> Create new directives to extend HTML. Encapsulate complex output processing in simple calls. Directives Friday, June 28, 13
- 36. $scope function GreetCtrl($scope) { $scope.name = 'World'; } function ListCtrl($scope) { $scope.names = ['Igor', 'Misko', 'Vojta']; $scope.pop = function() { $scope.names.pop(); } } ... <button ng-click=”pop()”>Pop</button> Scope holds data model per controller. It detects changes so data can be updated in the view. http://docs.angularjs.org/guide/scope Model Friday, June 28, 13
- 37. •A collection of configuration and run blocks which get applied to the application during the bootstrap process. •Third-party code can be packaged in Modules •Modules can list other modules as their dependencies •Modules are a way of managing $injector configuration •An AngularJS App is a Module http://docs.angularjs.org/guide/module Modules Friday, June 28, 13
- 38. http://docs.angularjs.org/guide/module <html ng-app=”myApp”> <body> <div ng-controller=”AppCtrl”> Hello {{name}} </div> </body> </html> var app = angular.module('myApp', []); app.controller( 'AppCtrl', function($scope) { $scope.name = 'Guest'; }); Modules Friday, June 28, 13
- 39. Filters typically transform the data to a new data type, formatting the data in the process. Filters can also be chained, and can take optional arguments {{ expression | filter }} {{ expression | filter1 | filter2 }} 123 | number:2 myArray | orderBy:'timestamp':true Filters Friday, June 28, 13
- 40. angular.module('MyReverseModule', []). filter('reverse', function() { return function(input, uppercase) { var out = ""; // ... return out; } }); Reverse: {{greeting|reverse}}<br> Reverse + uppercase: {{greeting|reverse:true}} Creating Filters Friday, June 28, 13
- 41. $routeProvider. when("/not_authenticated",{controller:NotAuthenticatedCtrl, templateUrl:"app/not-authenticated.html"}). when("/databases", {controller:DatabasesCtrl, templateUrl:"app/databases.html"}). when("/databases/add", {controller:AddDatabaseCtrl, templateUrl:"app/add-database.html"}). otherwise({redirectTo: '/databases'}); Routing •http://example.org/#/not_authenticated •http://example.org/#/databases •http://example.org/#/databases/add Friday, June 28, 13
- 42. Services Angular services are singletons that carry out specific tasks common to web apps. Angular provides a set of services for common operations. •$location - parses the URL in the browser address. Changes to $location are reflected into the browser address bar •$http - facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP •$resource - lets you interact with RESTful server-side data sources http://docs.angularjs.org/guide/dev_guide.services Friday, June 28, 13
- 43. + Friday, June 28, 13
- 44. • REST API • Silex + responsible-service-provider • Symfony2 + RestBundle • ZF2 + ZfrRest • WebSockets • React/Ratchet • node.js • AngularJS + Twig = Awesoness • AngularJS + Assetic = Small footprint + Friday, June 28, 13
- 45. <div> {{name}} </div> <!-- rendered by twig --> {% raw %} <div> {{name}} </div> <!-- rendered by AngularJS --> {% endraw %} AngularJS + Twig - Avoid conflicts + // application module configuration $interpolateProvider.startSymbol('[[').endSymbol(']]') .... <div> [[name]] </div> <!-- rendered by AngularJS --> Friday, June 28, 13
- 46. // _users.html.twig <script type="text/ng-template" id="users.html"> ... </script> // _groups.html.twig <script type="text/ng-template" id="groups.html"> ... </script> // index.html.twig {% include '_users.html.twig' %} {% include '_groups.html.twig' %} AngularJS + Twig - Preload templates + Friday, June 28, 13
- 47. {% javascripts "js/angular-modules/mod1.js" "js/angular-modules/mod2.js" "@AppBundle/Resources/public/js/controller/*.js" output="compiled/js/app.js" %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %} AngularJS + Assetic - Combine & minimize + Friday, June 28, 13
- 48. + Podisum http://github.com/pgodel/podisum gitDVR http://github.com/pgodel/gitdvr Generates summaries of Logstash events Silex app Twig templates REST API Advanced UI with AngularJS Replays git commits Friday, June 28, 13
- 49. + Podisum Apache access_log Logstash Redis Podisum redis-client MongoDB Podisum Silex App Web Client Friday, June 28, 13
- 50. Show me the CODE! + Friday, June 28, 13
- 51. •http://ngmodules.org/ •http://angular-ui.github.io/ •https://github.com/angular/angularjs-batarang •https://github.com/angular/angular-seed •https://github.com/angular-adaptive/adaptive-speech •Animations http://bit.ly/Z4WD7X •Test REST APIs with Postman Chrome Extension Extras Friday, June 28, 13
- 53. Thank you! Rate Me Please! https://joind.in/8695 Slides: http://slideshare.net/pgodel Twitter: @pgodel E-mail: pablo@servergrove.com Friday, June 28, 13