angular js, yeomon & grunt

42
@byrichardpowell byrichardpowell.co.uk Friday, 6 December 13

Upload: richard-powell

Post on 27-Jan-2015

138 views

Category:

Technology


1 download

DESCRIPTION

An introduction to Angular JS. The popular JS MVC framework for building complex single page web sites. I also talk about Yeomon and Grunt

TRANSCRIPT

Page 1: Angular js, Yeomon & Grunt

@byrichardpowellbyrichardpowell.co.uk

Friday, 6 December 13

Page 2: Angular js, Yeomon & Grunt

@serverdensityblog.serverdensity.com

Friday, 6 December 13

Page 3: Angular js, Yeomon & Grunt

Monitor your infastructure

Friday, 6 December 13

Page 4: Angular js, Yeomon & Grunt

Friday, 6 December 13

Page 5: Angular js, Yeomon & Grunt

25 TB of data per month

Friday, 6 December 13

Page 6: Angular js, Yeomon & Grunt

Friday, 6 December 13

Page 7: Angular js, Yeomon & Grunt

Friday, 6 December 13

Page 8: Angular js, Yeomon & Grunt

Friday, 6 December 13

Page 9: Angular js, Yeomon & Grunt

Y U NO ?Manage DependenciesBind DataManage Scope/Child Views

Friday, 6 December 13

Page 10: Angular js, Yeomon & Grunt

Y U NO ?Support IE7Progressive Enhancement

Friday, 6 December 13

Page 11: Angular js, Yeomon & Grunt

218 Lines of code

Todo MVC

378 Lines of code

todomvc.com/

Friday, 6 December 13

Page 12: Angular js, Yeomon & Grunt

218 Lines of code378 Lines of code

todomvc.com/

Friday, 6 December 13

Page 13: Angular js, Yeomon & Grunt

funnyant.com/choosing-javascript-mvc-framework/

Friday, 6 December 13

Page 14: Angular js, Yeomon & Grunt

The Basics

Friday, 6 December 13

Page 15: Angular js, Yeomon & Grunt

An Angular App

Friday, 6 December 13

Page 16: Angular js, Yeomon & Grunt

A Todo List: HTML

Friday, 6 December 13

Page 17: Angular js, Yeomon & Grunt

A Todo List: Controller

Friday, 6 December 13

Page 18: Angular js, Yeomon & Grunt

A Router

Friday, 6 December 13

Page 19: Angular js, Yeomon & Grunt

Client to Server

Friday, 6 December 13

Page 20: Angular js, Yeomon & Grunt

The Awesome

Friday, 6 December 13

Page 21: Angular js, Yeomon & Grunt

Directives

Friday, 6 December 13

Page 22: Angular js, Yeomon & Grunt

Nesting Scopes

Friday, 6 December 13

Page 23: Angular js, Yeomon & Grunt

Nesting Scopes

bit.ly/18aYNgzbit.ly/1eYrs88

Friday, 6 December 13

Page 24: Angular js, Yeomon & Grunt

Filters

Friday, 6 December 13

Page 25: Angular js, Yeomon & Grunt

Animation

Friday, 6 December 13

Page 27: Angular js, Yeomon & Grunt

Testing

Friday, 6 December 13

Page 28: Angular js, Yeomon & Grunt

Unit Testing

Friday, 6 December 13

Page 29: Angular js, Yeomon & Grunt

E2e Testing

Friday, 6 December 13

Page 30: Angular js, Yeomon & Grunt

Karmakarma-runner.github.io/0.10/index.html

Protractorhttps://github.com/angular/protractor

Friday, 6 December 13

Page 31: Angular js, Yeomon & Grunt

Friday, 6 December 13

Page 32: Angular js, Yeomon & Grunt

Handles BoilerplateProvides ScaffoldingCan configure GruntManage dependencies

Friday, 6 December 13

Page 33: Angular js, Yeomon & Grunt

* Generators

$ npm install -g yo

$ npm install -g generator-webapp

$ npm install -g generator-angular

Friday, 6 December 13

Page 34: Angular js, Yeomon & Grunt

* Generators

$ yo angular

$ bower install angular-ui

Friday, 6 December 13

Page 35: Angular js, Yeomon & Grunt

npmjs.org/search?q=yeoman-gene

Backbone + RequireAngular + Express

EmberMocha

Front-End BoilerplatesWordpress

HoodieThree.js

Chrome AppsCoffeeScript + Source Maps

Revealand more

Friday, 6 December 13

Page 36: Angular js, Yeomon & Grunt

* GeneratorsFriday, 6 December 13

Page 37: Angular js, Yeomon & Grunt

LintingCompilingMinificationTestingDocumentationDeploymentLive Reloadand more...

Friday, 6 December 13

Page 38: Angular js, Yeomon & Grunt

* Generators

$ grunt server

$ grunt test

$ grunt build

Friday, 6 December 13

Page 39: Angular js, Yeomon & Grunt

Do we need to serve the UI via a backend?

Friday, 6 December 13

Page 40: Angular js, Yeomon & Grunt

• Partials• URL Routing• Templating• Build tools

What more do you need?

Friday, 6 December 13

Page 41: Angular js, Yeomon & Grunt

Friday, 6 December 13

Page 42: Angular js, Yeomon & Grunt

blog.serverdensity.com/@serverdensity

byrichardpowell.co.uk@byrichardpowell

Friday, 6 December 13