Angular

September 15th, 2017

Why it is great and how to get started

BUZZWOO! Angular Workshop

September 15, 2017

Armno

 

Mikhail

 

@armno

http://bit.ly/angular-buzzwoo

@michaelromanov

BUZZWOO! Angular Workshop

September 15, 2017

Agenda

  1. Introduction to Angular
  2. How to get started with Angular
  3. Testing in Angular
  4. Angular at BUZZWOO! - How we use it
  5. Q&A

BUZZWOO! Angular Workshop

September 15, 2017

BUZZWOO! Angular Workshop

September 15, 2017

AngularJS

Angular 1.x

Initial Release: 2010

1.0 Release: 2011

Current version: 1.6

$scope

Angular

"Modern" Angular

First stable release: September 2016

Version 2, 4, 5, 6 ..

Current version: 4.3

Following SemVer

BUZZWOO! Angular Workshop

September 15, 2017

https://angular.io/presskit

BUZZWOO! Angular Workshop

September 15, 2017

http://angularjs.blogspot.com/2016/12/ok-let-me-explain-its-going-to-be.html

BUZZWOO! Angular Workshop

September 15, 2017

https://github.com/angular/angular/blob/master/CHANGELOG.md

Angular 5.0 is coming!

BUZZWOO! Angular Workshop

September 15, 2017

Getting Started with Angular

BUZZWOO! Angular Workshop

September 15, 2017

Learning Resources

BUZZWOO! Angular Workshop

September 15, 2017

Official Docs

https://angular.io/docs

BUZZWOO! Angular Workshop

September 15, 2017

egghead.io

https://egghead.io/technologies/angular2

BUZZWOO! Angular Workshop

September 15, 2017

thoughtram Blog

https://blog.thoughtram.io

BUZZWOO! Angular Workshop

September 15, 2017

Nrwl.io blog

https://blog.nrwl.io/

BUZZWOO! Angular Workshop

September 15, 2017

ng-newsletter

https://www.ng-newsletter.com/​

BUZZWOO! Angular Workshop

September 15, 2017

GitHub Repo

https://github.com/angular/angular

BUZZWOO! Angular Workshop

September 15, 2017

Bonus Skills

  • Modern JavaScript (ES6, TypeScript)
  • Concept of JavaScript Modules
  • Modern build tools: gulp, webpack, npm
  • Basic terminal commands
  • RxJS

BUZZWOO! Angular Workshop

September 15, 2017

TypeScript

BUZZWOO! Angular Workshop

September 15, 2017

  • Created by Microsoft
  • Compiles to JavaScript
  • Brings type system to JavaScript (optional)
  • Angular is written in TypeScript
  • Angular docs is also in TypeScript

BUZZWOO! Angular Workshop

September 15, 2017

"Can I just use ES5?"

BUZZWOO! Angular Workshop

September 15, 2017

Architecture Overview

BUZZWOO! Angular Workshop

September 15, 2017

Components

Templates

Directives

Services

Pipes

Modules

BUZZWOO! Angular Workshop

September 15, 2017

icons: https://github.com/PKief/vscode-material-icon-theme

Root Module (AppModule)

User Module

Customer Module

Product Module

Contact Module

BUZZWOO! Angular Workshop

September 15, 2017

Modules (NgModules)

https://angular.io/guide/ngmodule

BUZZWOO! Angular Workshop

September 15, 2017

Component

BUZZWOO! Angular Workshop

September 15, 2017

Templates

  • HTML Markup
  • Property bindings
  • Event bindings
  • Display other components

BUZZWOO! Angular Workshop

September 15, 2017

Directives

  • DOM Manipulation
  • Extending existing elements
  • Custom Form Validation Rule

BUZZWOO! Angular Workshop

September 15, 2017

Structural Directives

BUZZWOO! Angular Workshop

September 15, 2017

Attribute Directives

  • *ngIf
  • *ngFor
  • ngSwitch
  • ngModel
  • ngClass
  • ngStyle

