Building a Startup Stack with AngularJS

BUILDING A STARTUP STACK WITH ANGULARJS

Saturday, 28 September, 13

BUILDING A STARTUP STACK WITH ANGULAR JS

BUILDING A STARTUP STACK WITH ANGULARJS HTML 5

BUILDING A STARTUP STACK WITH ANGULARJS

The MEAN Stack

Web dev framework for NodeJS

Superheroic frontend framework

Event-based concurrency environment

KEY POINT Build an app with a SPA framework and a JSON datastore, and PHP (or Rails) become a poor fit for most business

cases.

In 2005 50% of any web app was JavaScript

In 2013, 70%+ is JavaScript

Last Basecamp: 5K Ruby, 5K Coffeescript, plus HTML and CSS

Modern DBs like Couch and MongoDB speak JavaScript

/PHP|RAILS/ REALITY

SERVER-CENTRIC WEB APPLICATION

data services

authenticationintegrationpaymentgateways

client

templatingand

routing

query JavaScript

dynamic page elements

dataquery, format, layout

BROWSER-CENTRIC WEB APPLICATION

services

dataquery

query JavaScript

data services client

templatingand

routing

services

dataquery

templatingand

routing

query JavaScript

templatingand

routing

services

dataquery

templatingand

routing

query JavaScript

services

dataquery

templatingand

routing

query JavaScript

services

dataquery

templatingand

routing

query JavaScript

data services

noSQLDB

services

dataquery

templatingand

routing

query JavaScript

data services

noSQLDB

services

dataquery

templatingand

routing

query JavaScript

data services

noSQLDB

services

templatingand

routing

query JavaScript

data services

noSQLDB

services

templatingand

routing

query JavaScript

data services

dataquery

noSQLDB

services

templatingand

routing

query JavaScript

services

dataquery

noSQLDB

services

templatingand

routing

query JavaScript

dataquery

BROWSER-CENTRIC + SERVICES

noSQLDB

servicesdata

queryauthenticationintegrationpaymentgateways

templatingand

routing

query JavaScript

Thin-Server Computing

THE NEW STACK: NOT JUST BUZZ

All 3 tiers have changed!

Client -> Browser-Centric MV* JS

Server -> Thin-Server, REST, Event

Database -> Document, web-centric

http://www.bennadel.com/blog/2439-My-Experience-With-AngularJS-The-Super-heroic-JavaScript-MVW-Framework.htm

THE SOLUTION?Seed projects are sprouting like weeds. They all suck.

INTRODUCING...

THE META-STACKBest-Practice, Canonical Stack Building From First

Principles

MEAN Process Stack

Web dev framework for NodeJS

Superheroic frontend framework

Event-based concurrency environment

Recipes, Not SeedsSaturday, 28 September, 13

CREATING YOUR DEFAULT PROJECT STACK

AngularJS + REST + API Server + MongoDBfor a project called tim

CHECKLIST

nodejistu account created

mongolab account created or mongodb installed locally

node, npm, yo, bower at the right versions

git installed

THE STARTING STACK

Node 0.10.5NPM

YeomanBowerYoGrunt

MongoGitSublime Text 2 and Webstorm

NPM PACKAGES

Update package.json:

mongoose

winston

run “npm install”

Future one-off packages:

npm install mongoose --save

cd tim && express -s -c less(ignore destination not empty)

STEP 1: EXPRESS

express --help

-s --sessions

-e --ejs (defaults to jade)

-j --jshtml (defaults to jade)

-c --css (less|stylus) (defaults to plain css)

npm install, node app

BASIC EXPRESS PROJECT

npm install

node app

“open http://localhost:3000” to view

HTTP://LOCALHOST:3000 EXPRESS IS RUNNING

Y to overwrite .gitignore

STEP 2: YO ANGULARmv package.json package.json.express

yo angular

Y for Bootstrap, N for Compass, Return for 3 options (arrows and space to unselect)

NOTE: This isn’t using Express yet

TEST ANGULAR

grunt serverbrowser should popup to default

modify LiveReload port in Gruntfile.js if error regarding 35729 port

