Lone StarPHP 2013 - Building Web Apps from a New Angle
Upcoming SlideShare
Loading in...5
×
 

Lone StarPHP 2013 - Building Web Apps from a New Angle

on

  • 3,920 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 ...

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.

Statistics

Views

Total Views
3,920
Views on SlideShare
3,898
Embed Views
22

Actions

Likes
3
Downloads
36
Comments
0

4 Embeds 22

http://librosweb.es 15
http://vestaedge.success-ss.com.vn 3
http://blog.success-ss.com.vn 2
http://billinghouse.success-ss.com.vn 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Lone StarPHP 2013 - Building Web Apps from a New Angle Lone StarPHP 2013 - Building Web Apps from a New Angle Presentation Transcript

    • 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
    • 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
    • Friday, June 28, 13
    • Friday, June 28, 13
    • ⁃ 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
    • Very active open source supporter through code contributions and usergroups/conference sponsoring Community is our teacher Friday, June 28, 13
    • In the beginning there was HTML... Friday, June 28, 13
    • Friday, June 28, 13
    • Then it came JavaScript Friday, June 28, 13
    • Then it came JavaScript and it was not cool... Friday, June 28, 13
    • It was Important Business! Friday, June 28, 13
    • It was Serious Business! Friday, June 28, 13
    • It was Serious Business! Friday, June 28, 13
    • Very Important Uses Friday, June 28, 13
    • Image Rollovers! Friday, June 28, 13
    • http://joemaller.com/javascript/simpleroll/simpleroll_example.html Image Rollovers! Friday, June 28, 13
    • Friday, June 28, 13
    • And then came AJAX... Friday, June 28, 13
    • AJAX saved the Internets! Friday, June 28, 13
    • 2004 - 2006 Friday, June 28, 13
    • Friday, June 28, 13
    • New Breed of JS Frameworks Friday, June 28, 13
    • Friday, June 28, 13
    • 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
    • •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
    • <!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
    • <!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
    • •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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • $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
    • •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
    • 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
    • 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
    • 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
    • $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
    • 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
    • + Friday, June 28, 13
    • • 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
    • <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
    • // _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
    • {% 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
    • + 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
    • + Podisum Apache access_log Logstash Redis Podisum redis-client MongoDB Podisum Silex App Web Client Friday, June 28, 13
    • Show me the CODE! + Friday, June 28, 13
    • •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
    • Questions? + Friday, June 28, 13
    • 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