A N G U L A R 2 C R A S H C O U R S E

P R E S E N T E D B Y : E L I S H A K R A M E R

WHAT TO INSTALLPlease install the following three programs unto your local

computer (as a preriquisite for the following course).

TONIGHT'S AGENDA

View Code on Github

Angular 2 Spotify App

See the Github "ReadMe" file for more info...

We will begin by "git cloning" an Angular 2

Spotify App.

To spark your curiosity by exposing you to

the fundamentals of Angular 2, and

sharing with you some fantastic Ng-2 apps

with even better tutorials.

Table of contentsDemistifying Components

The Spotify API

Douglas Crockford and Old-School JS

Ng2 HTML Syntax

RxJS Observables and Streams

Fat Arrows of ES6

Redux Definition

Links to other projects:

Auth0 For Ng2 Authentication

Twitter written in Ng2

Reddit written in Ng2

Kudos to the author

This ta lk is based on a project by

Douglas Traversy, cal led "Bui ld An

Angular 2 Spot ify App". It 's a 7-part

v ideo ser ies on YouTube. Cl ick here to

v iew i t .

The 10,000 hour ru le

Malcolm Gladwel l says: "It takes 10,000

hours to become an expert at

anything."

Let's begin th is journey together

TEXT EDITOR

Note: If you don't have good code

highl ight ing with your text editor, you

can download either Visual Studio Code

(by Microsoft) or Atom for Angular 2

Color-Highl ight ing.

A word of warning

Practice your wax-on, wax-off. i.e. study methodologically

From Angular 2 Docs

read more here

Understanding the Spot i fy API

COMPONENTSComponents are the basic building blocks of Angular applications. A component controls a portion of the screen — a view — through its associated template.

Angular Modules help to organize an application into cohesive blocks of functionalities and extend it with capabilities from external libraries. The AppComponent hosts the client user experience. Main idea: stuff all the other components and dependencies in here.

app.component.ts or: app.module.ts

album.component. ts

Douglas Crockford (developer of the JS language) , lays the foundat ional premise:

"JavaScript is fundamental ly about objects . Arrays are objects .

Funct ions are objects . Objects are objects . So what are objects?

Objects are col lect ions of name-value pairs . The names are

str ings, and the values are str ings, numbers, booleans, and

objects ( including arrays and funct ions) . . .

If a value is a funct ion, we can consider i t a method. When a

method of an object is invoked, the th is var iable is set to the

object . The method can then access the instance var iables

through the th is var iable.

Objects can be produced by constructors, which are funct ions

which in i t ia l ize objects . . .

read more at: http://javascript.crockford.com/private.html

To understand our ng2 component f i les, lets explore th is codepen

together:

Classes, Constructors, and 'this' in Old-School JS

"We can conf igure the selector our Component wi l l look for to

instant iate i tse lf ( l ike <my-component>), and also set the template. . .

When our component is “ instant iated” and rendered on the page, we

have an instance of our component. We can modify the instance data

of that component, cal l methods on i t , and pass i t around to other

components. It ’s just an object!"

Ionic blog, (Apri l 13, 2015)

Here's where we tie it all back to Angular 2

Read more at: http://blog. ionic. io/angular-2-ser ies-components

The Search Component

(.ts file)

The HTML of the Search Component

"RxJS is a third party library, endorsed by Angular...

All of the Developer Guide samples have installed the RxJS npm package because observables are used widely in Angular applications. This app needs it when working with the HTTP client."

From Angular 2 Docs

Read more at: https://angular.io/docs/ts/latest/guide/server- communication.html

Rxjs is all about playing with data streams.

We're gonna cover three of these possibilities.

rxjs in action

Stream created out of an array and looped through via the subscribe() function

Understanding rxjs within the Spotify application

Step 1: Click this 'tutorial' button. It is an rxjs tutorial (written by someone who was part of the Angular 2 Docs Authoring team):

Step 2: Use the code from the following codepen to experiment in your chrome dev console.

The map operator lets us project the payload of the Observable into something else. Back in your spotify app, have a look within the 'services' folder at the 'spotify.service.ts' file. Notice that we're using the mapoperator for all of the app's core features! Mucho cool!

Al l 's wel l and good, but what 's wi th the fat arrows a l l over the p lace?

"By using arrow function we avoid having to type the function keyword, return keyword (it’s implicit in arrow functions), and curly brackets."

Read more here: "ES6 Arrow Functions: The New Fat & Concise Syntax in JavaScript"

=>

Notice that our 'SearchComponent' saves the response in a variable called 'searchRes'. Go back to your 'search.component.html' file now. Turns out that's the array that 'ngfor' is looping through and pasting to the page. Finally, we've come full circle.

Add features by playing with the Spotify Api:

UP NEXT: Other fascinating Angular 2 projects

a) Auth0

GETTING STARTED

a) Create your own Auth0 account at:

https://auth0.com/

b) Or you can simply clone this repo here:

https://github.com/ElishaKay/Angular-2-Auth-App

c) Watch the youtube tutorial here:

https://www.youtube.com/watch?v=i_dHFvi1BJc

If you clone the github repo, you can fill in your account credentials here:

b)  5 Redux Examples ( inc luding twit ter c lone)

a) View the demo here:

http://redux.jessepinho.com/#/twitter

b) Clone the repo here:

https://github.com/ElishaKay/Redux-and-Angular-2

c) Watch the youtube tutorial here:

http://www.youtube.com/watch?v=Q9iSjFbPjPo&t=12m38s

GETTING STARTED

The fundamental premise of redux is that the entire state of the application is represented in a single JavaScript object called a store, or application store, that can be acted upon using special functions called reducers.

Redux in a Nutshel l

See the live twitter example for more info...

c) Reddit Project

Check out the github repo by clicking here.

Check out the awesome ebook dedicated to explaining the Reddit project by clicking here. please note, the Reddit explanation begins on page 29.

Stay in touch,

E V E R Y T H I N G J S

Comment on Meetup