Deploying Angular 2 Web Apps

@zakburki

Hong Kong JavaScript and Node.js

20th Feb 2017

What is Angular?

Who uses Angular?

AngularJS is a framework for building dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax.

  • Nasdaq
  • Fox Sports
  • Tesla
  • Udemy
  • Google (sometimes)

What was wrong with Angular 1?!

  • Scope Inheritance
  • Debugging
  • Dependency Injection (maybe)
  • Directives
  • Anything Else?

 

Components vs Directives

 

Creates it's own view (hierarchy of DOM elements) with attached behaviour Directives add behaviour to an existing DOM element
Only one component can be present per DOM element. Multiple decorators can be placed on a single element.
Shadow view context is the component instance Directives do not introduce new evaluation context
When: create a reusable set of DOM elements of UI with custom behaviour When: write reusable behaviour to supplement existing DOM elements.

You've Built Something using Angular2

Now you want to deploy

Step 1 - Prepare Your App for Deployment.

 

 

Most Popular Module Bundlers/Loaders

 

  1. SystemJS
  2. Webpack
  3. RequireJS

 

Just use the Angular-CLI

Unless you really Care..

Build Your App Files

 

usually in a /dist or /build folder

 

Typical Contents:

index.html

.js files (bundles and chunks)

map files

css files

assets folder

Step 2 - Now Serve Them.

Options to Serve:

  • simple http-server
  • apache/nginx webservers
  • amazon s3

Wait You Want

Something More Complete.

More Dynamic I hear?

 

Fine. 

Let's get MEAN and Vulgar.

Any Questions?

 

Twitter:

@zakburki

Made with Slides.com