grunt testrun unit tests

app/ will be static public folder

INTEGRATE ANGULAR & NODE

merge package.json files and rm package.json.express

optional: rm app/favicon.ico

this is yeoman icon- removing it defaults app to express icon

mv public/stylesheets app/stylesrm -Rf public

vi app.js # see next slide

MERGE PUBLIC TO APP

replace ‘public’ with ‘app’ in two places,(also update your cookieParser)

EDIT APP.JS TO POINT TO APP/

Precedence is key for Express- it’s an HTTP pipeline

EXPRESS APP.JS// all environmentsapp.set('port', process.env.PORT || 3000);app.set('views', __dirname + '/views');app.set('view engine', 'jade');app.use(express.favicon());app.use(express.logger('dev'));app.use(express.bodyParser());app.use(express.methodOverride());app.use(express.cookieParser('rangle your secret here'));app.use(express.session());// app.use(app.router); // ...OR move after use express.static OR comment out ‘/’ routeapp.use(require('less-middleware')({ src: __dirname + '/app' }));app.use(express.static(path.join(__dirname, 'app')));// NOTE: with app.router comment out express.static is first// route handler and gets priority over app.get below.

// development onlyif ('development' == app.get('env')) { app.use(express.errorHandler());}

// NOTE: if app,route isn’t set explicitly above the first route// definition automatically loads it. Since this is after use// express.static the Angular app/ directory has precedenceapp.get('/', routes.index);app.get('/users', user.list);

add cookieParser secret

replace “public” with “app”

comment out ‘/’ node to route to enable Angular to load via static mounting of app OR make sure static mount has precedence over router.

ANGULAR TIP: having the right API is essential to easy Angular dev

BUILD SIMPLE API

npm install winston mongoose passport passport-local --save

mkdir lib

touch lib/{log.js,db.js,user.js}

mkdir loadfiles

touch loadfiles/{users.csv,projects.csv,time.csv}

TIP rapidly create simple seed csv data

SOME QUICK SEED DATA

users.csvuser_id,username,email,password,role1,nick,nick@rangle.io,cm,admin2,bob,bob@rangle.io,cm,user

tasks.csvproject_id,task,description1,build tim, build tim incrementally with github,162,add blogging to rangle.io,finish deploy anglePress,2

projects.csvproject_id,name,description1,tim,a great time tracker2,anglePress,a crazy AngularJS blog3,rangle.io,my website

TIP add --drop if you want to drop prior data

IMPORT INITIAL DATA

mongoimport -d tim -c users --type csv --headerline users.csv

mongoimport -d tim -c projects --type csv --headerline projects.csv

mongoimport -d tim -c tasks --type csv --headerline tasks.csv

curl http://localhost:3000/users

API TESTING WITH CURL

a quick test returns our user data

curl http://.../users/1 fails due to missing routing

ANGULAR TIP the app routing will be fairly similar to this

NOW ROUTE OTHER API CALLS

Add the following to app.js:

app.get('/projects/:id', project.get);

app.post('/projects', project.post);

app.del('/projects', project.del);

ANGULAR TIP add -i at beginning to see headers

TESTING API

curl http://127.0.0.1:3000/users/1

curl -d “user_id=5&username=joe&password=fresh” http://127.0.0.1:3000/users

curl -X DELETE http://127.0.0.1:3000/users/5

TIP focus on jasmine-node for API server

JASMINE-NODE

Jasmine for node by Misko Hevery

https://github.com/mhevery/jasmine-node

NOT Angular testing but for API and library code

npm install -g jasmine-node

put test in spec/ directory

jasmine-node --verbose --autotest spec/

ANGULAR TIP refactor your file structure like you do your code

We’ve created the simplest Mongo + Node + Express + AngularJS project structure possible

This will need to be refactored as the project grows

We’ve tested each stage

We are testing the API layer independent of AngularJS

THE STACK SUMMARY

THE MEAN STACK

Core Stack

Node for the application server

Npm for the package management

MongoDB for the database

Process

yo for scaffolding

bower for client-side package management (e.g. jQuery, Angular, d3, underscore)

