lone starphp 2013 - building web apps from a new angle
DESCRIPTION
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.TRANSCRIPT
Pablo Godel @pgodel - lonestarphp.comJune 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 codecontributions 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 JavaScriptand 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 appTwig templatesREST APIAdvanced 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/8695Slides: http://slideshare.net/pgodel
Twitter: @pgodelE-mail: [email protected]
Friday, June 28, 13