Pipes

  • Transform an input to an output.
  • Or more complex task
    • JsonPipe
    • AsyncPipe

BUZZWOO! Angular Workshop

September 15, 2017

Services

  • Business Logic
  • Data Service

BUZZWOO! Angular Workshop

September 15, 2017

Dependencies Injection

BUZZWOO! Angular Workshop

September 15, 2017

@Component({
...
})
export class HomeComponent {
  private userService: UserService;
  constructor() {
    this.userService = new UserService();
  }
}
@Component({
...
})
export class HomeComponent {
  constructor(private userService: UserService) {

  }
}

Change Detection

BUZZWOO! Angular Workshop

September 15, 2017

  • Happens on asynchronous operations
  • Angular takes care of when to trigger the change to update the DOM 
  • Each component has its own Change Detector
  • By default, change detection is triggered for all components
  • Can be optimized with ChangeDetectionStrategy.OnPush

BUZZWOO! Angular Workshop

September 15, 2017

Setting Up Development Environment

BUZZWOO! Angular Workshop

September 15, 2017

Development Environment

  • Node 6.9+
  • npm 3+
  • A Code Editor

BUZZWOO! Angular Workshop

September 15, 2017

VSCode

WebStorm

Sublime Text

Atom/Atom-IDE

Angular CLI

$ npm install -g @angular/cli

BUZZWOO! Angular Workshop

September 15, 2017

Alternative: Angular Seed Project

https://github.com/mgechev/angular-seed

BUZZWOO! Angular Workshop

September 15, 2017

Creating a new Angular project

$ ng new awesome-app

BUZZWOO! Angular Workshop

September 15, 2017

Development Server

$ ng serve

BUZZWOO! Angular Workshop

September 15, 2017

BUZZWOO! Angular Workshop

September 15, 2017

Using Sass

$ ng set defaults.styleExt scss

BUZZWOO! Angular Workshop

September 15, 2017

Generating

$ ng generate ...

BUZZWOO! Angular Workshop

September 15, 2017

BUZZWOO! Angular Workshop

September 15, 2017

Installing 3rd-party modules

$ npm install lodash
$ npm install @ngrx/store

BUZZWOO! Angular Workshop

September 15, 2017

Building

$ ng build

BUZZWOO! Angular Workshop

September 15, 2017

$ ng build -prod

development build

production build

BUZZWOO! Angular Workshop

September 15, 2017

Testing in Angular

BUZZWOO! Angular Workshop

September 15, 2017

How we use Angular at BUZZWOO!

BUZZWOO! Angular Workshop

September 15, 2017

Why Angular?

BUZZWOO! Angular Workshop

September 15, 2017

Why Angular?

  • Experiences with AngularJS for some of previous projects
  • Requested by some clients
    • "It's made by Google"
  • It can improve our workflow & code quality in general

BUZZWOO! Angular Workshop

September 15, 2017

Development Process

Local Dev Server

GitLab CE & CI Runners

Staging Server

Production Server

BUZZWOO! Angular Workshop

September 15, 2017

BUZZWOO! Angular Workshop

September 15, 2017

BUZZWOO! Angular Workshop

September 15, 2017

BUZZWOO! Angular Workshop

September 15, 2017

Benefits

  • More efficient development workflow
    • Angular CLI, TypeScript
  • Simplified workflows between Frontend & Backend
  • Testing & Automation
  • More comfortable with modern JavaScript technologies
    • Be able to do more complex & challenging projects

 

BUZZWOO! Angular Workshop

September 15, 2017

BUZZWOO! Angular Workshop

September 15, 2017

It's the door opener!

There are more!

BUZZWOO! Angular Workshop

September 15, 2017

  • Routing
  • Forms
  • Http & HttpClient
  • Performance Optimization
  • State Management
  • Firebase
  • etc.

BUZZWOO! Angular Workshop

September 15, 2017

BUZZWOO! Angular Workshop

September 15, 2017

Made with Slides.com