let's build an angular app!

33
Your Cloud. Your Business. Let’s Build an AngularJS App! Jeremy Likness Principal Architect

Upload: jeremy-likness

Post on 20-Dec-2014

4.162 views

Category:

Technology


1 download

DESCRIPTION

AngularJS is a popular JavaScript framework that provides a variety of services including dependency injection, data-binding, and declarative DOM extensions. In this talk, Jeremy will cover at a high level what the benefits of AngularJS are and then build a reference application. If you are an Angular developer looking to learn best practices or have never touched Angular and want to know what the fuss is all about, this talk is for you. (Grab the project and use the Git checkouts to follow along)

TRANSCRIPT

Page 1: Let's Build an Angular App!

Your Cloud.Your Business.

Let’s Build an AngularJS App! Jeremy Likness Principal Architect @JeremyLikness

Page 3: Let's Build an Angular App!

www.ivision.com

• Business Process Management/ALM

• Custom Application Development

• Collaboration• Business Intelligence

Page 4: Let's Build an Angular App!

TODAY’S AGENDA

1. What and Why? What is Angular? Why use it?

2. How? How do you build an AngularJS app?

3. Q&A Guaranteed answers.

Source Code: https://github.com/JeremyLikness/AngularHealthApp/

Specifications: http://jeremylikness.github.io/AngularHealthApp/test.html Running App: http://jeremylikness.github.io/AngularHealthApp/

Page 5: Let's Build an Angular App!

WHAT AND WHY?

Page 6: Let's Build an Angular App!

WHAT AND WHY?

I’m biased because …

25developers

80,000+L.O.Ts.C

200+components

3years

4xImprovement

Global Parallel Team

Page 7: Let's Build an Angular App!

WHY?

• Began effort (6 mos.) with JavaScript and KnockoutJS• Changed to use AngularJS and TypeScript • 4x faster development, attributed in a large part to Angular

4xImprovement

Page 8: Let's Build an Angular App!

WHAT?

Angular is …

Angular

Expressions

Glue

ContainerTemplates

Tools

Testable

Page 9: Let's Build an Angular App!

DEMO: How

Page 10: Let's Build an Angular App!

Step 1

git checkout 17e9892

SHELL

Page 11: Let's Build an Angular App!

Step 2

git checkout b8864f4

MODULE

Page 12: Let's Build an Angular App!

Step 3

git checkout f5af48e

SPECIFICATION

Page 13: Let's Build an Angular App!

Step 4

git checkout 33d9473

DEFINITION

Page 14: Let's Build an Angular App!

Step 5

git checkout e9db905

IMPLEMENTATION

Page 15: Let's Build an Angular App!

Step 6

git checkout c71895b

OBJECTS

Page 16: Let's Build an Angular App!

Step 7

git checkout 40c946e

PROPERTIES

Page 17: Let's Build an Angular App!

Step 8

git checkout 602ae23

GREEN

Page 18: Let's Build an Angular App!

Step 9

git checkout 4636a91

DEPENDENCIES

Page 19: Let's Build an Angular App!

Step 10

git checkout 72429dd

FACTORIES

Page 20: Let's Build an Angular App!

Step 11

git checkout c065ad3

CONTROLLERS

Page 21: Let's Build an Angular App!

Step 12

git checkout 6a801b2

FILTERS

Page 22: Let's Build an Angular App!

Step 13

git checkout 11e13f7

PATTERNS

Page 23: Let's Build an Angular App!

Step 14

git checkout cc6d716

DIRECTIVES

Page 24: Let's Build an Angular App!

Step 15

git checkout 061ba51

RANGES

Page 25: Let's Build an Angular App!

Step 16

git checkout 55e2c30

SLIDER

Page 26: Let's Build an Angular App!

Step 17

git checkout dec799e

RESPONSIVE

Page 27: Let's Build an Angular App!

Step 18

git checkout e466dc6

VALIDATIONS

Page 28: Let's Build an Angular App!

Step 19

git checkout 8dbba93

FORMS

Page 29: Let's Build an Angular App!

Step 20

git checkout bc4b736

PROFILE

Page 30: Let's Build an Angular App!

Step 21

git checkout 6da74a4

TILE

Page 31: Let's Build an Angular App!

Step 22

git checkout 1ae397c

CLASS

Page 32: Let's Build an Angular App!

Step 23

git checkout master

SHIP IT!

Page 33: Let's Build an Angular App!

Questions?

Jeremy Likness, Principal Architect @JeremyLikness

Source Code: https://github.com/JeremyLikness/AngularHealthApp/

Specifications: http://jeremylikness.github.io/AngularHealthApp/test.html Running App: http://jeremylikness.github.io/AngularHealthApp/

This Deck: http://www.slideshare.net/jeremylikness