grunt (for build management and automation)

THE SERVER STACK

Express for the web framework

Passport for authentication

Winston for logging

Mongoose for the MongoDB acess

Request for calling other REST APIs

Underscore for JSON wrangling

THE ANGULARJS STACK

AngularJS

Bootstrap

Angular-UI

Angular-Grid

underscore.js

AVOID jQuery where possible, wrap in directives when needed

CONNECTING NODE TO ANGULAR

test the API with curl first!

version your API if 3rd party integrations, or rapid development for SaaS

return clear meaningful API codes

implement a $http interceptor for 401 (unauthorized codes) and prompt user to log in, and then retry the original call (see book recommendations at end)

secure the API server-side - then it doesn’t matter what shennanigans a user does in the browser

If you have really strong security needs, get an API review

TWO ESSENTIAL BOOKS

RELATED RESOURCES

Free eBook: Configuring the MEAN Stack for Development

Free eBook: Building a Startup Stack with AngularJS

To receive these when out next month, simply register on our mailing list ( bottom of http://rangle.io homepage, or email me at nick@rangle.io )

RELATED EVENTSWed. Oct. 9 7pm MongoDB Meetup: Building Reporting Services Using REST and Node for Web Applications Using MongoDBhttp://www.meetup.com/Toronto-MongoDB-User-Group/events/140966402/

Wed. Oct. 16 7pm PhoneGap Meetup: Using AngularJS + PhoneGap to Rapidly Create Cross-Platform, Responsive Web Appshttp://www.meetup.com/PhoneGap-Toronto/events/140441122/

Wed. Oct. 23 - Thurs. Oct 24: Building a Startup Stack with AngularJS (2 day class) http://guestlistapp.com/events/192018

Nov. 2013 - Toronto CTO 1-Day Conferencehttp://www.linkedin.com/groups?gid=5164389 “StackFest 2013”

THANK YOU!Nick Van Weerdenburg

nick@rangle.iotwitter: @rangleio

http://rangle.io

Building a Startup Stack with AngularJS

Technology

The Australian Startup Stack

MEAN Stack NYC Meetup 20150717: TDD Your AngularJS + Ionic Directives With jQuery

Full Stack AngularJS for Java Developers

AngularJS Interview Questions · AngularJS Interview Questions codespaghetti.com/angularjs-interview-questions/ Angular JS Angular JS Interview Questions, Best AngularJS Programs

AngularJS Introduction

Service vs provider vs factory - cnblogs.com · 2015/9/17 angularjs Service vs provider vs factory Stack Overflow ... From the AngularJS mailing list I got that explains service vs

David Stack: 5 Key Takeaways From Serving on a Startup Board

AngularJS · 2018. 6. 5. · Features of Angular • It builds powerful applications—like Gmail, for example—with ease. • AngularJS is part of the MEAN Stack. MEAN can do everything

Lean Stack - Um jeito simples de iniciar com Lean Startup

Offshore AngularJS- development- Hire-AngularJS-Developers- Outsource-AngularJS-Development

Yeoman AngularJS and D3 - A solid stack for web apps

FULL STACK DEVELOPMENT SPECIALIZATION CAPSTONE …€¦ · Introduction Application of photo-reports for NGOs and animal we lfare about animal abuse. ... AngularJS-Ionic frontend

[IT기술칼럼 #4] 고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원

The MEAN Stack: MongoDB, ExpressJS, AngularJS and Node.js

AngularJS intro

AngularJS Projects, Forms and Servicesiproduct.org/wp-content/uploads/2016/07/AngularJS... · AngularJS and TypeScript SPA Development Sources: AngularJS [ ], ... Designing front-end

David Stack: 5 Ways To Scale and Grow Your Startup

Welovejs AngularJS

rangle - Yuri Takhteyevyto.io/slides/Building-an-AngularJS-Hack-Stack-2015.pdf · 2015-03-10 · Ionic & PhoneGap JavaScript Node.js User Experience Design AngularJS HTML5 Responsive

Mobile Apps Using AngularJS - Adam Klein @ AngularJS IL