Part I

AngularJS

from Intro to Advanced

Whoami

Alexandru Albu

AngularJS Trainer @JSLeague

frontend developer @6yo

design: photoshop, illustrator

development: javascript. python, sql, mongo

devops: docker, circle-ci

and gaming and basketball

Overview

AngularJS from Intro to Advanced (I)

AngularJS from Intro to Advanced (I)

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 (I)

Agenda

10:30 - 10:45 Overview

10:45 - 11:30 Style guides

11:30 - 12:00 Naming

12:00 - 13:00 Architecture (I)

13:00 - 14:00 Lunch break

14:00 - 15:00 Architecture (II)

15:00 - 16:00 Patterns

16:00 - 16:45 Hello, AngularJS

16:45 - 17:00 Break

17:00 - 17:30 Modules

17:30 - 18:45 Routing (I)

Style guides

AngularJS from Intro to Advanced (I)

AngularJS from Intro to Advanced (I)

a set of standards or best practices to guide design, architecture and development for an application

AngularJS from Intro to Advanced (I)

Minko Gechev’s AngularJS Style Guide

Todd Motto’s AngularJS Style Guide

John Papa’s AngularJS Style Guide

Naming

AngularJS from Intro to Advanced (I)

AngularJS from Intro to Advanced (I)

general guidelines

always use a naming pattern

use entity or function in name

use LIFT

AngularJS from Intro to Advanced (I)

<name>.<type>.{js|html|scss|css}

app.js

camelCase

PascalCase

dash-case

component

service

model

filter

route

etc.

file names

AngularJS from Intro to Advanced (I)

<name><type>

camelCase

PascalCase

controller

service

model

filter

route

etc.

"class" names

Architecture

AngularJS from Intro to Advanced (I)

AngularJS from Intro to Advanced (I)

src
├── app.component.js
├── app.directive.js
├── app.filter.js
├── app.module.js
├── app.router.js
├── app.service.js
└── index.html

1st iteration - single monolithic files

AngularJS from Intro to Advanced (I)

src
├── app.module.js
├── index.html
├── components
│   ├── feature1.component.js
│   └── feature2.component.js
├── directives
│   └── directive1.directive.js
├── filters
│   └── filter1.filter.js
├── routes
│   ├── route1.route.js
│   └── route2.route.js
└── services
    ├── service1.service.js
    └── service2.service.js

2nd iteration - grouping by type

AngularJS from Intro to Advanced (I)

src
├── app.module.js
├── index.html
├── feature1
│   ├── feature1.component.html
│   ├── feature1.component.js
│   ├── feature1.component.scss
│   ├── feature1.route.js
│   └── feature1.service.js
├── feature2
│   ├── feature2.component.html
│   ├── feature2.component.js
│   ├── feature2.component.scss
│   ├── feature2.route.js
│   └── feature2.service.js
└── shared
    ├── directives
    │   └── directive1.directive.js
    ├── filters
    │   └── filter1.filter.js
    └── services
        ├── service1.service.js
        └── service2.service.js

3rd iteration - grouping by component

AngularJS from Intro to Advanced (I)

src
├── app.module.js
├── index.html
├── core
│   ├── core.module.js
│   ├── directives
│   │   └── directive1.directive.js
│   ├── filters
│   │   └── filter1.filter.js
│   └── services
│       ├── service1.service.js
│       └── service2.service.js
├── module1
│   ├── feature1
│   │   ├── feature1.component.html
│   │   ├── feature1.component.js
│   │   ├── feature1.component.scss
│   │   ├── feature1.route.js
│   │   └── feature1.service.js
│   └── module1.module.js
└── module2
    ├── feature2
    │   ├── feature2.component.html
    │   ├── feature2.component.js
    │   ├── feature2.component.scss
    │   ├── feature2.route.js
    │   └── feature2.service.js
    └── module2.module.js

4th iteration - grouping by module

Patterns

AngularJS from Intro to Advanced

AngularJS from Intro to Advanced (I)

n tier architecture model

AngularJS from Intro to Advanced (I)

MVC

Hello, AngularJS

AngularJS from Intro to Advanced

AngularJS from Intro to Advanced (I)

package

manager

code

repository

dependencies

update

index.html

Modules

AngularJS from Intro to Advanced (I)

AngularJS from Intro to Advanced (I)

avoid naming collisions

AngularJS from Intro to Advanced (I)

getters and setters

AngularJS from Intro to Advanced (I)

dependencies

Routing (I)

AngularJS from Intro to Advanced (I)

AngularJS from Intro to Advanced (I)

why are we routing?

AngularJS from Intro to Advanced (I)

router

vs.

ui-router

AngularJS from Intro to Advanced (I)

location

vs.

state

AngularJS from Intro to Advanced (I)

url routing && params

AngularJS from Intro to Advanced (I)

last line of defense: otherwise

Q&A

AngularJS from Intro to Advanced (I)

Thank you!