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

Pablo Godel @pgodel - tek.phparch.com
May 15th 2013 - Chicago, IL
https://joind.in/8177
Building Web Apps From a
New Angle with AngularJS
Wednesday, 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 ServerGrove

⁃ Founded ServerGrove Networks in 2005
⁃ Provider of web hosting specialized in PHP,
Symfony, ZendFramework, MongoDB and others
⁃ Servers in USA and Europe!
ServerGrove!

⁃ Very active open source supporter through code
contributions and usergroups/conference sponsoring
Community is our teacher

In the beginning there was HTML...

Then it came JavaScript

Then it came JavaScript
and it was not cool...

It was Important Business!

It was Serious Business!

Very Important Uses

Image Rollovers!

http://joemaller.com/javascript/simpleroll/simpleroll_example.html
Image Rollovers!

And then came AJAX...

AJAX saved the Internets!

2004 - 2006

New Breed of JS Frameworks

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

•Single Page Apps
•Responsive & Dynamic
•Real-time & Interactive
•Rich UI
•User Friendly
•I18n and L10n
•Cross-platform
•Desktop/Mobile
What can we do?
An introduction to

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

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

•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

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

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

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

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

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

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

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

$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

•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

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

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

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

$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

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

• REST API
• Silex + responsible-service-provider
• Symfony2 + RestBundle
• ZF2 + ZfrRest
• WebSockets
• React/Ratchet
• node.js
• AngularJS + Twig = Awesoness
• AngularJS + Assetic = Small footprint
+

<div> {{name}} </div> 
{% raw %}
<div> {{name}} </div> 
{% endraw %}
AngularJS + Twig - Avoid conflicts
+
// application module configuration
$interpolateProvider.startSymbol('[[').endSymbol(']]')
....
<div> [[name]] </div>

// _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
+

{% 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
+

Show me the CODE!
+

+
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

+
Podisum
Apache access_log Logstash
Redis
Podisum redis-client
MongoDB
Podisum Silex App
Web Client

•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 Chrome
Extension
Extras

Questions?
+

Thank you!
Rate Me Please! https://joind.in/8177
Slides: http://slideshare.net/pgodel
Twitter: @pgodel
E-mail: pablo@servergrove.com

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

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Tek 2013 - Building Web Apps from a New Angle with AngularJS (20)

More from Pablo Godel (20)

Recently uploaded (20)

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