Angular 2 Crash Course

ANGULAR 2 CRASH
COURSE
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 INSTALL
Please 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 contents
Demistifying 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 talk is based on a project by
Douglas Traversy, called "Build An
Angular 2 Spotify App". It's a 7-part
video series on YouTube. Click here to
view it.

The 10,000 hour rule
Malcolm Gladwell says: "It takes 10,000
hours to become an expert at
anything."
Let's begin this journey together

TEXT EDITOR
Note: If you don't have good code
highlighting with your text editor, you
can download either Visual Studio Code
(by Microsoft) or Atom for Angular 2
Color-Highlighting.

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

From Angular 2 Docs
read more here

COMPONENTS
Components 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

Douglas Crockford (developer of the JS language), lays the
foundational premise:
"JavaScript is fundamentally about objects. Arrays are objects.
Functions are objects. Objects are objects. So what are objects?
Objects are collections of name-value pairs. The names are
strings, and the values are strings, numbers, booleans, and
objects (including arrays and functions)...
If a value is a function, we can consider it a method. When a
method of an object is invoked, the this variable is set to the
object. The method can then access the instance variables
through the this variable.
Objects can be produced by constructors, which are functions
which initialize objects...
read more at: http://javascript.crockford.com/private.html

To understand our ng2 component files, lets explore this codepen
together:
Classes, Constructors, and 'this'
in Old-School JS

"We can configure the selector our Component will look for to
instantiate itself (like <my-component>), and also set the template...
When our component is “instantiated” and rendered on the page, we
have an instance of our component. We can modify the instance data
of that component, call methods on it, and pass it around to other
components. It’s just an object!"
Ionic blog, (April 13, 2015)
Here's where we tie it all back to
Angular 2
Read more at: http://blog.ionic.io/angular-2-series-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 map
operator for all of the app's core features! Mucho cool!

All's well and good, but what's with the fat
arrows all over the place?
"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

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
(including twitter clone)

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 Nutshell
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

Angular 2 Crash Course

Recommended

More Related Content

What's hot (20)

Viewers also liked (14)

Similar to Angular 2 Crash Course (20)

Recently uploaded (20)

Angular 2 Crash Course