Presented at SCREENS 2013 in Toronto with Nick Van Weerdenburg
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
AngularJS is a hot, hot, hot topic. Building web and mobile apps in AngularJS is an ease but there is a learning curve. In this session, you’ll learn the ins and outs of AngularJS and leave the session knowing how to build killer AngularJS apps.
8. The MEAN Stack
Web dev framework for NodeJS
Superheroic frontend framework
Event-based concurrency environment
Saturday, 28 September, 13
9. 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
Saturday, 28 September, 13
23. 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
Saturday, 28 September, 13
29. MEAN Process Stack
Web dev framework for NodeJS
Superheroic frontend framework
Event-based concurrency environment
Recipes, Not Seeds
Saturday, 28 September, 13
37. Y to overwrite .gitignore
STEP 2:YO ANGULAR
mv package.json package.json.express
yo angular
Y for Bootstrap, N for Compass, Return for 3 options (arrows
and space to unselect)
Saturday, 28 September, 13
38. NOTE: This isn’t using Express yet
TEST ANGULAR
grunt server
browser should popup to default
modify LiveReload port in
Gruntfile.js if error regarding
35729 port
grunt test
run unit tests
Saturday, 28 September, 13
39. 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
Saturday, 28 September, 13
41. replace ‘public’ with ‘app’ in two places,
(also update your cookieParser)
EDIT APP.JS TO POINT TO APP/
Saturday, 28 September, 13
42. Precedence is key for Express- it’s an
HTTP pipeline
EXPRESS APP.JS
// all environments
app.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 ‘/’ route
app.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 only
if ('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 precedence
app.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.
Saturday, 28 September, 13
43. 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}
Saturday, 28 September, 13
44. TIP rapidly create simple seed csv data
SOME QUICK SEED DATA
users.csv
user_id,username,email,password,role
1,nick,nick@rangle.io,cm,admin
2,bob,bob@rangle.io,cm,user
tasks.csv
project_id,task,description
1,build tim, build tim incrementally with github,16
2,add blogging to rangle.io,finish deploy anglePress,2
projects.csv
project_id,name,description
1,tim,a great time tracker
2,anglePress,a crazy AngularJS blog
3,rangle.io,my website
Saturday, 28 September, 13
45. 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
Saturday, 28 September, 13
47. 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);
Saturday, 28 September, 13
48. 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
Saturday, 28 September, 13
49. 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/
Saturday, 28 September, 13
50. ANGULAR TIP refactor your file structure
like you do your code
RECAP
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
Saturday, 28 September, 13
52. 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)
Saturday, 28 September, 13
53. 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
Saturday, 28 September, 13
55. 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
Saturday, 28 September, 13
57. 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 )
Saturday, 28 September, 13
59. RELATED EVENTS
Wed. Oct. 9 7pm MongoDB Meetup: Building
Reporting Services Using REST and Node
for Web Applications Using MongoDB
http://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 Apps
http://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 Conference
http://www.linkedin.com/groups?gid=5164389 “StackFest 2013”
Saturday, 28 September, 13