17
Design Principles of Miško Hevery Father of AngularJS

Design Principles of Miško Hevery Father of AngularJS

Embed Size (px)

Citation preview

Page 1: Design Principles of Miško Hevery Father of AngularJS

Design Principles of

Miško HeveryFather of AngularJS

Page 2: Design Principles of Miško Hevery Father of AngularJS

The Principles

Boilerplate

D.R.Y. StructureTestabilit

y

Page 3: Design Principles of Miško Hevery Father of AngularJS

<angular/>

2009: GetAngular

Page 4: Design Principles of Miško Hevery Father of AngularJS

with Angular

1,500 LOC

Before

17,000 LOC

Project Results

Page 5: Design Principles of Miško Hevery Father of AngularJS

Database

RAM

<div>

<span> <ul>

<li><li><li>

Page 6: Design Principles of Miško Hevery Father of AngularJS

Data Binding

<html ng-app>

<body>

<input ng-model='user.name'>

<p ng-show='user.name'>Hi {{user.name}}</p>

<script src='angular.js'></script>

</body>

</html>

Eureka: DOM

Page 7: Design Principles of Miško Hevery Father of AngularJS

RAM

{{ databinding }}

Logic

<div>

<span> <ul>

<li><li><li>

Page 8: Design Principles of Miško Hevery Father of AngularJS

function UserCtrl() {

this.user = {

first:'Larry',

last:'Page'

};

this.bye = function() {

alert('bye:' + this.user.first);

};

}

<html ng-app>

<body ng-controller='UserCtrl as uCtrl'>

Hi <input ng-model='uCtrl.user.first'>

<button ng-click='uCtrl.bye()'>bye</button>

<script src='angular.js'></script>

<script src='UserControllers.js'></script>

</body>

</html>

MVC

index.html UserController.js

Page 9: Design Principles of Miško Hevery Father of AngularJS

Structure

ManagesNotifies

Observes

Logic / Controller(JS Classes)

UI / View(DOM)

RAMData / Model(JS Objects)

<div>

<span> <ul>

<li>

Page 10: Design Principles of Miško Hevery Father of AngularJS

Dependency Injectionfunction UserController(voiceSynth) {

this.user = { first:'Larry', last: 'Page' };

this.bye = function() { voiceSynth.say('bye') };

}

function VoiceSynth(webAudio) {

this.say = function(text) {// do Web Audio stuff};

};

var myApp = angular.module('myApp', []);

myApp.controller('UserController', UserController);

myApp.service('voiceSynth', VoiceSynth);

Module: myApp

UserController

WebAudio

VoiceSynth

View (DOM)

Page 11: Design Principles of Miško Hevery Father of AngularJS

Module: myMocks -> myApp

Dependency Injection: Mocking

function VoiceSynthMock() {

this.say = function(text) {

this.said.push(text);

};

this.said = [];

};

var myMocks = angular.module('myMocks', ['myApp']);

myApp.service('voiceSynth', VoiceSynthMock);

UserController

VoiceSynthMock

WebAudio

VoiceSynth

View (DOM)

Page 12: Design Principles of Miško Hevery Father of AngularJS

Eureka!!! my-tab

my-panemy-map

Imperative{{ databinding }}ng-hideng-controllerng-model

Declarative

Page 13: Design Principles of Miško Hevery Father of AngularJS

Directives as Components

<rating max="5" model="stars.average">

</rating>

<tabs>

<tab title="Active tab">...</tab>

<tab title="Inactive tab">...</tab>

</tabs>

<span tooltip="{{messages.tip1}}">

Page 14: Design Principles of Miško Hevery Father of AngularJS

Live Coding

Page 15: Design Principles of Miško Hevery Father of AngularJS

Community

Page 16: Design Principles of Miško Hevery Father of AngularJS

Ecosystem

Tools UI Components Libraries Books

AngularUIBatarang

Page 17: Design Principles of Miško Hevery Father of AngularJS

Thank You!angularjs.org

+angularjs

@angularjs

@mheveryCode samples: http://goo.gl/N1sCd