Like this? Share it with your network

Share

Tek 2013 - Building Web Apps from a New Angle with AngularJS

  • 11,497 views
Uploaded on

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......

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 communicate with a REST server built with PHP.

More 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
11,497
On Slideshare
11,488
From Embeds
9
Number of Embeds
2

Actions

Shares
Downloads
87
Comments
0
Likes
11

Embeds 9

http://www.linkedin.com 7
http://librosweb.es 2

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. Pablo Godel @pgodel - tek.phparch.comMay 15th 2013 - Chicago, ILhttps://joind.in/8177Building Web Apps From aNew Angle with AngularJSWednesday, May 15, 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⁃ Master of the parrilla⁃ Co-founder of ServerGroveWednesday, May 15, 13
  • 3. Wednesday, May 15, 13
  • 4. Wednesday, May 15, 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!Wednesday, May 15, 13
  • 6. ⁃ Very active open source supporter through codecontributions and usergroups/conference sponsoringCommunity is our teacherWednesday, May 15, 13
  • 7. In the beginning there was HTML...Wednesday, May 15, 13
  • 8. Wednesday, May 15, 13
  • 9. Then it came JavaScriptWednesday, May 15, 13
  • 10. Then it came JavaScriptand it was not cool...Wednesday, May 15, 13
  • 11. It was Important Business!Wednesday, May 15, 13
  • 12. It was Serious Business!Wednesday, May 15, 13
  • 13. It was Serious Business!Wednesday, May 15, 13
  • 14. Very Important UsesWednesday, May 15, 13
  • 15. Image Rollovers!Wednesday, May 15, 13
  • 16. http://joemaller.com/javascript/simpleroll/simpleroll_example.htmlImage Rollovers!Wednesday, May 15, 13
  • 17. Wednesday, May 15, 13
  • 18. And then came AJAX...Wednesday, May 15, 13
  • 19. AJAX saved the Internets!Wednesday, May 15, 13
  • 20. 2004 - 2006Wednesday, May 15, 13
  • 21. Wednesday, May 15, 13
  • 22. New Breed of JS FrameworksWednesday, May 15, 13
  • 23. Wednesday, May 15, 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...Wednesday, May 15, 13
  • 25. •Single Page Apps•Responsive & Dynamic•Real-time & Interactive•Rich UI•User Friendly•I18n and L10n•Cross-platform•Desktop/MobileWhat can we do?An introduction toWednesday, May 15, 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 aname here"><hr><h1>Hello {{yourName}}!</h1></div></body></html>TemplatesWednesday, May 15, 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 aname here"><hr><h1>Hello {{yourName}}!</h1></div></body></html>Templates &DirectivesWednesday, May 15, 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/ngDirectivesWednesday, May 15, 13
  • 29. ng-app<html>...<body>...<div ng-app>...</div>Bootstraps the app and defines its root. One per HTMLdocument.Directives<html>...<body ng-app>...<html ng-app>...Wednesday, May 15, 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.DirectivesWednesday, May 15, 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.DirectivesWednesday, May 15, 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 withthe value of a given expression, and updates the contentwhen the value of that expression changes.DirectivesWednesday, May 15, 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. Eachtemplate instance gets its own scope, where the given loopvariable is set to the current collection item, and $index is setto the item index or key.DirectivesWednesday, May 15, 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.DirectivesWednesday, May 15, 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 complexoutput processing in simple calls.DirectivesWednesday, May 15, 13
  • 36. $scopefunction 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 detectschanges so data can be updated in the view.http://docs.angularjs.org/guide/scopeModelWednesday, May 15, 13
  • 37. •A collection of configuration and run blocks which getapplied 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 Modulehttp://docs.angularjs.org/guide/moduleModulesWednesday, May 15, 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;});ModulesWednesday, May 15, 13
  • 39. Filters typically transform the data to a new datatype, formatting the data in the process. Filters canalso be chained, and can take optional arguments{{ expression | filter }}{{ expression | filter1 | filter2 }}123 | number:2myArray | orderBy:timestamp:trueFiltersWednesday, May 15, 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 FiltersWednesday, May 15, 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/addWednesday, May 15, 13
  • 42. ServicesAngular services are singletons that carry out specific taskscommon to web apps. Angular provides a set of services forcommon operations.•$location - parses the URL in the browser address. Changesto $location are reflected into the browser address bar•$http - facilitates communication with the remote HTTPservers via the browsers XMLHttpRequest object or via JSONP•$resource - lets you interact with RESTful server-side datasourceshttp://docs.angularjs.org/guide/dev_guide.servicesWednesday, May 15, 13
  • 43. +Wednesday, May 15, 13
  • 44. • REST API• Silex + responsible-service-provider• Symfony2 + RestBundle• ZF2 + ZfrRest• WebSockets• React/Ratchet• node.js• AngularJS + Twig = Awesoness• AngularJS + Assetic = Small footprint+Wednesday, May 15, 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 -->Wednesday, May 15, 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+Wednesday, May 15, 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+Wednesday, May 15, 13
  • 48. Show me the CODE!+Wednesday, May 15, 13
  • 49. +Podisum http://github.com/pgodel/podisumgitDVR http://github.com/pgodel/gitdvrGenerates summaries of Logstash eventsSilex appTwig templatesREST APIAdvanced UI with AngularJSReplays git commitsWednesday, May 15, 13
  • 50. +PodisumApache access_log LogstashRedisPodisum redis-clientMongoDBPodisum Silex AppWeb ClientWednesday, May 15, 13
  • 51. •http://ngmodules.org/•http://angular-ui.github.io/•https://github.com/angular/angularjs-batarang•https://github.com/angular/angular-seed•Test REST APIs with Postman ChromeExtensionExtrasWednesday, May 15, 13
  • 52. Questions?+Wednesday, May 15, 13
  • 53. Thank you!Rate Me Please! https://joind.in/8177Slides: http://slideshare.net/pgodelTwitter: @pgodelE-mail: pablo@servergrove.comWednesday, May 15, 13