Perl Mongers

• NPM
• Node.js package manager (package.json)

• package.json

• Node.js
• Used as a simple Web server
• server/server.js, index.html

• Go to http://localhost:8000

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

• 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

• 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)

• 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

• 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

• 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

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

• 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

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

• 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

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

• 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

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