3. Single-page applications
• All "static" assets delivered in single page load
• Page does not do full reload cycle during usage
• May have backend returning JSON in response to
user actions
• Client-side Javascript code handles UI updates
5. Angular.js
• Client-side MVC Javascript framework
• Developed at Google
• "HTML enhanced"
• Great for "single page" web apps
6. Easy to get started with Angular
<!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text/javascript" src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<script type="text/javascript">
function demoCtrl ($scope) {
$scope.demoValue = "foo"
}
</script>
</head>
<body ng-app>
<div ng-controller="demoCtrl">
<h1>{{demoValue}}</h1>
<input type="text" ng-model="demoValue" />
</div>
</body>
</html>
7. <!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text/javascript" src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<script type="text/javascript">
function demoCtrl ($scope) {
$scope.demoValue = "foo"
}
</script>
</head>
<body ng-app>
<div ng-controller="demoCtrl">
<h1>{{demoValue}}</h1>
<input type="text" ng-model="demoValue" />
</div>
</body>
</html>
Easy to get started with Angular
Load angular library
8. <!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text/javascript" src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<script type="text/javascript">
function demoCtrl ($scope) {
$scope.demoValue = "foo"
}
</script>
</head>
<body ng-app>
<div ng-controller="demoCtrl">
<h1>{{demoValue}}</h1>
<input type="text" ng-model="demoValue" />
</div>
</body>
</html>
Easy to get started with Angular
Bootstrap Angular
9. <!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text/javascript" src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<script type="text/javascript">
function demoCtrl ($scope) {
$scope.demoValue = "foo"
}
</script>
</head>
<body ng-app>
<div ng-controller="demoCtrl">
<h1>{{demoValue}}</h1>
<input type="text" ng-model="demoValue" />
</div>
</body>
</html>
Easy to get started with Angular
Tie this <div> to this
chunk of controller code
(which means
'demoValue' is available)
10. <!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text/javascript" src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<script type="text/javascript">
function demoCtrl ($scope) {
$scope.demoValue = "foo"
}
</script>
</head>
<body ng-app>
<div ng-controller="demoCtrl">
<h1>{{demoValue}}</h1>
<input type="text" ng-model="demoValue" />
</div>
</body>
</html>
Easy to get started with Angular
Angular template – replaced
with value of demoValue
Data binding –
changing input
changes value
of demoValue
22. Easy to grow that simple server…
into a full Plack-based application.
23. Prototyping with Plack
• Static file serving
• Middleware for session management
• Authentication via middleware
• Prototype your backend API (using OX or Dancer)
• Possible to merge "typical" JS app layout and
"typical" Perl module layout without conflicts
