Tweet
Tweet

Slide 1

Slide 1 text

Building a TV Show Tracker with AngularJS + Introduction to AngularJS by Sahat Yalkabov August 19, 2014 @EV+NowAndForever

Slide 2

Slide 2 text

Introduction

Slide 3

Slide 3 text

Introduction Full-Stack JavaScript Developer

Slide 4

Slide 4 text

Introduction Full-Stack JavaScript Developer

Slide 5

Slide 5 text

Introduction Full-Stack JavaScript Developer

Slide 6

Slide 6 text

Introduction Full-Stack JavaScript Developer U.S. Air Force (Until 2008)

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Tutorial: sahatyalkabov.com Source: https://github.com/sahat/tvshow-tracker

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Overview

Slide 13

Slide 13 text

1. What is AngularJS? Overview

Slide 14

Slide 14 text

1. What is AngularJS? 2. AngularJS Anatomy Overview

Slide 15

Slide 15 text

1. What is AngularJS? 2. AngularJS Anatomy 3. Thinking in Angular Overview

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

What is AngularJS? AngularJS is a complete client-side framework that provides:      

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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…

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

What is AngularJS? Framework that allows you to build single page applications where page never reloads.

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

GET /api/shows Return all shows POST /api/shows Add a new show GET /api/shows/:id Return a particular show

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

What is AngularJS? Embraces HTML by extending into more expressive format.

Slide 31

Slide 31 text

What is AngularJS? Embraces HTML by extending into more expressive format.

Slide 32

Slide 32 text

What is AngularJS? Embraces HTML by extending into more expressive format.

Slide 33

Slide 33 text

What is AngularJS? Embraces HTML by extending into more expressive format.

Slide 34

Slide 34 text

What is AngularJS? Embraces HTML by extending into more expressive format.

Slide 35

Slide 35 text

AngularJS Anatomy

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

Model Model Hello World! http://www.url.com app.js index.html The value stored on $scope.

Slide 40

Slide 40 text

Model Model Hello World! http://www.url.com app.js index.html The value stored on $scope.

Slide 41

Slide 41 text

Controller Model Hello World! http://www.url.com app.js index.html Function that is used to augment the $scope.

Slide 42

Slide 42 text

Controller Model Hello World! http://www.url.com app.js index.html Function that is used to augment the $scope.

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Data Binding Data Binding http://www.url.com app.js index.html Synchronizes data between the model and the view. AngularJS OK Name

Slide 45

Slide 45 text

Data Binding Data Binding http://www.url.com app.js index.html Synchronizes data between the model and the view. AngularJS OK Name

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Directive Extends HTML with custom attributes and elements. Model Directive View Controller

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Service Simple Instagram service for fetching popular images.

Slide 59

Slide 59 text

Service Simple Instagram service for fetching popular images.

Slide 60

Slide 60 text

Service Simple Instagram service for fetching popular images.

Slide 61

Slide 61 text

Service Simple Instagram service for fetching popular images.

Slide 62

Slide 62 text

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' }; });

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

AngularJS Anatomy TL;DR           

Slide 72

Slide 72 text

AngularJS Anatomy TL;DR            In layman terms…

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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…

Slide 77

Slide 77 text

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…

Slide 78

Slide 78 text

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…

Slide 79

Slide 79 text

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…

Slide 80

Slide 80 text

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…

Slide 81

Slide 81 text

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…

Slide 82

Slide 82 text

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…

Slide 83

Slide 83 text

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…

Slide 84

Slide 84 text

Thinking in Angular

Slide 85

Slide 85 text

Write a directive for it. AngularJS + jQuery Plugins HTML JS

Slide 86

Slide 86 text

Write a directive for it. AngularJS + jQuery Plugins HTML JS

Slide 87

Slide 87 text

Write a directive for it. AngularJS + jQuery Plugins HTML JS

Slide 88

Slide 88 text

