Lone StarPHP 2013 - Building Web Apps from a New Angle
6 likes•6,455 views
The document is a presentation by Pablo Godel discussing the development of web applications using AngularJS, highlighting its features such as MVC architecture, data binding, and directives. It also covers topics on web hosting, open source contributions, and the integration of AngularJS with back-end technologies like Symfony and Silex. Additionally, Godel shares resources and tools for developers to enhance their AngularJS applications.
![$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](https://image.slidesharecdn.com/lonestarphp2013-buildingwebappsfromanewangle-130628151755-phpapp02/85/Lone-StarPHP-2013-Building-Web-Apps-from-a-New-Angle-36-320.jpg)
![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](https://image.slidesharecdn.com/lonestarphp2013-buildingwebappsfromanewangle-130628151755-phpapp02/85/Lone-StarPHP-2013-Building-Web-Apps-from-a-New-Angle-38-320.jpg)
![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](https://image.slidesharecdn.com/lonestarphp2013-buildingwebappsfromanewangle-130628151755-phpapp02/85/Lone-StarPHP-2013-Building-Web-Apps-from-a-New-Angle-40-320.jpg)
![<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](https://image.slidesharecdn.com/lonestarphp2013-buildingwebappsfromanewangle-130628151755-phpapp02/85/Lone-StarPHP-2013-Building-Web-Apps-from-a-New-Angle-45-320.jpg)
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
- 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: [email protected] Friday, June 28, 13