AngularJS for the enterprise

(1)

AngularJS for the enterprise

(2)

(3)

(4)

(5)

(6)

(7)

(8)

(9)

(10)

And then our answer...

(11)

(12)

(13)

Web development with Java (EE)

(14)

(15)

AngularJS for the enterprise

(16)

Did you ever build a large scale application using JQuery? Was it maintainable?

Was it flexible?

Did you have unit tests?

Did the codebase feel safe?

app.saveObj = function(obj) {

obj.rowsToSave = obj.rows.length; $.post(someURL,obj,function(data) { $.each(obj.rows,function() {

var row = this;

row.parentId = data.id; obj.imgsToSave += row.imgs.length; $.post(otherURL,row,function(data2) { $.each(row.imgs,function() { this.rowId = data2.id; $.post(uploURL,this,function() { obj.imgsToSave--; if (obj.imgsToSave == 0) { app.renderObj(obj); } }); }); }); }); });

(17)

And then came: Backbone.js

Ember.js

KnockoutJS

Batman.js, Dart, RequireJS, Meteor...

Check them out at: http://todomvc.com/

(18)

AngularJS

“AngularJS is what HTML would have been,

had it been designed for building web-‐apps.”

(19)

MVC/MVVM/MVW framework

MVW: Model View Whatever, “Whatever works for you”

Declarative + imperative model Dependency injection

(20)

Features

2-way databinding + templating

MVC + Dependency Injection + modules Server communication

Custom directives

Validation, formatting, etc Routing / navigation

(21)

First AngularJS AngularJS app Bootstrapping

Templates

2-way data binding Controllers

Scope

(22)

First AngularJS AngularJS app ngRepeat filters HTML validation Routing / ngView $routeParams

(23)

More advanced features Dependency Injection Services Server communication Asynchronous processing / $q Events

(24)

More advanced features Configuration phase Fixing common issues

Fixing flashes with ngBind / ngCloak Debugging routing issues

Resolve objects before Controller is invoked

(25)

More advanced features Form validation

CSS classes Minification

(26)

Directives

Way to “extend” HTML

ng-controller, ng-repeat, etc.

Integration with 3th party libraries Place for imperative coding

Reusable components

(27)

(28)

AngularJS for the enterprise

Re-‐implement the wheel

AngularJS provides $hIp, $route, $q modules, etc And direcLves ng-‐show, ng-‐hide, ng-‐repeat, etc

Almost no need for other libraries!

(29)

JavaScript’s prototypical inheritance

<div ng-controller=”ParentCtrl”> Parent <input ng-model=”name”> <div ng-controller=”ChildCtrl”> Hello <input ng-model=”name”> </div>

(30)

(31)

AngularJS for the enterprise

JavaScript’s prototypical inheritance

<div ng-controller=”ParentCtrl”> Parent <input ng-model=”name”> <div ng-controller=”ChildCtrl”>

Hello <input ng-model=”myObject.name”> </div>

(32)

JavaScript’s prototypical inheritance, part 2

Or use AngularJS >= 1.1.5 New “Controller as” syntax

<div ng-controller=”MyCtrl as my”> {{my.name}}

(33)

AngularJS for the enterprise

Async is not gone!

Angular is mostly async transparent

(34)

Bad separaLon of concerns

Model-‐manipulaLon/event handling goes in Controllers

Generic logic/singleton stuﬀ goes into Services and Factories DOM manipulaLon goes in direcLves

(35)

AngularJS for the enterprise

Hand-‐craMing CSS in HTML

ngClass to the rescue

<ul>

<li ng-repeat=”item in items”

ng-class=”{‘active’: item.active,

‘open’: !item.isClosed}”> {{item.name}}

(36)

(37)

QuesLon:

Is IE supported?

Answer:

Yes, but it may require some work on IE < 9 See http://docs.angularjs.org/guide/ie

(38)

AngularJS for the enterprise

QuesLon:

Is AngularJS slow?

Answer:

Despite continuous dirty checking, Angular is really quick Make sure your scope.$watch functions perform.

(39)

QuesLon:

Is AngularJS used in the real world?

Answer:

Yes it is used on both Google and non-Google projects, including money-making Google projects

(40)

AngularJS for the enterprise

QuesLon:

How do I architect a big AngularJS application?

Answer:

Please don’t! Separate your application in small, independent modules. Angular provides the features for this.

(41)

QuesLon:

How do I keep my app maintainable?

Answer:

Good architecture, and especially unit tests. JavaScript is not type-safe!

(42)

AngularJS for the enterprise

QuesLon:

How do I start an Angular project?

Answer #1:

Use Angular Seed (official AngularJS skeleton)

Answer #2:

(43)

QuesLon:

Where do I put my DOM manipulation code?

Answer #1:

You don’t need any

Answer #2:

(44)

QuesLon:

What about minification/obfuscation?

app.controller(‘MyCtrl’, function($scope, MySvc) { ...

Answer:

Manually instructing Angular which parameters are needed app.controller(‘MyCtrl’, [‘$scope’, ‘MySvc’, function(a, b) { ...

(45)

QuesLon:

How do I use JQuery?

Answer:

Just make sure that JQuery is loaded before Angular Otherwise strange things may happen

(46)

AngularJS for the enterprise

QuesLon:

How do I use my cool XYZ JQuery plugin?

Answer:

Wrap it inside a directive and use scope.$apply() to notify the Angular digest cycle of any updates

(47)

QuesLon:

Can I use animations on elements/navigation?

Answer:

(48)

QuesLon:

Why the prefix $?

Answer:

$ is used as a prefix for Angular-managed dependencies, like

$scope, $http, or parse. In a directive, scope is typically written without $, because it’s not really “injected”

(49)

(50)

Build environment Yeoman Grunt / Bower +/- 100 generators available Based on Node.JS Karma (Testacular)

Angular Batarang (Chrome Dev Plugin)

(51)

IntelliJ/PhpStorm/WebStorm JetBrains Chrome Plugin

Live reload

angularjs-plugin (by John Lindquist) Code completion & live templates

(52)

AngularJS for the enterprise

Libraries for Angular Angular UI Bootstrap directives Fancy Grid And others AngularStrap JQuery?

(53)

Resources http://yeoman.io/ http://angularjs.org/ http://angular-ui.github.io/ http://www.egghead.io/ http://parleys.com/play/5148922b0364bc17fc56c91b

(54)

http://www.bennadel.com/ blog/2439-My-Experience- With-AngularJS-The-Super-

heroic-JavaScript-MVW-Framework.htm

(55)

http://todomvc.com/

See http://docs.angularjs.org/guide/ie

http://yeoman.io/

http://angularjs.org/

http://angular-ui.github.io/

http://www.egghead.io/

http://parleys.com/play/5148922b0364bc17fc56c91b

http://www.bennadel.com/

blog/2439-My-Experience-

With-AngularJS-The-Super-

heroic-JavaScript-MVW-Framework.htm