Jorge Andrade

jorge.andrade@datacivica.org

@jorandradefig

Software Development

Cross Platform

Progressive web apps

Use modern web platform capabilities to deliver app-like experiences. High performance, offline, and zero-step installation.

Native

Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.

Desktop

Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.

Speed and Performance

Code generation

Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.

Universal

Serve the first view of your application on node.js, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.

Code splitting

Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.

Productivity

Templates

Quickly create UI views with simple and powerful template syntax.

Angular CLI

Command line tools: start building fast, add components and tests, then instantly deploy.

IDEs

Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.

Full Development Story

Testing

With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.

Animation

Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.

Accessibility

Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.

framework
or
library

?

"A library is essentially a set of functions that you can call, these days usually organized into classes. Each call does some work and returns control to the client."

"A framework embodies some abstract design, with more behavior built in. In order to use it you need to insert your behavior into various places in the framework either by subclassing or by plugging in your own classes. The framework's code then calls your code at these points."

https://martinfowler.com/bliki/InversionOfControl.html

TS

JS

components

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

routes

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    children: []
  }
];

http

getHeroes(): Observable<Hero[]> {
  return this.http.get(this.heroesUrl)
                  .map(this.extractData)
                  .catch(this.handleError);
}

directives

<div *ngIf="hero" >{{hero.name}}</div>

<ul>
  <li *ngFor="let hero of heroes">{{hero.name}}</li>
</ul>

<p myHighlight>Highlight me!</p>

import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

Structural

Attribute

services

import { Injectable } from '@angular/core';

@Injectable()
export class HeroService {
}