Quick start with AngularJS

Quick start with AngularJSWORKSHOP

• 13+ years of production development

• 6+ years of web development

• TDD infected 9 years ago

• And only 6 months of AngularJSexperience

Who’s speaking?

What do we want?

• Do less

• Get more

The Framework

The most influencing JavaScript frameworks over the last two years.Check it out here: http://goo.gl/XGT4dH

The Framework

Are You…

• Beginner or intermediate? AngularJS is opinionated and will save you from the spaghetti code monster.

• More advanced? Create complex web apps in a simpler way. Write code with unit testing in mind.

Recap MVC

ModelApplication Data

(e.g. Values typed into a form field. Or the results of a database call.)

ViewRepresentation of the Model(e.g. What the user sees on a

webpage.)

ControllerMediator between the Model & View

(e.g. When a form field is updated, it takes care of saving that data.Or when data comes back from an API call, tells the view to update.)

How MVC rethought in AngularJS

ModelApplication Data

(e.g. Values typed into a form field. Or the results of a database call.)

ViewRepresentation of the Model

(html fragment with ng-controllerattribute)

WhateverMediator between the Model & View

(e.g. Passes data back and forth seamlessly* via data binding)

But wait!..

— Ain’t it about extra work? Why not make it simple with JQuery?

In fact, less work!

Instead of

<div id="greeting"></div>and$('.greeting').text(greetingMessage);

You need only:

<div>{{ greetingMessage }}</div>

Also…

• Is very opinionated.(i.e. there is typically a “right” way to do it)

• Gives you a way to organize your code but feels like you’re just writing HTML and JS, not extending classes.

• Does a lot of heavy lifting for you(e.g. DOM manipulation using data binding, REStinterop etc.)

And more

• Data models are just plain objects

• RESTful services support

• Internationalization and Localization

• Sanitazing and validation for high security

• Built with TDD in mind

• E2E test support

Your Toolkit

• AngularJS• IDE

• WebStorm• Visual Studio + ReSharper• Plunker

• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.

Your Toolkit• AngularJS• IDE

• WebStorm• Visual Studio + ReSharper• Plunker

• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.

angularjs.org

ngmodules.org

Your Toolkit• AngularJS• IDE

• WebStorm• Visual Studio + ReSharper• Plunker

• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.

Your Toolkit• AngularJS• IDE

• WebStorm• Visual Studio + ReSharper• Plunker

• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.

Your Toolkit• AngularJS• IDE

• WebStorm• Visual Studio + ReSharper• Plunker

• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.

Your Toolkit• AngularJS• IDE

• WebStorm• Visual Studio + ReSharper• Plunker

• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.

Your Toolkit• AngularJS• IDE

• WebStorm• Visual Studio + ReSharper• Plunker

• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.

• Shamanistic Tambourine aka Бубен

Scaffolding with Yeoman• Well thought-out directory structure

• All dependencies included (nmp and bower)

• Boilerplate for routine tasks and unit testing done

• App folder for the AngularJSapplication sources

• Dist folder for the application deploy package

• Test folder for Jasmine+KarmaJS specs

Then doing everything with Grunt

And run your test right in the right IDE*

* JetBrains WebStorm + KarmaJS

Create new stuff with Yeoman

Creates 2 files:• Directive stub with JSDoc• Jasmine test spec

Places them in appropriate place

Includes directive source in the index.html file

Or create it in your favorite IDE*

* JetBrains WebStorm

Writing a controller

Writing a controller

Let’s try it…

Compare:

• Naïve Weather Apphttp://plnkr.co/edit/51OCvUa7Y8t1ND1ojqNp

• Mature Weather Apphttp://plnkr.co/edit/BeBj63yoI1QZT0QpMAoG

and

• UnicornLaunch Application in WebStorm

Don’t say you are not warned

Don’t say you are not warned

• Modularity and Proper project organization

• Implement all DOM stuff in directives

• Consider performance issues

• No feature without test

Don’t say you are not warned1. They want you to support IE?

2. Wouldn’t it be an overkill?

3. Does SEO matter?http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

4. Enormous data amounts in a single view

Use AngularJS anyway! =))