Perl Mongers




RESTful Web Application Development with AngularJS and Mojolicious::Lite

MVC Development Pattern

  • Model-View-Controller
    • Model - can consist of application data, business logic and functions/methods.
      • Active - notifies the view and/or controller of a change in its state.
      • Passive - view and/or controller must poll to see if state has changed.
    • View - output representation of model.
    • Controller - handles interaction between view and model.
  • AngularJS and Mojolicious exemplify this pattern.

Frameworks

  • Bootstrap
    • Front-end Framework
    • Responsive
  • AngularJS
    • JavaScript Framework
    • Single Page Applications (SPA)
      • Most resources pulled in single page load, some resources dynamically loaded based on user action 
    • Individual components easily tested
  • Mojolicious
    • Perl Framework
    • Mojolicious::Lite - out-of-the-box RESTful support

REPRESENTATIONal state transfer

  • Uses HTTP to handle CRUD Operations
    • Create Read Update Delete
  • Request Methods
    • GET (Read) - HTTP 200 OK - Idempotent
      • Used to retrieve a resource, does not alter a resource
      • Default browser action
    • POST (Create) - HTTP 201 Created
      • Used to create a new, previously unknown resource
      • Typically redirects to the newly created resource
    • PUT (Update) - HTTP 200 OK - Idempotent
      • Used to update an already existing resource
    • DELETE (Delete) - HTTP 200 OK - Idempotent
      • Removes a resource
  • Idempotent - server remains in the same state

Bootstrap Front-End

git clone https://github.com/rooeydaniel/angular-mojo-todo.git 
  • NPM
    • Node.js package manager (package.json)
 
    • package.json
git checkout v1
npm install 

  • Bower
    • Front-end package manager
    • bower.json, .bowerrc

git checkout v2 
npm install

BOOTSTRAP FRONT-END

  • Node.js
    • Used as a simple Web server
    • server/server.js, index.html
git checkout v3
cd frontend
node server/server.js 

    • Go to http://localhost:8000

BOOTSTRAP FRONT-END

  • AngularJS
    • angular.js
      • Necessary library typically included in head.
    • ng-app
      • Built-in Angular directive
        • A directive is Angular's way of creating a new HTML element with custom functionality.
        • ng-app in HTML  becomes ngApp in JavaScript declaration.
      • Declares that the block needs to be processed by the Angular library.
    • {{ }} - Angular evaluates - similar to {%= %} in JSP.

Bootstrap front-end

    • app.js
      • Declare the Angular module that will be used for this Web app.
      • Name with ng-app must match name of the Angular module.
  • Bootstrap
    • Include core bootstrap.css (pulled in through Bower)
    • Include app specific CSS file - css/app.css
    • Apply bootstrap CSS classes to HTML elements
git checkout v4

Todo App - Listing

  • JSON
    • JavaScript Object Notation
    • Associative Array (hash) representation of data
    • Most common way to marshal data back and forth between client and server when using RESTful Web services
  • Angular Services
    • $http is a built-in Angular service
      • asyncronous - facilitates communications with remote servers
    • Are typically utilized by controllers through Dependency Injection (DI)

TODO APP - LISTING

  • Angular Controllers
    • Can be declared in app.js, however, typically broken out into their own file(s).
    • Sets up a $scope (the model or view model) - a POJO

TODO APP - LISTING

  • Angular Directives
    • directives are Angular’s method of creating new HTML elements that have their own custom functionality.

    • ng-show/ng-hide
      • Will show/hide an element based on true/false
    • ng-repeat
      • Will repeat the tag (and any embedded elements) list.length number of times
    • ng-model 
      • Binds the element to to the $scope - this allows two-way data binding 
 git checkout v5 node server/server.js

TODO APP - LISTING

  • Mojolicious::Lite - hook up back end
    • Install Mojolicious::Lite and Mojo::Server::Morbo
    • Routes
  • Access-Control-Allow-Origin

 sudo perl -MCPAN -e shell cpan> install Mojolicious::Lite cpan> install Mojo::Server::Morbo cpan> exit cd /path/to/backend morbo lib/MojoAngular.pm

TODO APP - CREATE

  • Mojolicious - before_route
    • A "hook" - subroutines that are called at a particular time in app execution.
    • before_route gets called before the built-in router starts its work.  
  • Mojolicious - post route
    • Only accepts a call to that route if the request method is POST
    • Handles the creation of a new todo
    • In this case, we simply append the new todo to our static json data structure.

TODO APP - CREATE

  • ng-model
    • todoTitle, ng-model is a directive that binds todoTitle to the current $scope (model)
  • ng-click
    • addTodo(todoTitle), ng-click is a directive that executes a function on the $scope called addTodo and passes the input todoTitle as a parameter
  • AngularJS TodoController
    • In controller.js, inside of the TodoController, we define a new function called addTodo
    • Makes a RESTful call through $http to Mojolicious with the new title

TODO APP - CREATE

 git checkout v7 cd frontend npm install node server/server.js # Open a separate tab cd ../backend morbo lib/MojoAngular.pm

TODO APP - Update

  • Mojolicious group, under
    • Group - allows you to organize related routes
    • Under - allows you to share common code between related routes
  • Mojolicious PUT
    • Pass the entire object, guaranteeing that the data will be the same every time
  • Mojolicious Access-Control-Allow-Methods
    • Allows you to globally restrict the request methods allowed against your backend system
  • ng-checked
    • If the expression is "truthy", set the checked element
  • ng-change
    • Expression to evaluate upon change of the input value

Todo App - Update

 git checkout v8 cd frontend npm install node server/server.js cd ../backend morbo lib/MojoAngular.pm

TODO APP - Delete

  • Mojolicious DELETE
    • Request method allowing the deletion of a single todo item
  • Mojolicious Placeholders
    • Route placeholders allow capturing parts of a request path
    • Pieces can be accessed via stash or param
  • Mojolicious Access-Control-Allow-Methods
    • Added DELETE so that app globally accepts this request method
  • ng-click
    • Expression to evaluate upon click

Todo app - delete

 git checkout v9 cd frontend npm install node server/server.js cd ../backend morbo lib/MojoAngular.pm

Useful Resources

  • ng-book
  • ng-newsletter.com
  • AngularJS.org
    • Official tutorial - http://docs.angularjs.org/tutorial
  • Mojolicious
    • http://mojolicio.us/
    • http://mojolicio.us/perldoc/Mojolicious/Lite
    • http://preaction.github.io/Perl/Mojo-Angular.html#1
Made with Slides.com