Post on 14-Jul-2015
&
26 maart 2013Iwan van Staveren
AgendaWie ben ikWat is SymfonyWat is AngularJSWaarom handig?Hoe beide te gebruikenTwigFosRestBundleVragen
Wie ben ik?Iwan van Staveren
Software architect bij Oracle13 jaar ervaring met PHP
7 jaar ervaring met Symfony
Twitter: @istaveren
nl.linkedin.com/in/iwanvanstaveren
Wat is ?Dat weten we hier wel :-)
Volgens
Symfony is a PHP Web Development Framework. That doesn’t answer your question?
Ok, let’s try that again. Symfony is a PHP Framework, a Philosophy, and a Community -
all working together in harmony.
symfony.com
Wat is Een open-source Javascript framework
Of zo als ze het zelf zeggen:
HTML enhanced for web apps!
AngularJS
MVCModels / Views / Controllers
Resources
... en nog veel meer!
var User = $resource('/api/users/', {id: '@objectId'});
// Default methods{ 'get': {method:'GET'}, 'save': {method:'POST'}, 'query': {method:'GET', isArray:true}, 'remove': {method:'DELETE'}, 'delete': {method:'DELETE'} };
Resources...User.prototype.isHacker = function() { return this.is_hacker; }User.prototype.hackStuff = function(p) { this.current = p; }...
HTML
Templates in HTML, niet in Javascript!
<div ng-controller="ItemsController"> <p>Total items: <input ng-model="items" type="number" /></p> <ul> <li>Total items {{ items }} </li> <li>Total added {{ addTwo(items) }} </li> </ul><div>
Controllers
DemoItems 2
Total items 2Items added 4
function ItemController($scope){ $scope.items = 2;
$scope.addTwo = function(input) { return input + 2; }}
Hoe te beginnnen
Angular heeft zijn eigen scope in javascript en de DOM
<html ng-app="HackerApp"> ... <div ng-controller="AwesomeHackerCtrl">...</div> <div ng-controller="SuperHackerCtrl">...</div> </html>
ng-app
Config & setup
var DemoAppModule = angular.module('DemoApp', ['models']). config(function($interpolateProvider) { $interpolateProvider.startSymbol('<['); $interpolateProvider.endSymbol('>'); });
ng-controller
Scoped local methods
// DemoData controller function DemoDataCtrl($window, $rootScope, $scope, $http, User) {
$scope.users = User.query(function(data) { // Validate each User });
$scope.validateUser = function(h) { // Determine if valid user }; }
Services angular.module('models', ['ngResource', 'ngCookies']). factory('Hacker', function($resource) {
var Hacker = $resource("/api/hacker/:id", {id: "@id"})
// Add class methods Hacker.login = function(data, success, error) { $http.post('/api/login/', data). success(success). error(error); });
DirectivesPas de HTML aan zo als jij dat wilt. Mis je een <tab> tag in
HTML dan kan je hem hiermee maken.Eigenlijk een MVC in een tag.
TestenDat zit er bij net als bij Symfony.
Heet Karma en werkt als unit testen.
Starting Testacular Server (http://vojtajina.github.com/testacular)-------------------------------------------------------------------info: Testacular server started at http://localhost:9876/info (launcher): Starting browser Chromeinfo (Chrome 25.0): Connected on socket id TszbEIbJKa9gxm647LC3Chrome 25.0: Executed 10 of 10 SUCCESS (0.435 secs / 0.1 secs)
Routing
ng-view <html ng-app="HackerApp"> ... <div ng-view></div> </html>
The Router// Configure routesHA.config(function($routeProvider, $locationProvider) { $routeProvider. when('/s/', {controller: SHCtrl, templateUrl: '/static/sh.html'}). when('/a/', {controller: AHCtrl, templateUrl: '/static/ah.html'}). otherwise({redirectTo: '/'});
// Set HTML5 Mode for routes $locationProvider.html5Mode(true);});
Gotchas(Or: things you wish they told you)
$resourceDistributed separately
$cookiesAlso distributed separately
Therefore<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script><script src="http://code.angularjs.org/angular-resource-1.0.5.min.js"></script><script src="http://code.angularjs.org/1.0.5/angular-cookies-1.0.5.min.js"></script>
AngularJS is friendlyBut it chooses its friends carefully
Waarom handig?Meer logica naar de clientGeeft een betere response naar de gebruikerMinder load op de serverEr komen steeds meer appsApps en web pagina's kunnen de zelfde backend API gebruiken
Vraag hoevel % code PHP /Javascript
In 2010?In 2013?In 2015?
Hoe beide te gebruiken?Voeg AngulerJS toe aan je twig template
Let op! In dev mode gebruik niet de minified versie. Dat debugtniet echt handig in Javascript
{% block foot_script %} {% if app.debug %} <script type="text/javascript" src="{{ asset('bundles/demo/js/angular/angular.js') }}"></script> <script type="text/javascript" src="{{ asset('bundles/demo/js/angular/angular-resource.js') }}"></script> <script type="text/javascript" src="{{ asset('bundles/demo/js/angular/angular-ui.js') }}"></script> {% else %} {%- javascripts '@DemoBundle/Resources/public/js/angular/angular.min.js' '@DemoBundle/Resources/public/js/angular/angular-resource.min.js' '@DemoBundle/Resources/public/js/angular/angular-ui.min.js' %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %} {% endif %}<script type="text/javascript" src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script><script type="text/javascript" src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>{% endblock %}
Twig & AngularJS templatesAangezien zowel AngularJS als Twig {{ }} gebruikt voor variable.
Moet er één worden aangepast.Handigst is AngularJS op de volgende manier:
var DemoAppModule = angular.module('DemoApp', ['models']). config(function($interpolateProvider) { $interpolateProvider.startSymbol('<['); $interpolateProvider.endSymbol('>'); });
FOSRestBundleMet de hulp van deze bundle krijg je data die normaal naar twig
gaat eenvoudig terug als json response
Geeft voor app_dev.php/demo/books/Iwan?_format=json
public function booksAction($name) { $view = View::create(array('books' => array("Book $name 1", "Book $name 2"), 'name' => $name)); $view->setTemplate('AcmeDemoBundle:Demo:hello.html.twig'); $handler = $this->get('fos_rest.view_handler'); return $handler->handle($view); }
{"books":["Book Iwan 1","Book Iwan 2"],"name":"Iwan"}
Vragen
Credits for the slides: Vojta Jína, Miško Hevery, Igor Minar,Patrick Aljord.