Part II

AngularJS

from Intro to Advanced

Overview

AngularJS from Intro to Advanced (II)

AngularJS from Intro to Advanced (II)

Part I

  • Style guides
  • Naming
  • Architecture
  • Patterns
  • Hello, AngularJS
  • Modules
  • Routing (I)

Part II

  • Routing (II)
  • Components
  • Directives
  • Services (I)

Part III

  • Services (II)
  • Interceptors
  • Filters
  • i18n
  • Build tools
  • Testing
  • Continuous Integation

AngularJS from Intro to Advanced (II)

Agenda

10:30 - 10:45 Overview

10:45 - 11:15 Recap

11:15 - 12:00 Routing (II)

12:00 - 13:00 Components (I)

13:00 - 14:00 Lunch break

14:00 - 15:00 Components (II)

15:00 - 15:15 Break

15:15 - 17:30 Directives

17:30 - 17:45 Break

17:45 - 19:00 Services (I)

Recap

AngularJS from Intro to Advanced (II)

AngularJS from Intro to Advanced (II)

style guides

guidelines

john papa's

IIFE

single responsibility principle

AngularJS from Intro to Advanced (II)

naming

patterns

LIFT

<name>.<type>.<ext>

<name><type>

AngularJS from Intro to Advanced (II)

architecture

&&

patterns

group by modules && 

features

split into layers of:

- data

- logic

- presentation

AngularJS from Intro to Advanced (II)

modules

naming

use getters

AngularJS from Intro to Advanced (II)

routing

state vs location

Routing (II)

AngularJS from Intro to Advanced (II)

AngularJS from Intro to Advanced (II)

params

url param

query param

AngularJS from Intro to Advanced (II)

child states

AngularJS from Intro to Advanced (II)

state transition

AngularJS from Intro to Advanced (II)

state && location

hooks

Components

AngularJS from Intro to Advanced (II)

AngularJS from Intro to Advanced (II)

component

replaces old

controller + view

way of building pages

has limited directive functionality

acts like a directive bound to an element name

AngularJS from Intro to Advanced (II)

best practices

  • component names should be <name>.component.{js|html|css}
  • bind controller local scope (this) to a variable (self)
  • always defer business logic to a service
  • try to keep components to the smallest reusable unit
  • always bind controller to view using "controllerAs" syntax

AngularJS from Intro to Advanced (II)

// login.component.js

(function() {

  angular.module('app.core').component('login', {
    template: '<h1>core - {{ lVM.pageName }}</h1>',
    controller: LoginCtrl,
    controllerAs: 'lVM'
  });

  function LoginCtrl() {
    var self = this;

    self.pageName = "login";
  } 

})();

// login.route.js

...
$stateProvider.state('Login', {
  url: '/login',
  component: 'login'
}); 
...

AngularJS from Intro to Advanced (II)

why use components?

API via inputs / outputs (bindings)

lifecycle hooks

component based architecture

AngularJS from Intro to Advanced (II)

bindings

input

< - one way binding

@ - string binding

= - two way binding

AngularJS from Intro to Advanced (II)

bindings

output

& - callback binding

AngularJS from Intro to Advanced (II)

lifecycle hooks

$onInit

$onChanges

$doCheck

$onDestroy

Directives

AngularJS from Intro to Advanced (II)

AngularJS from Intro to Advanced (II)

directive

addition to components, now they are mostly attribute directives

angular default directives (ng)

AngularJS from Intro to Advanced (II)

best practices

  • directive names should be <name>.directive.{js|html|css}
  • keep directives required to attribute

AngularJS from Intro to Advanced (II)

angular default directives

structure directives (ng-if, ng-for)

event directives (ng-click, ng-change)

data bind directives (ng-model, ng-bind-html)

AngularJS from Intro to Advanced (II)

custom directives types

manipulate dom

wrap other elements

event listeners

communicates

Services (I)

AngularJS from Intro to Advanced (II)

AngularJS from Intro to Advanced (II)

types of services

data

behaviour logic

business logic

AngularJS from Intro to Advanced (II)

data services

backend api

firebase

3rd party api

http mocks

static json resources

Q&A

AngularJS from Intro to Advanced (II)

Thank you!