Modern Web Apps with Mojolicious, Angular, and Bootstrap

class: inverse center middle
# Modern Web Apps
### Mojolicious; MongoDB; Angular.js; Bootstrap
---
class: center middle
# Prologue
## A user database longs for an app
---
class: inverse center middle
# Getting Started
## The Mojolicious Part
---
class: middle
.center[
# The Minimum App
]
```perl
#!/usr/bin/env perl

use Mojolicious::Lite;

app->start;
```
.footnote[
[app-01.pl](Mojo-Angular/app-01.pl.html)
]
---
class: middle
.center[
# An index page
## Our application
]
```perl
#!/usr/bin/env perl

use Mojolicious::Lite;

get '/' => sub {
    my ( $self ) = @_;
    $self->render( 'index' );
};

app->start;
__DATA__
@@ index.html.ep
<h1>It works!</h1>
```
.footnote[
[app-02.pl](Mojo-Angular/app-02.pl.html)
]
---
class: inverse center middle
# Database APIs
## The MongoDB Part
---
class: middle
.center[
# All Users JSON
]
```perl
use Mango;
my $mango = Mango->new;
$mango->default_db( 'jade_kingdom' );

get '/api/user' => sub {
    my ( $self ) = @_;
    $self->render(
        json => $mango->db->collection('user')->find->all,
    );
};
```
.footnote[
[app-03.pl](Mojo-Angular/app-03.pl.html)
]
---
class: inverse center middle
# Bring In Angular
## The Fun Part Begins
---
class: middle
.center[
# Some Basic HTML
]
```html
<!DOCTYPE html>
<html>
    <body>
        <table>
            <tr>
                <th>E-mail</th>
                <th>Created</th>
                <th>Last Seen</th>
                <th>Can Play</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <script src="/js/angular.min.js"></script>
    </body>
</html>
```
.footnote[
[app-04.pl](Mojo-Angular/app-04.pl.html)
]
---
class: middle
.center[
# Get The Users
]
```html
        <script src="/js/angular.min.js"></script>
        <script src="/js/angular-resource.min.js"></script>
        <script>
            angular.module( 'MyApp', [ 'ngResource' ] )
            .factory( 'User', [ '$resource',
                    function ( $resource ) {
                        return $resource( '/api/user/:id', { id: '@_id' } );
                    }
                ]
            )
            .controller( 'UserCtrl', [ '$scope', 'User',
                    function ( $scope, User ) {
                        $scope.users = User.query();
                    }
                ]
            )
            ;
        </script>
```
.footnote[
[app-05.pl](Mojo-Angular/app-05.pl.html)
]
---
class: middle
.center[
# Integrate Angular
]
```html
<!DOCTYPE html>
<html id="ng-app" ng-app="MyApp">
    <body ng-controller="UserCtrl">
        <table>
            <tr>
                <th>E-mail</th>
                <th>Created</th>
                <th>Last Seen</th>
                <th>Can Play</th>
            </tr>
            <tr ng-repeat="user in users">
                <td>{{user.email}}</td>
                <td>{{user.date_created}}</td>
                <td>{{user.date_last_seen}}</td>
                <td>{{user.can_play}}</td>
            </tr>
        </table>
```
.footnote[
[app-06.pl](Mojo-Angular/app-06.pl.html)
]
---
class: inverse center middle
# Make It Pretty
## The Bootstrap Part
---
class: middle
.center[
# Add Bootstrap Classes
]
```html
    <head>
        <link rel="stylesheet" href="/css/bootstrap.min.css" />
    </head>
    <body ng-controller="UserCtrl" class="container">
        <table class="table table-striped">
```
.footnote[
[app-07.pl](Mojo-Angular/app-07.pl.html)
]
---
class: middle
.center[
# Format the dates
]
```html
            <tr ng-repeat="user in users">
                <td>{{user.email}}</td>
                <td>{{format_date(user.date_created)}}</td>
                <td>{{format_date(user.date_last_seen)}}</td>
                <td>{{user.can_play}}</td>
            </tr>
```
```js
            .controller( 'UserCtrl', [ '$scope', 'User',
                    function ( $scope, User ) {
                        $scope.users = User.query();
                        $scope.format_date = function ( epoch ) {
                            if ( !epoch ) return;
                            return moment( epoch ).calendar();
                        };
                    }
                ]
            )
```
.footnote[
[app-08.pl](Mojo-Angular/app-08.pl.html)
]
---
class: inverse center middle
# Edit the users
---
# POST an update
```perl
post '/api/user/:id' => sub {
    my ( $self ) = @_;
    my $id = $self->stash( 'id' );
    my $update = Mojo::JSON->new->decode( $self->req->body );
    $update->{_id} = bson_oid $update->{_id};
    $mango->db->collection('user')->save( $update );
    return $self->redirect_to( 
        url_for('apiuserid', id => $id, method => 'GET' ) 
    );
};

get '/api/user/:id' => sub {
    my ( $self ) = @_;
    my $id = bson_oid $self->stash( 'id' );
    $self->render(
        json => $mango->db->collection('user')
            ->find_one({ _id => $id }) || {},
    );
};
```
```html
                <td><input type="checkbox" ng-model="user.can_play" 
                    ng-change="user.$save()" /></td>
```
.footnote[
[app-09.pl](Mojo-Angular/app-09.pl.html)
]
---
class: middle center inverse
# Questions?
---
class: 
.center[
# It's over!
]

* [Modern Perl Web Apps presentation slides: <br> http://preaction.github.io/Perl/Mojo-Angular.html](http://preaction.github.io/Perl/Mojo-Angular.html)