- 1. Web Application development
- 2. About
- 2.1. Course Goals
- 2.2. Challenges of Mobile web development
- 2.3. About the course
- 2.4. Editors
- 3. Backend
- 3.1. Proxy and Mojolicious Ajax server
- 4. HTML and CSS
- 4.1. Emulate devices
- 4.2. Browserstack screenshots
- 4.3. Mobile or Responsive?
- 4.4. HTML elements
- 4.5. HTML form elements
- 4.6. Bare HTML
- 4.7. HTML and CSS
- 4.8. Viewport and Media Query for body
- 4.9. Viewport and Media Query
- 4.10. Pixels (px), em, rem
- 4.11. Units: px (pixels)
- 4.12. Units: em (The size of Letter M)
- 4.13. Units: rem (root em)
- 4.14. Viewport width and height
- 4.15. Exercise: Responsive HTML
- 5. CSS
- 5.1. CSS - embed in HTML file
- 5.2. CSS - include from external file
- 5.3. CSS syntax
- 5.4. CSS attributes
- 5.5. CSS selectors
- 5.6. HTML/CSS frameworks
- 6. AngularJS
- 6.1. What is AngularJS
- 6.2. MVC Model-View-Controller and Angular (MVW or MV*)
- 6.3. Learning curve
- 6.4. Major Parts of AngularJS
- 6.5. Getting Started AngularJS
- 6.6. Simple AngularJS expression
- 6.7. Variables in AngularJS expressions
- 6.8. Separate variable assignment and usage into two expressions
- 6.9. Separate variable assignment and usage into two expressions - fixed
- 6.10. Minimal Hello User: Binding with ng-model
- 6.11. Full Hello User
- 6.12. AngularJS controller with output
- 6.13. AngularJS - Dependency Injection
- 6.14. Angular controller with binding
- 6.15. Add numbers using AngularJS
- 6.16. Add numbers in controller
- 6.17. Add numbers using function call
- 6.18. Add numbers using HTML5
- 6.19. Add numbers ng-init
- 6.20. Exercise: In memory counter
- 6.21. Solution: In memory counter
- 6.22. Solution: In memory counter with decrement
- 6.23. Solution: In memory counter with controller
- 6.24. Exercise: Calculator
- 6.25. Solution: Calculator
- 7. AngularJS - Services
- 7.1. Services
- 7.2. Console log
- 7.3. Logging with $log
- 7.4. Turn off logging with $logProvider
- 7.5. Showing the correct line number
- 7.6. Dependency Injection
- 7.7. Automatic counter with $timeout
- 7.8. Automatic counter with stop button
- 7.9. Automatic counter with stop and start buttons
- 7.10. Simple pages
- 7.11. Simple pages with controller
- 7.12. HTML form elements with AngularJS
- 7.13. Input validation with $messages
- 7.14. TODO with AngularJS
- 7.15. TODO with AngularJS (ENTER to submit and delete item)
- 7.16. TODO with AngularJS (localStorage)
- 7.17. Exercise: Automatic Counter with $interval
- 7.18. Exercise: TODO
- 7.19. Solution: Automatic Counter with $interval
- 8. AngularJS - Routing
- 8.1. Routing
- 8.2. Simple routing
- 8.3. Routing from code
- 8.4. Two Angular controllers on the same page
- 8.5. Two Angular Apps on the same page
- 8.6. Routing with controller
- 8.7. Routing with parameters
- 8.8. Exercise: Routing
- 9. Bootstrap
- 9.1. Start with Bootstrap
- 9.2. HTML5 Skeleton
- 9.3. Bootstrap Skeleton
- 9.4. Bootstrap HTML Tags
- 9.5. Bootstrap Grid
- 9.6. Fluid Container, rows and columns
- 9.7. Buttons
- 9.8. Glyphicons
- 9.9. Menu or navigation bar
- 9.10. Bootstrap tables
- 9.11. Bootstrap form elements
- 9.12. Lead Paragraph
- 9.13. Bootstrap Grid is Responsive
- 9.14. Bootstrap Grid can be hidden
- 9.15. Bootstrap Grid hide the side when small
- 9.16. Exercises: Bootstrap
- 10. AngularJS - Design
- 10.1. Design
- 10.2. Bootstrap Angular
- 10.3. AngularJS resources
- 10.4. Other resources
- 11. AngularJS - Ajax - Building a Single Page Application
- 11.1. What are Single-page web applications?
- 11.2. Access data on server
- 11.3. Mojolicious Backend
- 11.4. $http GET request
- 11.5. $http GET request with CORS enabled
- 11.6. $http GET request with data
- 11.7. $http POST, OPTIONS requests
- 11.8. $http list items
- 11.9. $http DELETE request
- 11.10. Using ngResource
- 11.11. ngResource error handling (no CORS)
- 11.12. ngResource GET with param
- 11.13. Public APIs with Cross-origin Resource Sharing (CORS) enabled
- 11.14. MetaCPAN API
- 11.15. Exercise: Implement a new interface for MetaCPAN
- 12. AngularJS - Filters
- 12.1. Filters in HTML view
- 12.2. Filters in JavaScript Controller
- 12.3. Filter date
- 12.4. Filter number
- 12.5. Filter by case-insensitive substring
- 12.6. Filter by attributes
- 12.7. Filter table
- 12.8. Filter by calling a function
- 12.9. New (crazy) filter
- 12.10. Filter number in JavaScript Controller
- 12.11. Exercise: display clock and stopper
- 13. AngularJS - Directives
- 13.1. Directives
- 13.2. Example: List people
- 13.3. Example: List people with directive
- 13.4. Example: List people with directive and templateUrl
- 13.5. Hello World directive
- 13.6. Create new directive
- 14. Weather App
- 14.1. Weather App background
- 14.2. Weather App - steps
- 14.3. Weather App Skeleton
- 15. TODO
- 15.1. v3 - todo
- 15.2. v3 - back-end
- 15.3. v3 - html and templates
- 15.4. v3 - javascript
- 16. Building a Single-page application
- 16.1. Source Code
- 16.2. Technology
- 16.3. Setting up Vagrant
- 16.4. Install Perl and Dancer2
- 16.5. Install Node.JS
- 16.6. Dancer single file
- 16.7. Create Dancer Skeleton
- 16.8. Dancer Directory layout
- 16.9. Dancer script and module
- 16.10. Run Dancer
- 16.11. Clean-up Dancer Skeleton
- 16.12. Run tests
- 16.13. Makefile.PL
- 16.14. Dancer Test scripts
- 16.15. Dancer Config file
- 16.16. HTML forms
- 16.17. Log form parameters
- 16.18. Accessing parameters in Dancer
- 16.19. Logging in Dancer
- 16.20. Passing values to the template
- 16.21. Template::Toolkit
- 16.22. Exercise: Create reverse echo page
- 16.23. Exercise: Implement a TODO list
- 16.24. First Ajax example
- 16.25. Add route returning JSON
- 16.26. Test route returning JSON
- 16.27. Page with AJAX request
- 16.28. Route serving template with AJAX request
- 16.29. Next step: Stand alone client
- 16.30. Stand-alone AJAX client
- 16.31. HTTP Access Control (CORS)
- 16.32. Testing the v1 and v2 API calls
- 16.33. Proxy
- 16.34. Next step: Create reverse echo
- 16.35. Reverse echo with AJAX and Dancer
- 16.36. Test reverse echo in Dancer
- 16.37. Client side of AJAX string reverse
- 16.38. Refactoring Dancer app - use the before hook
- 16.39. Silencing the noisy tests
- 16.40. Next step: TODO list
- 16.41. Add item to MongoDB (POST route)
- 16.42. Test adding item to MongoDB (POST route)
- 16.43. MongoDB client
- 16.44. Use separate database for testing
- 16.45. Fetch all the items
- 16.46. Test: Fetch all the items
- 16.47. Add more tests
- 16.48. Add and retrieve elements using jQuery and AJAX
- 16.49. Add item
- 16.50. Setting up Travis-CI
- 16.51. Code refactoring: _mongodb
- 16.52. Deleting item: Dancer, MongoDB backend
- 16.53. Test Deleting item backend
- 16.54. Deleting item: client side
- 16.55. Access-Control-Allow-Methods
- 16.56. Add header: Access-Control-Allow-Methods
- 16.57. Replace manual HTML generation by the use of Handlebars
- 16.58. Handlebars code
- 16.59. Add timestamp to item (back-end)
- 16.60. Add timestamp to item (back-end TO_JSON)
- 16.61. Monkey patching DateTime::Tiny
- 16.62. Add timestamp to item (front-end)
- 16.63. jQuery Tablesorter
- 16.64. Add Tablesorter themes
- 16.65. Add Tablesorter Date column
- 17. Handlebars
- 17.1. Getting started with Handlebars
- 17.2. Handlebars Template
- 17.3. Handlebars process
- 17.4. Handlebars inject into DOM
- 17.5. Greeting in JavaScript - html
- 17.6. Greeting in JavaScript - js
- 17.7. Greeting with Habdlebars - html
- 17.8. Greeting with Habdlebars - js
- 17.9. Greeting with Habdlebars and jQuery - html
- 17.10. Greeting with Habdlebars and jQuery - js
- 17.11. Handlebars data
- 17.12. Handlebars process
- 17.13. Handlebars object and array
- 17.14. Handlebars each
- 17.15. Handlebars if
- 17.16. Handlebars parent context
- 17.17. Handlebars static helpers - html
- 17.18. Handlebars static helpers - js
- 17.19. Handlebars link helper - html
- 17.20. Handlebars link helper
- 17.21. Handlebars if_eq - html
- 17.22. Handlebars if_eq
- 17.23. Handlebars conditionals - html
- 17.24. Handlebars conditionals
- 17.25. Handlebars helpers
- 17.26. Page with back and forward buttons (html)
- 17.27. Page with back and forward buttons (js)