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

on

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

Statistics

Views

Total Views
10,267
Views on SlideShare
10,258
Embed Views
9

Actions

Likes
11
Downloads
82
Comments
0

2 Embeds 9

http://www.linkedin.com 7
http://librosweb.es 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

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

  • Pablo Godel @pgodel - tek.phparch.comMay 15th 2013 - Chicago, ILhttps://joind.in/8177Building Web Apps From aNew Angle with AngularJSWednesday, May 15, 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⁃ Master of the parrilla⁃ Co-founder of ServerGroveWednesday, May 15, 13
  • Wednesday, May 15, 13
  • Wednesday, May 15, 13
  • ⁃ 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
  • ⁃ Very active open source supporter through codecontributions and usergroups/conference sponsoringCommunity is our teacherWednesday, May 15, 13
  • In the beginning there was HTML...Wednesday, May 15, 13
  • Wednesday, May 15, 13
  • Then it came JavaScriptWednesday, May 15, 13
  • Then it came JavaScriptand it was not cool...Wednesday, May 15, 13
  • It was Important Business!Wednesday, May 15, 13
  • It was Serious Business!Wednesday, May 15, 13
  • It was Serious Business!Wednesday, May 15, 13
  • Very Important UsesWednesday, May 15, 13
  • Image Rollovers!Wednesday, May 15, 13
  • http://joemaller.com/javascript/simpleroll/simpleroll_example.htmlImage Rollovers!Wednesday, May 15, 13
  • Wednesday, May 15, 13
  • And then came AJAX...Wednesday, May 15, 13
  • AJAX saved the Internets!Wednesday, May 15, 13
  • 2004 - 2006Wednesday, May 15, 13
  • Wednesday, May 15, 13
  • New Breed of JS FrameworksWednesday, May 15, 13
  • Wednesday, May 15, 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...Wednesday, May 15, 13
  • •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
  • <!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
  • <!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
  • •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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • $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
  • •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
  • 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
  • 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
  • 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
  • $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
  • 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
  • +Wednesday, May 15, 13
  • • 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
  • <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
  • // _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
  • {% 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
  • Show me the CODE!+Wednesday, May 15, 13
  • +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
  • +PodisumApache access_log LogstashRedisPodisum redis-clientMongoDBPodisum Silex AppWeb ClientWednesday, May 15, 13
  • •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
  • Questions?+Wednesday, May 15, 13
  • Thank you!Rate Me Please! https://joind.in/8177Slides: http://slideshare.net/pgodelTwitter: @pgodelE-mail: pablo@servergrove.comWednesday, May 15, 13