Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building a TV Show Tracker with AngularJS

Building a TV Show Tracker with AngularJS

Introduction to AngularJS, Best Practices, Learning Resources.

Sahat Yalkabov

August 19, 2014
Tweet

Other Decks in Programming

Transcript

  1. Building a TV Show Tracker with AngularJS + Introduction to

    AngularJS by Sahat Yalkabov August 19, 2014 @EV+NowAndForever
  2. Introduction Full-Stack JavaScript Developer U.S. Air Force (Until 2008) College

    Graduate (Spring ‘14) Hacker School (Summer ’14)
  3. Introduction Full-Stack JavaScript Developer U.S. Air Force (Until 2008) College

    Graduate (Spring ‘14) Hacker School (Summer ’14) Yahoo! (Fall ’14)
  4. Free AngularJS Screencasts AngularJS Fundamentals In 60-ish Minutes by Dan

    Wahlin https://www.youtube.com/watch?v=i9MHigUZKEM Introduction to Angular JS by David Mosher https://www.youtube.com/watch?v=8ILQOFAgaXE Introduction to Angular.js in 50 Examples by Curran Kelleher https://www.youtube.com/watch?v=TRrL5j3MIvo
  5. 1. What is AngularJS? 2. AngularJS Anatomy 3. Thinking in

    Angular 4. AngularJS Best Practices Overview
  6. 1. What is AngularJS? 2. AngularJS Anatomy 3. Thinking in

    Angular 4. AngularJS Best Practices 5. JavaScript Best Practices Overview
  7. 1. What is AngularJS? 2. AngularJS Anatomy 3. Thinking in

    Angular 4. AngularJS Best Practices 5. JavaScript Best Practices 6. The Big Picture Overview
  8. 1. What is AngularJS? 2. AngularJS Anatomy 3. Thinking in

    Angular 4. AngularJS Best Practices 5. JavaScript Best Practices 6. The Big Picture 7. Live Coding Overview
  9. 1. What is AngularJS? 2. AngularJS Anatomy 3. Thinking in

    Angular 4. AngularJS Best Practices 5. JavaScript Best Practices 6. The Big Picture 7. Live Coding 8. Learning Resources Overview
  10. 1. What is AngularJS? 2. AngularJS Anatomy 3. Thinking in

    Angular 4. AngularJS Best Practices 5. JavaScript Best Practices 6. The Big Picture 7. Live Coding 8. Learning Resources 9. Closing Notes Overview
  11. What is AngularJS? AngularJS is a complete client-side framework that

    provides:  Routing  Templating  Data Binding  Forms Validation  Reusable Components  Built-in Module System
  12. What is AngularJS? AngularJS is a complete client-side framework that

    provides:  Routing  Templating  Data Binding  Forms Validation  Reusable Components  Built-in Module System In other words…
  13. What is AngularJS? AngularJS is a complete client-side framework that

    provides:  Routing  Templating  Data Binding  Forms Validation  Reusable Components  Built-in Module System In other words… Everything you need to build rich and interactive web apps.
  14. What is AngularJS? Framework that allows you to build single

    page applications where page never reloads.
  15. What is AngularJS? Uses AJAX to get data from the

    server without reloading the page. Key Difference: Rather than relying on a view technology to perform server- side rendering of the data to HTML, a RESTful web service simply populates and returns a JSON object. thefloppydisk.wordpress.com
  16. GET /api/shows Return all shows POST /api/shows Add a new

    show GET /api/shows/:id Return a particular show
  17. Scope Scope Hello World! http://www.url.com app.js index.html $scope is an

    object that refers to the application model. Acts a glue between view and controller.
  18. Scope Scope Hello World! http://www.url.com app.js index.html $scope is an

    object that refers to the application model. Acts a glue between view and controller.
  19. Scope Scope Hello World! http://www.url.com app.js index.html $scope is an

    object that refers to the application model. Acts a glue between view and controller.
  20. Controller ✓DO  Setup the initial state of the $scope

    object.  Add behavior to the $scope object. ✗DON’T  Manipulate DOM.  Filter output.  Share code or state across controllers.  Manage the life-cycle of other components
  21. Directive Element Directive Extends HTML with custom attributes and elements.

    Attribute Directive Any DOM manipulation should take place inside a directive, and only directives.
  22. Directive Element Directive Extends HTML with custom attributes and elements.

    Attribute Directive Any DOM manipulation should take place inside a directive, and only directives.
  23. Directive Element Directive Extends HTML with custom attributes and elements.

    Attribute Directive Any DOM manipulation should take place inside a directive, and only directives.
  24. Directive Element Directive Extends HTML with custom attributes and elements.

    Attribute Directive Any DOM manipulation should take place inside a directive, and only directives.
  25. Directive Element Directive Extends HTML with custom attributes and elements.

    Attribute Directive Any DOM manipulation should take place inside a directive, and only directives.
  26. Directive Element Directive Extends HTML with custom attributes and elements.

    Attribute Directive Any DOM manipulation should take place inside a directive, and only directives.
  27. Service Reusable business logic object that is wired together using

    dependency injection. A service fall into three categories: http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory
  28. Service Reusable business logic object that is wired together using

    dependency injection. A service fall into three categories: • Service (simplest / least flexible) • Factory (good balance / most common) • Provider (very verbose / most flexible) http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory
  29. Service Reusable business logic object that is wired together using

    dependency injection. A service fall into three categories: • Service (simplest / least flexible) • Factory (good balance / most common) • Provider (very verbose / most flexible) TL;DR: Just use the factory service! http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory
  30. Service Reusable business logic object that is wired together using

    dependency injection. A service fall into three categories: • Service (simplest / least flexible) • Factory (good balance / most common) • Provider (very verbose / most flexible) TL;DR: Just use the factory service! http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory myApp.controller('LoginCtrl', function($scope, Auth) { $scope.login = function() { Auth.signIn(); }; $scope.signOut = function() { Auth.signOut(); }; }); services/auth.js controllers/login.js
  31. Service Reusable business logic object that is wired together using

    dependency injection. A service fall into three categories: • Service (simplest / least flexible) • Factory (good balance / most common) • Provider (very verbose / most flexible) TL;DR: Just use the factory service! http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory myApp.controller('LoginCtrl', function($scope, Auth) { $scope.login = function() { Auth.signIn(); }; $scope.signOut = function() { Auth.signOut(); }; }); services/auth.js controllers/login.js
  32. Dependency Injection Angular's Dependency Injection allows you to write code

    like so without worrying where $scope comes from; http://chris.59north.com/post/2014/02/27/A-simple-introduction-to-AngularJS-Part-6-%E2%80%93-Dependency-injection-in- Angular-using-$provide.aspx angular.module('MyApp') .controller('UserCtrl', function($scope) { $scope.currentUser = { firstName: 'John', lastName: 'Doe' }; });
  33. Dependency Injection Dependency injection in Angular is what allows us

    to write our Angular code without worrying about the order in which our code is loaded. It allows us to use the same syntax across Angular components and not concern ourselves with how dependencies arrive. It gives us the ability to write tests efficiently and not worry about how to separate production components from those in testing. http://www.ng-newsletter.com/posts/deep-dive-in-angular-dependency-injection.html
  34. Templates Template = HTML enhanced with AngularJS directives and data

    binding via {{ }} (double curly braces). Templates • Action • Adventure • Children • Comedy • Crime • Documentary http://www.url.com controllers/main.js views/main.html
  35. Templates Template = HTML enhanced with AngularJS directives and data

    binding via {{ }} (double curly braces). Templates • Action • Adventure • Children • Comedy • Crime • Documentary http://www.url.com controllers/main.js views/main.html
  36. Templates Template = HTML enhanced with AngularJS directives and data

    binding via {{ }} (double curly braces). Templates • Action • Adventure • Children • Comedy • Crime • Documentary http://www.url.com controllers/main.js views/main.html
  37. Routing* angular.module('myApp', ['ngRoute']) .config(function($routeProvider) { $routeProvider .when('/', { templateUrl: 'home.html',

    controller: HomeCtrl }) .when('/list', { templateUrl: 'list.html', controller: ListCtrl }) .when('/detail/:id', { templateUrl: 'detail.html', controller: DetailCtrl }) .when('/settings', { templateUrl: 'settings.html', controller: SettingsCtrl }) .otherwise({ redirectTo: '/' }); }); All actual URLs are prepended with a hash! http://localhost:3000/#/settings 2 The $route provider maps URL to controllers and templates. *Depends on another module: angular-route.js 3 1
  38. Filters A filter formats the value of an expression for

    display to the user. They can be used in templates, controllers or services. Filters angularjs-nyc-meetup http://www.url.com HTML
  39. Filters A filter formats the value of an expression for

    display to the user. They can be used in templates, controllers or services. Filters angularjs-nyc-meetup http://www.url.com HTML
  40. Filters A filter formats the value of an expression for

    display to the user. They can be used in templates, controllers or services. Filters angularjs-nyc-meetup http://www.url.com HTML Multiple Filters
  41. AngularJS Anatomy TL;DR       

        In layman terms…
  42. AngularJS Anatomy TL;DR  Routing – navigation between pages. 

             In layman terms…
  43. AngularJS Anatomy TL;DR  Routing – navigation between pages. 

    Templates – HTML with additional Angular markup.          In layman terms…
  44. AngularJS Anatomy TL;DR  Routing – navigation between pages. 

    Templates – HTML with additional Angular markup.  View – a rendered template.         In layman terms…
  45. AngularJS Anatomy TL;DR  Routing – navigation between pages. 

    Templates – HTML with additional Angular markup.  View – a rendered template.  DI – used for loading modules and services.        In layman terms…
  46. AngularJS Anatomy TL;DR  Routing – navigation between pages. 

    Templates – HTML with additional Angular markup.  View – a rendered template.  DI – used for loading modules and services.  Service – place to do heavy lifting stuff like AJAX requests.       In layman terms…
  47. AngularJS Anatomy TL;DR  Routing – navigation between pages. 

    Templates – HTML with additional Angular markup.  View – a rendered template.  DI – used for loading modules and services.  Service – place to do heavy lifting stuff like AJAX requests.  Directive – behavior abstraction (HTML on steroids).      In layman terms…
  48. AngularJS Anatomy TL;DR  Routing – navigation between pages. 

    Templates – HTML with additional Angular markup.  View – a rendered template.  DI – used for loading modules and services.  Service – place to do heavy lifting stuff like AJAX requests.  Directive – behavior abstraction (HTML on steroids).  Data Binding – keeps the data in-sync with UI.     In layman terms…
  49. AngularJS Anatomy TL;DR  Routing – navigation between pages. 

    Templates – HTML with additional Angular markup.  View – a rendered template.  DI – used for loading modules and services.  Service – place to do heavy lifting stuff like AJAX requests.  Directive – behavior abstraction (HTML on steroids).  Data Binding – keeps the data in-sync with UI.  Model – stuff that lives on $scope object.    In layman terms…
  50. AngularJS Anatomy TL;DR  Routing – navigation between pages. 

    Templates – HTML with additional Angular markup.  View – a rendered template.  DI – used for loading modules and services.  Service – place to do heavy lifting stuff like AJAX requests.  Directive – behavior abstraction (HTML on steroids).  Data Binding – keeps the data in-sync with UI.  Model – stuff that lives on $scope object.  Scope – glue between a controller and a template.   In layman terms…
  51. AngularJS Anatomy TL;DR  Routing – navigation between pages. 

    Templates – HTML with additional Angular markup.  View – a rendered template.  DI – used for loading modules and services.  Service – place to do heavy lifting stuff like AJAX requests.  Directive – behavior abstraction (HTML on steroids).  Data Binding – keeps the data in-sync with UI.  Model – stuff that lives on $scope object.  Scope – glue between a controller and a template.  Controller – a place where you set the $scope.  In layman terms…
  52. AngularJS Anatomy TL;DR  Routing – navigation between pages. 

    Templates – HTML with additional Angular markup.  View – a rendered template.  DI – used for loading modules and services.  Service – place to do heavy lifting stuff like AJAX requests.  Directive – behavior abstraction (HTML on steroids).  Data Binding – keeps the data in-sync with UI.  Model – stuff that lives on $scope object.  Scope – glue between a controller and a template.  Controller – a place where you set the $scope.  Filters – returns the subset of data or formats the output. In layman terms…
  53. '<li>' + data.msg + '</li>' AngularJS will automatically update your

    view so you don’t have to. Data Binding HTML JS
  54. In AngularJS we have a separate model layer that lives

    on $scope, completely independent from view.    DOM ≠ Data Layer
  55. In AngularJS we have a separate model layer that lives

    on $scope, completely independent from view. Which gives us:  Data Binding  Separation of Concerns  Better Testability DOM ≠ Data Layer
  56. Separation of Concerns Directive DOM manipulation and augmentation. View Presentation

    layer. Service Reusable business logic components. Controller Glues services with views.
  57. Project Structure |-- app.js |-- controllers.js |-- filters.js |-- services.js

    |-- directives.js Bad Good |-- app.js |-- controllers/ | |-- MainCtrl.js | |-- AnotherCtrl.js |-- filters/ | |-- MainFilter.js | |-- AnotherFilter.js |-- services/ | |-- MainService.js | |-- AnotherService.js |-- directives/ | |-- MainDirective.js | |-- AnotherDirective.js Keep your code organized by separating controllers, services, directives into individual files.
  58. Project Structure |-- app.js |-- controllers.js |-- filters.js |-- services.js

    |-- directives.js Bad Good |-- app.js |-- controllers/ | |-- MainCtrl.js | |-- AnotherCtrl.js |-- filters/ | |-- MainFilter.js | |-- AnotherFilter.js |-- services/ | |-- MainService.js | |-- AnotherService.js |-- directives/ | |-- MainDirective.js | |-- AnotherDirective.js Keep your code organized by separating controllers, services, directives into individual files.
  59. 1. Always be consistent when writing code. 2. Follow a

    style guide. 3. Your code should be clean and readable. General Tips
  60. 1. Always be consistent when writing code. 2. Follow a

    style guide. 3. Your code should be clean and readable. 4. Always use strict equality ===. General Tips
  61. 1. Always be consistent when writing code. 2. Follow a

    style guide. 3. Your code should be clean and readable. 4. Always use strict equality ===. 5. Always write semicolons. General Tips
  62. 1. Always be consistent when writing code. 2. Follow a

    style guide. 3. Your code should be clean and readable. 4. Always use strict equality ===. 5. Always write semicolons. 6. Prefer spaces over tabs. General Tips
  63. 1. Always be consistent when writing code. 2. Follow a

    style guide. 3. Your code should be clean and readable. 4. Always use strict equality ===. 5. Always write semicolons. 6. Prefer spaces over tabs. 7. Use Boolean instead of !! for type coercing. General Tips
  64. 1. Always be consistent when writing code. 2. Follow a

    style guide. 3. Your code should be clean and readable. 4. Always use strict equality ===. 5. Always write semicolons. 6. Prefer spaces over tabs. 7. Use Boolean instead of !! for type coercing. 8. Don’t over-use comments; refer to 3. General Tips
  65. 1. Always be consistent when writing code. 2. Follow a

    style guide. 3. Your code should be clean and readable. 4. Always use strict equality ===. 5. Always write semicolons. 6. Prefer spaces over tabs. 7. Use Boolean instead of !! for type coercing. 8. Don’t over-use comments; refer to 3. 9. Keep your code DRY. General Tips
  66. 1. Always be consistent when writing code. 2. Follow a

    style guide. 3. Your code should be clean and readable. 4. Always use strict equality ===. 5. Always write semicolons. 6. Prefer spaces over tabs. 7. Use Boolean instead of !! for type coercing. 8. Don’t over-use comments; refer to 3. 9. Keep your code DRY. General Tips
  67. 1. Always be consistent when writing code. 2. Follow a

    style guide. 3. Your code should be clean and readable. 4. Always use strict equality ===. 5. Always write semicolons. 6. Prefer spaces over tabs. 7. Use Boolean instead of !! for type coercing. 8. Don’t over-use comments; refer to 3. 9. Keep your code DRY. General Tips
  68. 1. Always be consistent when writing code. 2. Follow a

    style guide. 3. Your code should be clean and readable. 4. Always use strict equality ===. 5. Always write semicolons. 6. Prefer spaces over tabs. 7. Use Boolean instead of !! for type coercing. 8. Don’t over-use comments; refer to 3. 9. Keep your code DRY. 10. Avoid early optimization / refactor code often. General Tips
  69. 1. Always be consistent when writing code. 2. Follow a

    style guide. 3. Your code should be clean and readable. 4. Always use strict equality ===. 5. Always write semicolons. 6. Prefer spaces over tabs. 7. Use Boolean instead of !! for type coercing. 8. Don’t over-use comments; refer to 3. 9. Keep your code DRY. 10. Avoid early optimization / refactor code often. 11. Use a linter tool, e.g. JSHint or JSLint. General Tips
  70. 1. Always be consistent when writing code. 2. Follow a

    style guide. 3. Your code should be clean and readable. 4. Always use strict equality ===. 5. Always write semicolons. 6. Prefer spaces over tabs. 7. Use Boolean instead of !! for type coercing. 8. Don’t over-use comments; refer to 3. 9. Keep your code DRY. 10. Avoid early optimization / refactor code often. 11. Use a linter tool, e.g. JSHint or JSLint. General Tips
  71. 1. Always be consistent when writing code. 2. Follow a

    style guide. 3. Your code should be clean and readable. 4. Always use strict equality ===. 5. Always write semicolons. 6. Prefer spaces over tabs. 7. Use Boolean instead of !! for type coercing. 8. Don’t over-use comments; refer to 3. 9. Keep your code DRY. 10. Avoid early optimization / refactor code often. 11. Use a linter tool, e.g. JSHint or JSLint. General Tips
  72. 1. Always be consistent when writing code. 2. Follow a

    style guide. 3. Your code should be clean and readable. 4. Always use strict equality ===. 5. Always write semicolons. 6. Prefer spaces over tabs. 7. Use Boolean instead of !! for type coercing. 8. Don’t over-use comments; refer to 3. 9. Keep your code DRY. 10. Avoid early optimization / refactor code often. 11. Use a linter tool, e.g. JSHint or JSLint. 12. Keep global variables to a minimum. General Tips
  73. Learning Resources  Compiled list of blog posts, articles, videos,

    books, sample apps https://github.com/jmcunningham/AngularJS-Learning  JavaScript Weekly Newsletter http://javascriptweekly.com  AngularJS Newsletter http://ng-newsletter.com  AngularJS Fundamentals In 60-ish Minutes https://www.youtube.com/watch?v=i9MHigUZKEM  AngularJS Cheat Sheet http://www.cheatography.com/proloser/cheat-sheets/angularjs/  Eloquent JavaScript 2.0 http://eloquentjavascript.net/  Speaking JavaScript http://speakingjs.com/es5/