'
  • ' + data.msg + '
    • ' AngularJS will automatically update your view so you don’t have to. Data Binding HTML JS

    Slide 89

    Slide 89 text

    AngularJS will automatically update your view so you don’t have to. Data Binding HTML JS

    Slide 90

    Slide 90 text

    AngularJS will automatically update your view so you don’t have to. Data Binding HTML JS Array

    Slide 91

    Slide 91 text

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

    Slide 92

    Slide 92 text

    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

    Slide 93

    Slide 93 text

    Directives: The Angular Way™ Directives http://www.url.com Toggle me!

    Slide 94

    Slide 94 text

    Directives: The Angular Way™ Directives http://www.url.com Toggle me!

    Slide 95

    Slide 95 text

    Directives: The Angular Way™ Directives http://www.url.com Toggle me!

    Slide 96

    Slide 96 text

    Separation of Concerns Directive DOM manipulation and augmentation. View Presentation layer. Service Reusable business logic components. Controller Glues services with views.

    Slide 97

    Slide 97 text

    $q.defer()

    Slide 98

    Slide 98 text

    AngularJS Promises Waiting…

    Slide 99

    Slide 99 text

    AngularJS Promises Waiting…

    Slide 100

    Slide 100 text

    AngularJS Promises Waiting…

    Slide 101

    Slide 101 text

    AngularJS Promises Waiting…

    Slide 102

    Slide 102 text

    AngularJS Promises Waiting…

    Slide 103

    Slide 103 text

    AngularJS Promises Waiting…

    Slide 104

    Slide 104 text

    AngularJS Promises Ready!

    Slide 105

    Slide 105 text

    AngularJS Best Practices

    Slide 106

    Slide 106 text

    Module Definitions Bad Good angular.module('app', []) .controller() .factory(); Use the getter/setter syntax.

    Slide 107

    Slide 107 text

    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.

    Slide 108

    Slide 108 text

    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.

    Slide 109

    Slide 109 text

    Inline Annotations

    Slide 110

    Slide 110 text

    Inline Annotations

    Slide 111

    Slide 111 text

    Inline Annotations

    Slide 112

    Slide 112 text

    Inline Annotations gulp-ng-annotate

    Slide 113

    Slide 113 text

    Inline Annotations gulp-ng-annotate grunt-ng-annotate

    Slide 114

    Slide 114 text

    Annotation Order Bad Good Inject Angular services before your own custom ones.

    Slide 115

    Slide 115 text

    JavaScript Best Practices

    Slide 116

    Slide 116 text

    General Tips

    Slide 117

    Slide 117 text

    1. Always be consistent when writing code. General Tips

    Slide 118

    Slide 118 text

    1. Always be consistent when writing code. 2. Follow a style guide. General Tips

    Slide 119

    Slide 119 text

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

    Slide 120

    Slide 120 text

    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

    Slide 121

    Slide 121 text

    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

    Slide 122

    Slide 122 text

    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

    Slide 123

    Slide 123 text

    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

    Slide 124

    Slide 124 text

    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

    Slide 125

    Slide 125 text

    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

    Slide 126

    Slide 126 text

    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

    Slide 127

    Slide 127 text

    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

    Slide 128

    Slide 128 text

    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

    Slide 129

    Slide 129 text

    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

    Slide 130

    Slide 130 text

    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

    Slide 131

    Slide 131 text

    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

    Slide 132

    Slide 132 text

    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

    Slide 133

    Slide 133 text

    Code Complexity grunt-complexity (gulp-complexity) Utilizes complexity-report to evaluate the complexity and maintainability of code.

    Slide 134

    Slide 134 text

    Test Coverage

    Slide 135

    Slide 135 text

    The Big Picture

    Slide 136

    Slide 136 text

    Database Server Client Return JSON Query Database Return JSON AJAX Call Architecture

    Slide 137

    Slide 137 text

    Step 1. Get JSON Data

    Slide 138

    Slide 138 text

    Step 2. ?????? Directives Services Controllers Templates Filters

    Slide 139

    Slide 139 text

    Step 3. Profit

    Slide 140

    Slide 140 text

    Authentication: Satellizer.js https://github.com/sahat/satellizer

    Slide 141

    Slide 141 text

    Authentication: Satellizer.js

    Slide 142

    Slide 142 text

    Authentication: Satellizer.js

    Slide 143

    Slide 143 text

    Live Coding

    Slide 144

    Slide 144 text

    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/

    Slide 145

    Slide 145 text

    Closing Notes

    Slide 146

    Slide 146 text

    Blog: sahatyalkabov.com Email: [email protected] GitHub: github.com/sahat Twitter: @EVNowAndForever